@tet/tet-components 1.4.19-testing → 1.4.20-production

package/dist/collection/docs/styling/colors/tet-colors.css

@@ -1755,6 +1755,168 @@
   background-color: var(--tc-violet-00);
 }
 
+.tet-color__brown80,
+.tet-color__brown80--hover:hover,
+.tet-color__brown80--focus:focus {
+  color: var(--tc-brown-80);
+}
+
+.tet-color__brown80--border,
+.tet-color__brown80--border-hover:hover,
+.tet-color__brown80--border-focus:focus {
+  border-color: var(--tc-brown-80);
+}
+
+.tet-color__brown80--background,
+.tet-color__brown80--background-hover:hover,
+.tet-color__brown80--background-focus:focus {
+  background-color: var(--tc-brown-80);
+}
+
+.tet-color__brown70,
+.tet-color__brown70--hover:hover,
+.tet-color__brown70--focus:focus {
+  color: var(--tc-brown-70);
+}
+
+.tet-color__brown70--border,
+.tet-color__brown70--border-hover:hover,
+.tet-color__brown70--border-focus:focus {
+  border-color: var(--tc-brown-70);
+}
+
+.tet-color__brown70--background,
+.tet-color__brown70--background-hover:hover,
+.tet-color__brown70--background-focus:focus {
+  background-color: var(--tc-brown-70);
+}
+
+.tet-color__brown60,
+.tet-color__brown60--hover:hover,
+.tet-color__brown60--focus:focus {
+  color: var(--tc-brown-60);
+}
+
+.tet-color__brown60--border,
+.tet-color__brown60--border-hover:hover,
+.tet-color__brown60--border-focus:focus {
+  border-color: var(--tc-brown-60);
+}
+
+.tet-color__brown60--background,
+.tet-color__brown60--background-hover:hover,
+.tet-color__brown60--background-focus:focus {
+  background-color: var(--tc-brown-60);
+}
+
+.tet-color__brown50,
+.tet-color__brown50--hover:hover,
+.tet-color__brown50--focus:focus {
+  color: var(--tc-brown-50);
+}
+
+.tet-color__brown50--border,
+.tet-color__brown50--border-hover:hover,
+.tet-color__brown50--border-focus:focus {
+  border-color: var(--tc-brown-50);
+}
+
+.tet-color__brown50--background,
+.tet-color__brown50--background-hover:hover,
+.tet-color__brown50--background-focus:focus {
+  background-color: var(--tc-brown-50);
+}
+
+.tet-color__brown40,
+.tet-color__brown40--hover:hover,
+.tet-color__brown40--focus:focus {
+  color: var(--tc-brown-40);
+}
+
+.tet-color__brown40--border,
+.tet-color__brown40--border-hover:hover,
+.tet-color__brown40--border-focus:focus {
+  border-color: var(--tc-brown-40);
+}
+
+.tet-color__brown40--background,
+.tet-color__brown40--background-hover:hover,
+.tet-color__brown40--background-focus:focus {
+  background-color: var(--tc-brown-40);
+}
+
+.tet-color__brown30,
+.tet-color__brown30--hover:hover,
+.tet-color__brown30--focus:focus {
+  color: var(--tc-brown-30);
+}
+
+.tet-color__brown30--border,
+.tet-color__brown30--border-hover:hover,
+.tet-color__brown30--border-focus:focus {
+  border-color: var(--tc-brown-30);
+}
+
+.tet-color__brown30--background,
+.tet-color__brown30--background-hover:hover,
+.tet-color__brown30--background-focus:focus {
+  background-color: var(--tc-brown-30);
+}
+
+.tet-color__brown20,
+.tet-color__brown20--hover:hover,
+.tet-color__brown20--focus:focus {
+  color: var(--tc-brown-20);
+}
+
+.tet-color__brown20--border,
+.tet-color__brown20--border-hover:hover,
+.tet-color__brown20--border-focus:focus {
+  border-color: var(--tc-brown-20);
+}
+
+.tet-color__brown20--background,
+.tet-color__brown20--background-hover:hover,
+.tet-color__brown20--background-focus:focus {
+  background-color: var(--tc-brown-20);
+}
+
+.tet-color__brown10,
+.tet-color__brown10--hover:hover,
+.tet-color__brown10--focus:focus {
+  color: var(--tc-brown-10);
+}
+
+.tet-color__brown10--border,
+.tet-color__brown10--border-hover:hover,
+.tet-color__brown10--border-focus:focus {
+  border-color: var(--tc-brown-10);
+}
+
+.tet-color__brown10--background,
+.tet-color__brown10--background-hover:hover,
+.tet-color__brown10--background-focus:focus {
+  background-color: var(--tc-brown-10);
+}
+
+.tet-color__brown00,
+.tet-color__brown00--hover:hover,
+.tet-color__brown00--focus:focus {
+  color: var(--tc-brown-00);
+}
+
+.tet-color__brown00--border,
+.tet-color__brown00--border-hover:hover,
+.tet-color__brown00--border-focus:focus {
+  border-color: var(--tc-brown-00);
+}
+
+.tet-color__brown00--background,
+.tet-color__brown00--background-hover:hover,
+.tet-color__brown00--background-focus:focus {
+  background-color: var(--tc-brown-00);
+}
+
 .tet-color__grey110,
 .tet-color__grey110--hover:hover,
 .tet-color__grey110--focus:focus {
@@ -3429,6 +3591,168 @@
   background-color: var(--tc-violet-00-dark);
 }
 
+.dark .tet-color__brown80:not(.tet-color--static),
+.dark .tet-color__brown80--hover:hover:not(.tet-color--static),
+.dark .tet-color__brown80--focus:focus:not(.tet-color--static) {
+  color: var(--tc-brown-80-dark);
+}
+
+.dark .tet-color__brown80--border:not(.tet-color--static),
+.dark .tet-color__brown80--border-hover:hover:not(.tet-color--static),
+.dark .tet-color__brown80--border-focus:focus:not(.tet-color--static) {
+  border-color: var(--tc-brown-80-dark);
+}
+
+.dark .tet-color__brown80--background:not(.tet-color--static),
+.dark .tet-color__brown80--background-hover:hover:not(.tet-color--static),
+.dark .tet-color__brown80--background-focus:focus:not(.tet-color--static) {
+  background-color: var(--tc-brown-80-dark);
+}
+
+.dark .tet-color__brown70:not(.tet-color--static),
+.dark .tet-color__brown70--hover:hover:not(.tet-color--static),
+.dark .tet-color__brown70--focus:focus:not(.tet-color--static) {
+  color: var(--tc-brown-70-dark);
+}
+
+.dark .tet-color__brown70--border:not(.tet-color--static),
+.dark .tet-color__brown70--border-hover:hover:not(.tet-color--static),
+.dark .tet-color__brown70--border-focus:focus:not(.tet-color--static) {
+  border-color: var(--tc-brown-70-dark);
+}
+
+.dark .tet-color__brown70--background:not(.tet-color--static),
+.dark .tet-color__brown70--background-hover:hover:not(.tet-color--static),
+.dark .tet-color__brown70--background-focus:focus:not(.tet-color--static) {
+  background-color: var(--tc-brown-70-dark);
+}
+
+.dark .tet-color__brown60:not(.tet-color--static),
+.dark .tet-color__brown60--hover:hover:not(.tet-color--static),
+.dark .tet-color__brown60--focus:focus:not(.tet-color--static) {
+  color: var(--tc-brown-60-dark);
+}
+
+.dark .tet-color__brown60--border:not(.tet-color--static),
+.dark .tet-color__brown60--border-hover:hover:not(.tet-color--static),
+.dark .tet-color__brown60--border-focus:focus:not(.tet-color--static) {
+  border-color: var(--tc-brown-60-dark);
+}
+
+.dark .tet-color__brown60--background:not(.tet-color--static),
+.dark .tet-color__brown60--background-hover:hover:not(.tet-color--static),
+.dark .tet-color__brown60--background-focus:focus:not(.tet-color--static) {
+  background-color: var(--tc-brown-60-dark);
+}
+
+.dark .tet-color__brown50:not(.tet-color--static),
+.dark .tet-color__brown50--hover:hover:not(.tet-color--static),
+.dark .tet-color__brown50--focus:focus:not(.tet-color--static) {
+  color: var(--tc-brown-50-dark);
+}
+
+.dark .tet-color__brown50--border:not(.tet-color--static),
+.dark .tet-color__brown50--border-hover:hover:not(.tet-color--static),
+.dark .tet-color__brown50--border-focus:focus:not(.tet-color--static) {
+  border-color: var(--tc-brown-50-dark);
+}
+
+.dark .tet-color__brown50--background:not(.tet-color--static),
+.dark .tet-color__brown50--background-hover:hover:not(.tet-color--static),
+.dark .tet-color__brown50--background-focus:focus:not(.tet-color--static) {
+  background-color: var(--tc-brown-50-dark);
+}
+
+.dark .tet-color__brown40:not(.tet-color--static),
+.dark .tet-color__brown40--hover:hover:not(.tet-color--static),
+.dark .tet-color__brown40--focus:focus:not(.tet-color--static) {
+  color: var(--tc-brown-40-dark);
+}
+
+.dark .tet-color__brown40--border:not(.tet-color--static),
+.dark .tet-color__brown40--border-hover:hover:not(.tet-color--static),
+.dark .tet-color__brown40--border-focus:focus:not(.tet-color--static) {
+  border-color: var(--tc-brown-40-dark);
+}
+
+.dark .tet-color__brown40--background:not(.tet-color--static),
+.dark .tet-color__brown40--background-hover:hover:not(.tet-color--static),
+.dark .tet-color__brown40--background-focus:focus:not(.tet-color--static) {
+  background-color: var(--tc-brown-40-dark);
+}
+
+.dark .tet-color__brown30:not(.tet-color--static),
+.dark .tet-color__brown30--hover:hover:not(.tet-color--static),
+.dark .tet-color__brown30--focus:focus:not(.tet-color--static) {
+  color: var(--tc-brown-30-dark);
+}
+
+.dark .tet-color__brown30--border:not(.tet-color--static),
+.dark .tet-color__brown30--border-hover:hover:not(.tet-color--static),
+.dark .tet-color__brown30--border-focus:focus:not(.tet-color--static) {
+  border-color: var(--tc-brown-30-dark);
+}
+
+.dark .tet-color__brown30--background:not(.tet-color--static),
+.dark .tet-color__brown30--background-hover:hover:not(.tet-color--static),
+.dark .tet-color__brown30--background-focus:focus:not(.tet-color--static) {
+  background-color: var(--tc-brown-30-dark);
+}
+
+.dark .tet-color__brown20:not(.tet-color--static),
+.dark .tet-color__brown20--hover:hover:not(.tet-color--static),
+.dark .tet-color__brown20--focus:focus:not(.tet-color--static) {
+  color: var(--tc-brown-20-dark);
+}
+
+.dark .tet-color__brown20--border:not(.tet-color--static),
+.dark .tet-color__brown20--border-hover:hover:not(.tet-color--static),
+.dark .tet-color__brown20--border-focus:focus:not(.tet-color--static) {
+  border-color: var(--tc-brown-20-dark);
+}
+
+.dark .tet-color__brown20--background:not(.tet-color--static),
+.dark .tet-color__brown20--background-hover:hover:not(.tet-color--static),
+.dark .tet-color__brown20--background-focus:focus:not(.tet-color--static) {
+  background-color: var(--tc-brown-20-dark);
+}
+
+.dark .tet-color__brown10:not(.tet-color--static),
+.dark .tet-color__brown10--hover:hover:not(.tet-color--static),
+.dark .tet-color__brown10--focus:focus:not(.tet-color--static) {
+  color: var(--tc-brown-10-dark);
+}
+
+.dark .tet-color__brown10--border:not(.tet-color--static),
+.dark .tet-color__brown10--border-hover:hover:not(.tet-color--static),
+.dark .tet-color__brown10--border-focus:focus:not(.tet-color--static) {
+  border-color: var(--tc-brown-10-dark);
+}
+
+.dark .tet-color__brown10--background:not(.tet-color--static),
+.dark .tet-color__brown10--background-hover:hover:not(.tet-color--static),
+.dark .tet-color__brown10--background-focus:focus:not(.tet-color--static) {
+  background-color: var(--tc-brown-10-dark);
+}
+
+.dark .tet-color__brown00:not(.tet-color--static),
+.dark .tet-color__brown00--hover:hover:not(.tet-color--static),
+.dark .tet-color__brown00--focus:focus:not(.tet-color--static) {
+  color: var(--tc-brown-00-dark);
+}
+
+.dark .tet-color__brown00--border:not(.tet-color--static),
+.dark .tet-color__brown00--border-hover:hover:not(.tet-color--static),
+.dark .tet-color__brown00--border-focus:focus:not(.tet-color--static) {
+  border-color: var(--tc-brown-00-dark);
+}
+
+.dark .tet-color__brown00--background:not(.tet-color--static),
+.dark .tet-color__brown00--background-hover:hover:not(.tet-color--static),
+.dark .tet-color__brown00--background-focus:focus:not(.tet-color--static) {
+  background-color: var(--tc-brown-00-dark);
+}
+
 .dark .tet-color__grey110:not(.tet-color--static),
 .dark .tet-color__grey110--hover:hover:not(.tet-color--static),
 .dark .tet-color__grey110--focus:focus:not(.tet-color--static) {
@@ -3805,6 +4129,128 @@
 .container .container-section.container-example > span {
   margin-bottom: 1rem;
 }
+.container .container-section.token-sections {
+  flex-direction: column;
+  gap: 3rem;
+}
+.container .container-section .token-empty-state {
+  width: 100%;
+  border: 0.0625rem dashed var(--tc-border-tertiary);
+  border-radius: 0.75rem;
+  padding: 0.75rem 1rem;
+  color: var(--tc-text-secondary);
+}
+.container .container-section .token-section {
+  width: 100%;
+}
+.container .container-section .token-section__title {
+  margin-bottom: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 1rem;
+  font-weight: 500;
+  background: var(--tc-layer-tertiary);
+  border-radius: 0.5rem;
+}
+.container .container-section .token-section__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(16.25rem, 1fr));
+  gap: 0.75rem;
+}
+.container .container-section .token-section__subsections {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+.container .container-section .token-subsection__title {
+  margin-bottom: 0.5rem;
+  padding-left: 0.25rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--tc-text-secondary);
+}
+.container .container-section .token-color {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  gap: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--tc-background-primary);
+  border: 0.0625rem solid var(--tc-border-quaternary);
+  border-radius: 0.75rem;
+  min-height: 3.5rem;
+}
+.container .container-section .token-color--button {
+  width: 100%;
+  background: var(--tc-background-primary);
+  text-align: left;
+  cursor: pointer;
+  color: inherit;
+  font: inherit;
+}
+.container .container-section .token-color--copied {
+  border-color: var(--tc-border-primary);
+}
+.container .container-section .token-color--copied .token-color__copied-overlay {
+  opacity: 0.86;
+  transform: scale(0.99);
+  transition: all 0.3s ease;
+}
+.container .container-section .token-color:focus-visible {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.125rem;
+}
+.container .container-section .token-color__swatch {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 0.5rem;
+  border: 0.0625rem solid var(--tc-border-quaternary);
+  flex: 0 0 auto;
+}
+.container .container-section .token-color__meta {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+.container .container-section .token-color__name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  overflow-wrap: anywhere;
+}
+.container .container-section .token-color__value {
+  margin-top: 0.125rem;
+  font-family: monospace;
+  font-size: 0.75rem;
+  color: var(--tc-text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.container .container-section .token-color__theme-value {
+  margin-top: 0.25rem;
+  font-family: monospace;
+  font-size: 0.75rem;
+  color: var(--tc-text-secondary);
+  overflow-wrap: anywhere;
+}
+.container .container-section .token-color__copied-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--tc-layer-primary);
+  color: var(--tc-text-primary);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  opacity: 0;
+  transform: scale(0.98);
+  transition: opacity 0.14s ease, transform 0.14s ease;
+  pointer-events: none;
+}
 .container .container-section .section {
   display: flex;
   flex-direction: column;