@tet/tet-components 1.3.60-testing → 1.3.61-staging

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

@@ -351,528 +351,3502 @@
   font-family: var(--font-family-content);
 }
 
-:host {
-  /**
-  * @prop --icon-size: The size of the icon.
-  * @prop --icon-color: The color of the icon.
-  * @prop --icon-container-display: The display parameter of the icon container.
-  */
-  --icon-color: rgb(10, 11, 13);
-  --icon-container-display: flex;
+.tet-color__blue,
+.tet-color__blue--hover:hover,
+.tet-color__blue--focus:focus {
+  color: var(--tc-blue-40);
 }
 
-.container.show-variables .container-section .section .section-color {
-  padding: 0.5rem 0.25rem 1.5rem 0.75rem;
+.tet-color__blue--border,
+.tet-color__blue--border-hover:hover,
+.tet-color__blue--border-focus:focus {
+  border-color: var(--tc-blue-40);
 }
-.container.show-variables .container-section .section .section-color .color-name {
-  display: initial;
+
+.tet-color__blue--background,
+.tet-color__blue--background-hover:hover,
+.tet-color__blue--background-focus:focus {
+  background-color: var(--tc-blue-40);
 }
 
-.d-none {
-  display: none;
+.tet-color__blue80,
+.tet-color__blue80--hover:hover,
+.tet-color__blue80--focus:focus {
+  color: var(--tc-blue-80);
 }
 
-.variable-container .container-section {
-  justify-content: center;
+.tet-color__blue80--border,
+.tet-color__blue80--border-hover:hover,
+.tet-color__blue80--border-focus:focus {
+  border-color: var(--tc-blue-80);
 }
-.variable-container .container-section .variable-wrapper {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
+
+.tet-color__blue80--background,
+.tet-color__blue80--background-hover:hover,
+.tet-color__blue80--background-focus:focus {
+  background-color: var(--tc-blue-80);
 }
-.variable-container .container-section .variable-wrapper .variable-name {
-  align-self: center;
-  padding: 3.5rem 0;
+
+.tet-color__blue70,
+.tet-color__blue70--hover:hover,
+.tet-color__blue70--focus:focus {
+  color: var(--tc-blue-70);
 }
-.variable-container .container-section .variable-part {
-  position: relative;
-  font-size: 1.75rem;
-  align-self: center;
+
+.tet-color__blue70--border,
+.tet-color__blue70--border-hover:hover,
+.tet-color__blue70--border-focus:focus {
+  border-color: var(--tc-blue-70);
 }
-.variable-container .container-section .variable-part:after {
-  content: "";
-  position: absolute;
+
+.tet-color__blue70--background,
+.tet-color__blue70--background-hover:hover,
+.tet-color__blue70--background-focus:focus {
+  background-color: var(--tc-blue-70);
 }
-.variable-container .container-section .variable-part.variable:after {
-  text-align: center;
-  width: 90%;
-  height: 1.25rem;
-  bottom: -1.5625rem;
-  left: 5%;
-  font-size: 1rem;
+
+.tet-color__blue60,
+.tet-color__blue60--hover:hover,
+.tet-color__blue60--focus:focus {
+  color: var(--tc-blue-60);
 }
-.variable-container .container-section .variable-part.variable.variable-color:after {
-  border-top: 0.125rem solid #779af5;
-  content: "krāsa";
+
+.tet-color__blue60--border,
+.tet-color__blue60--border-hover:hover,
+.tet-color__blue60--border-focus:focus {
+  border-color: var(--tc-blue-60);
 }
-.variable-container .container-section .variable-part.variable.variable-type:after {
-  border-top: 0.125rem solid #779af5;
-  content: "tips";
+
+.tet-color__blue60--background,
+.tet-color__blue60--background-hover:hover,
+.tet-color__blue60--background-focus:focus {
+  background-color: var(--tc-blue-60);
 }
-.variable-container .container-section .variable-part.variable.variable-state:after {
-  border-top: 0.125rem solid #779af5;
-  content: "statuss";
+
+.tet-color__blue50,
+.tet-color__blue50--hover:hover,
+.tet-color__blue50--focus:focus {
+  color: var(--tc-blue-50);
 }
 
-.container .container-title {
-  background: rgb(235, 237, 239);
-  padding: 1rem 0;
-  margin: 0.25rem 0;
-  text-align: center;
-  font-size: 1.5rem;
-  border-radius: 1.5rem;
+.tet-color__blue50--border,
+.tet-color__blue50--border-hover:hover,
+.tet-color__blue50--border-focus:focus {
+  border-color: var(--tc-blue-50);
 }
-.container .container-title.main {
-  font-weight: 600;
+
+.tet-color__blue50--background,
+.tet-color__blue50--background-hover:hover,
+.tet-color__blue50--background-focus:focus {
+  background-color: var(--tc-blue-50);
 }
-.container .container-section {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  border: 0.0625rem grey solid;
-  border-radius: 2rem;
-  padding: 1rem;
+
+.tet-color__blue40,
+.tet-color__blue40--hover:hover,
+.tet-color__blue40--focus:focus {
+  color: var(--tc-blue-40);
 }
-.container .container-section.container-example {
-  flex-direction: column;
+
+.tet-color__blue40--border,
+.tet-color__blue40--border-hover:hover,
+.tet-color__blue40--border-focus:focus {
+  border-color: var(--tc-blue-40);
 }
-.container .container-section.container-example .variable-example {
-  font-size: 0.88rem;
-  line-height: 1.5em;
-  padding: 0.5rem;
-  background-color: rgb(237, 245, 252);
+
+.tet-color__blue40--background,
+.tet-color__blue40--background-hover:hover,
+.tet-color__blue40--background-focus:focus {
+  background-color: var(--tc-blue-40);
 }
-.container .container-section.container-example span {
-  padding-bottom: 1rem;
+
+.tet-color__blue30,
+.tet-color__blue30--hover:hover,
+.tet-color__blue30--focus:focus {
+  color: var(--tc-blue-30);
 }
-.container .container-section .section {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  flex-grow: 1;
-  position: relative;
-  padding-top: 1.5rem;
-  padding-bottom: 1rem;
-  max-width: 18rem;
+
+.tet-color__blue30--border,
+.tet-color__blue30--border-hover:hover,
+.tet-color__blue30--border-focus:focus {
+  border-color: var(--tc-blue-30);
 }
-.container .container-section .section::after {
-  position: absolute;
-  top: 0;
-  width: 100%;
-  text-align: center;
-  font-weight: 500;
-  border-left: 0.125rem solid black;
-  background: #e9e9e9;
+
+.tet-color__blue30--background,
+.tet-color__blue30--background-hover:hover,
+.tet-color__blue30--background-focus:focus {
+  background-color: var(--tc-blue-30);
 }
-.container .container-section .section.section-foundation:after {
-  content: "Foundation";
+
+.tet-color__blue20,
+.tet-color__blue20--hover:hover,
+.tet-color__blue20--focus:focus {
+  color: var(--tc-blue-20);
 }
-.container .container-section .section.section-greyscale:after {
-  content: "Greyscale";
+
+.tet-color__blue20--border,
+.tet-color__blue20--border-hover:hover,
+.tet-color__blue20--border-focus:focus {
+  border-color: var(--tc-blue-20);
 }
-.container .container-section .section.section-text:after {
-  content: "Text";
+
+.tet-color__blue20--background,
+.tet-color__blue20--background-hover:hover,
+.tet-color__blue20--background-focus:focus {
+  background-color: var(--tc-blue-20);
 }
-.container .container-section .section.section-background:after {
-  content: "Background";
+
+.tet-color__blue10,
+.tet-color__blue10--hover:hover,
+.tet-color__blue10--focus:focus {
+  color: var(--tc-blue-10);
 }
-.container .container-section .section.section-border:after {
-  content: "Border";
+
+.tet-color__blue10--border,
+.tet-color__blue10--border-hover:hover,
+.tet-color__blue10--border-focus:focus {
+  border-color: var(--tc-blue-10);
 }
-.container .container-section .section.section-interaction:after {
-  content: "Interaction";
+
+.tet-color__blue10--background,
+.tet-color__blue10--background-hover:hover,
+.tet-color__blue10--background-focus:focus {
+  background-color: var(--tc-blue-10);
 }
-.container .container-section .section.section-gradient:after {
-  content: "Gradient";
+
+.tet-color__blue00,
+.tet-color__blue00--hover:hover,
+.tet-color__blue00--focus:focus {
+  color: var(--tc-blue-00);
 }
-.container .container-section .section.section-blue:after {
-  content: "Blue";
+
+.tet-color__blue00--border,
+.tet-color__blue00--border-hover:hover,
+.tet-color__blue00--border-focus:focus {
+  border-color: var(--tc-blue-00);
 }
-.container .container-section .section.section-mint:after {
-  content: "Mint";
+
+.tet-color__blue00--background,
+.tet-color__blue00--background-hover:hover,
+.tet-color__blue00--background-focus:focus {
+  background-color: var(--tc-blue-00);
 }
-.container .container-section .section.section-green:after {
-  content: "Green";
+
+.tet-color__blue80dark,
+.tet-color__blue80dark--hover:hover,
+.tet-color__blue80dark--focus:focus {
+  color: var(--tc-blue-80);
 }
-.container .container-section .section.section-yellow:after {
-  content: "Yellow";
+
+.tet-color__blue80dark--border,
+.tet-color__blue80dark--border-hover:hover,
+.tet-color__blue80dark--border-focus:focus {
+  border-color: var(--tc-blue-80);
 }
-.container .container-section .section.section-red:after {
-  content: "Red";
+
+.tet-color__blue80dark--background,
+.tet-color__blue80dark--background-hover:hover,
+.tet-color__blue80dark--background-focus:focus {
+  background-color: var(--tc-blue-80);
 }
-.container .container-section .section.section-darkblue:after {
-  content: "Dark blue";
+
+.tet-color__blue70dark,
+.tet-color__blue70dark--hover:hover,
+.tet-color__blue70dark--focus:focus {
+  color: var(--tc-blue-70);
 }
-.container .container-section .section.section-darkmint:after {
-  content: "Dark mint";
+
+.tet-color__blue70dark--border,
+.tet-color__blue70dark--border-hover:hover,
+.tet-color__blue70dark--border-focus:focus {
+  border-color: var(--tc-blue-70);
 }
-.container .container-section .section.section-darkgreen:after {
-  content: "Dark green";
+
+.tet-color__blue70dark--background,
+.tet-color__blue70dark--background-hover:hover,
+.tet-color__blue70dark--background-focus:focus {
+  background-color: var(--tc-blue-70);
 }
-.container .container-section .section.section-darkyellow:after {
-  content: "Dark yellow";
+
+.tet-color__blue60dark,
+.tet-color__blue60dark--hover:hover,
+.tet-color__blue60dark--focus:focus {
+  color: var(--tc-blue-60);
 }
-.container .container-section .section.section-darkred:after {
-  content: "Dark red";
+
+.tet-color__blue60dark--border,
+.tet-color__blue60dark--border-hover:hover,
+.tet-color__blue60dark--border-focus:focus {
+  border-color: var(--tc-blue-60);
 }
-.container .container-section .section .section-title {
-  text-align: center;
-  font-weight: bold;
+
+.tet-color__blue60dark--background,
+.tet-color__blue60dark--background-hover:hover,
+.tet-color__blue60dark--background-focus:focus {
+  background-color: var(--tc-blue-60);
 }
-.container .container-section .section .section-color {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  width: 12rem;
-  line-height: 3rem;
-  padding: 0.5rem;
-  gap: 1rem;
-  white-space: nowrap;
+
+.tet-color__blue50dark,
+.tet-color__blue50dark--hover:hover,
+.tet-color__blue50dark--focus:focus {
+  color: var(--tc-blue-50);
 }
-.container .container-section .section .section-color .color-name {
-  display: none;
-  white-space: nowrap;
-  position: absolute;
-  bottom: 0;
-  line-height: 0.875rem;
+
+.tet-color__blue50dark--border,
+.tet-color__blue50dark--border-hover:hover,
+.tet-color__blue50dark--border-focus:focus {
+  border-color: var(--tc-blue-50);
 }
-.container .container-section .section .section-color .color {
-  width: 3rem;
-  height: 3rem;
-  border-radius: 50%;
-  border: 0.0625rem lightgrey dashed;
+
+.tet-color__blue50dark--background,
+.tet-color__blue50dark--background-hover:hover,
+.tet-color__blue50dark--background-focus:focus {
+  background-color: var(--tc-blue-50);
 }
-.container .container-section .section .section-color .color::after {
-  position: absolute;
-  bottom: -1.5rem;
-  width: 100%;
-  font-size: 0.75rem;
-  color: cornflowerblue;
+
+.tet-color__blue40dark,
+.tet-color__blue40dark--hover:hover,
+.tet-color__blue40dark--focus:focus {
+  color: var(--tc-blue-40);
+}
+
+.tet-color__blue40dark--border,
+.tet-color__blue40dark--border-hover:hover,
+.tet-color__blue40dark--border-focus:focus {
+  border-color: var(--tc-blue-40);
+}
+
+.tet-color__blue40dark--background,
+.tet-color__blue40dark--background-hover:hover,
+.tet-color__blue40dark--background-focus:focus {
+  background-color: var(--tc-blue-40);
+}
+
+.tet-color__blue10dark,
+.tet-color__blue10dark--hover:hover,
+.tet-color__blue10dark--focus:focus {
+  color: var(--tc-blue-10);
+}
+
+.tet-color__blue10dark--border,
+.tet-color__blue10dark--border-hover:hover,
+.tet-color__blue10dark--border-focus:focus {
+  border-color: var(--tc-blue-10);
+}
+
+.tet-color__blue10dark--background,
+.tet-color__blue10dark--background-hover:hover,
+.tet-color__blue10dark--background-focus:focus {
+  background-color: var(--tc-blue-10);
+}
+
+.tet-color__green,
+.tet-color__green--hover:hover,
+.tet-color__green--focus:focus {
+  color: var(--tc-green-40);
 }
-.container .container-section .section .section-color .color.foundation-blue {
-  background: rgb(0, 96, 245);
+
+.tet-color__green--border,
+.tet-color__green--border-hover:hover,
+.tet-color__green--border-focus:focus {
+  border-color: var(--tc-green-40);
+}
+
+.tet-color__green--background,
+.tet-color__green--background-hover:hover,
+.tet-color__green--background-focus:focus {
+  background-color: var(--tc-green-40);
+}
+
+.tet-color__green80,
+.tet-color__green80--hover:hover,
+.tet-color__green80--focus:focus {
+  color: var(--tc-green-80);
 }
-.container .container-section .section .section-color .color.foundation-mint {
-  background: rgb(31, 208, 214);
+
+.tet-color__green80--border,
+.tet-color__green80--border-hover:hover,
+.tet-color__green80--border-focus:focus {
+  border-color: var(--tc-green-80);
 }
-.container .container-section .section .section-color .color.foundation-purple {
-  background: rgb(149, 116, 231);
+
+.tet-color__green80--background,
+.tet-color__green80--background-hover:hover,
+.tet-color__green80--background-focus:focus {
+  background-color: var(--tc-green-80);
 }
-.container .container-section .section .section-color .color.foundation-green {
-  background: rgb(22, 197, 95);
+
+.tet-color__green70,
+.tet-color__green70--hover:hover,
+.tet-color__green70--focus:focus {
+  color: var(--tc-green-70);
 }
-.container .container-section .section .section-color .color.foundation-yellow {
-  background: rgb(255, 182, 26);
+
+.tet-color__green70--border,
+.tet-color__green70--border-hover:hover,
+.tet-color__green70--border-focus:focus {
+  border-color: var(--tc-green-70);
 }
-.container .container-section .section .section-color .color.foundation-red {
-  background: rgb(233, 69, 54);
+
+.tet-color__green70--background,
+.tet-color__green70--background-hover:hover,
+.tet-color__green70--background-focus:focus {
+  background-color: var(--tc-green-70);
 }
-.container .container-section .section .section-color .color.foundation-black {
-  background: rgb(10, 11, 13);
+
+.tet-color__green60,
+.tet-color__green60--hover:hover,
+.tet-color__green60--focus:focus {
+  color: var(--tc-green-60);
 }
-.container .container-section .section .section-color .color.foundation-white {
-  background: rgb(255, 255, 255);
+
+.tet-color__green60--border,
+.tet-color__green60--border-hover:hover,
+.tet-color__green60--border-focus:focus {
+  border-color: var(--tc-green-60);
 }
-.container .container-section .section .section-color .color.greyscale-90 {
-  background: rgb(22, 25, 29);
+
+.tet-color__green60--background,
+.tet-color__green60--background-hover:hover,
+.tet-color__green60--background-focus:focus {
+  background-color: var(--tc-green-60);
 }
-.container .container-section .section .section-color .color.greyscale-80 {
-  background: rgb(35, 40, 46);
+
+.tet-color__green50,
+.tet-color__green50--hover:hover,
+.tet-color__green50--focus:focus {
+  color: var(--tc-green-50);
 }
-.container .container-section .section .section-color .color.greyscale-70 {
-  background: rgb(67, 75, 86);
+
+.tet-color__green50--border,
+.tet-color__green50--border-hover:hover,
+.tet-color__green50--border-focus:focus {
+  border-color: var(--tc-green-50);
 }
-.container .container-section .section .section-color .color.greyscale-60 {
-  background: rgb(88, 99, 116);
+
+.tet-color__green50--background,
+.tet-color__green50--background-hover:hover,
+.tet-color__green50--background-focus:focus {
+  background-color: var(--tc-green-50);
 }
-.container .container-section .section .section-color .color.greyscale-50 {
-  background: rgb(153, 160, 174);
+
+.tet-color__green40,
+.tet-color__green40--hover:hover,
+.tet-color__green40--focus:focus {
+  color: var(--tc-green-40);
 }
-.container .container-section .section .section-color .color.greyscale-40 {
-  background: rgb(192, 197, 206);
+
+.tet-color__green40--border,
+.tet-color__green40--border-hover:hover,
+.tet-color__green40--border-focus:focus {
+  border-color: var(--tc-green-40);
 }
-.container .container-section .section .section-color .color.greyscale-30 {
-  background: rgb(215, 219, 224);
+
+.tet-color__green40--background,
+.tet-color__green40--background-hover:hover,
+.tet-color__green40--background-focus:focus {
+  background-color: var(--tc-green-40);
 }
-.container .container-section .section .section-color .color.greyscale-20 {
-  background: rgb(235, 237, 239);
+
+.tet-color__green30,
+.tet-color__green30--hover:hover,
+.tet-color__green30--focus:focus {
+  color: var(--tc-green-30);
 }
-.container .container-section .section .section-color .color.greyscale-10 {
-  background: rgb(247, 247, 247);
+
+.tet-color__green30--border,
+.tet-color__green30--border-hover:hover,
+.tet-color__green30--border-focus:focus {
+  border-color: var(--tc-green-30);
 }
-.container .container-section .section .section-color .color.text-primary {
-  background: rgb(10, 11, 13);
+
+.tet-color__green30--background,
+.tet-color__green30--background-hover:hover,
+.tet-color__green30--background-focus:focus {
+  background-color: var(--tc-green-30);
 }
-.container .container-section .section .section-color .color.text-secondary {
-  background: rgb(67, 75, 86);
+
+.tet-color__green20,
+.tet-color__green20--hover:hover,
+.tet-color__green20--focus:focus {
+  color: var(--tc-green-20);
 }
-.container .container-section .section .section-color .color.text-tertiary {
-  background: rgb(88, 99, 116);
+
+.tet-color__green20--border,
+.tet-color__green20--border-hover:hover,
+.tet-color__green20--border-focus:focus {
+  border-color: var(--tc-green-20);
 }
-.container .container-section .section .section-color .color.text-link {
-  background: rgb(0, 96, 245);
+
+.tet-color__green20--background,
+.tet-color__green20--background-hover:hover,
+.tet-color__green20--background-focus:focus {
+  background-color: var(--tc-green-20);
 }
-.container .container-section .section .section-color .color.text-quaternary {
-  background: rgb(153, 160, 174);
+
+.tet-color__green10,
+.tet-color__green10--hover:hover,
+.tet-color__green10--focus:focus {
+  color: var(--tc-green-10);
 }
-.container .container-section .section .section-color .color.background-primary {
-  background: rgb(255, 255, 255);
+
+.tet-color__green10--border,
+.tet-color__green10--border-hover:hover,
+.tet-color__green10--border-focus:focus {
+  border-color: var(--tc-green-10);
 }
-.container .container-section .section .section-color .color.background-secondary {
-  background: rgb(247, 247, 247);
+
+.tet-color__green10--background,
+.tet-color__green10--background-hover:hover,
+.tet-color__green10--background-focus:focus {
+  background-color: var(--tc-green-10);
 }
-.container .container-section .section .section-color .color.background-tertiary {
-  background: rgb(235, 237, 239);
+
+.tet-color__green00,
+.tet-color__green00--hover:hover,
+.tet-color__green00--focus:focus {
+  color: var(--tc-green-00);
 }
-.container .container-section .section .section-color .color.background-quaternary {
-  background: rgb(215, 219, 224);
+
+.tet-color__green00--border,
+.tet-color__green00--border-hover:hover,
+.tet-color__green00--border-focus:focus {
+  border-color: var(--tc-green-00);
 }
-.container .container-section .section .section-color .color.border-primary {
-  background: rgb(10, 11, 13);
+
+.tet-color__green00--background,
+.tet-color__green00--background-hover:hover,
+.tet-color__green00--background-focus:focus {
+  background-color: var(--tc-green-00);
 }
-.container .container-section .section .section-color .color.border-secondary {
-  background: rgb(153, 160, 174);
+
+.tet-color__green80dark,
+.tet-color__green80dark--hover:hover,
+.tet-color__green80dark--focus:focus {
+  color: var(--tc-green-80);
 }
-.container .container-section .section .section-color .color.border-tertiary {
-  background: rgb(192, 197, 206);
+
+.tet-color__green80dark--border,
+.tet-color__green80dark--border-hover:hover,
+.tet-color__green80dark--border-focus:focus {
+  border-color: var(--tc-green-80);
 }
-.container .container-section .section .section-color .color.border-quaternary {
-  background: rgb(215, 219, 224);
+
+.tet-color__green80dark--background,
+.tet-color__green80dark--background-hover:hover,
+.tet-color__green80dark--background-focus:focus {
+  background-color: var(--tc-green-80);
 }
-.container .container-section .section .section-color .color.interaction-disabledgrey {
-  background: rgba(88, 99, 116, 0.08);
+
+.tet-color__green70dark,
+.tet-color__green70dark--hover:hover,
+.tet-color__green70dark--focus:focus {
+  color: var(--tc-green-70);
 }
-.container .container-section .section .section-color .color.interaction-hovergrey {
-  background: rgba(88, 99, 116, 0.08);
+
+.tet-color__green70dark--border,
+.tet-color__green70dark--border-hover:hover,
+.tet-color__green70dark--border-focus:focus {
+  border-color: var(--tc-green-70);
 }
-.container .container-section .section .section-color .color.interaction-focusgrey {
-  background: rgba(88, 99, 116, 0.12);
+
+.tet-color__green70dark--background,
+.tet-color__green70dark--background-hover:hover,
+.tet-color__green70dark--background-focus:focus {
+  background-color: var(--tc-green-70);
 }
-.container .container-section .section .section-color .color.interaction-activegrey {
-  background: rgba(88, 99, 116, 0.16);
+
+.tet-color__green60dark,
+.tet-color__green60dark--hover:hover,
+.tet-color__green60dark--focus:focus {
+  color: var(--tc-green-60);
 }
-.container .container-section .section .section-color .color.interaction-hoverblue {
-  background: rgba(0, 96, 245, 0.08);
+
+.tet-color__green60dark--border,
+.tet-color__green60dark--border-hover:hover,
+.tet-color__green60dark--border-focus:focus {
+  border-color: var(--tc-green-60);
 }
-.container .container-section .section .section-color .color.interaction-focusblue {
-  background: rgba(0, 96, 245, 0.12);
+
+.tet-color__green60dark--background,
+.tet-color__green60dark--background-hover:hover,
+.tet-color__green60dark--background-focus:focus {
+  background-color: var(--tc-green-60);
 }
-.container .container-section .section .section-color .color.interaction-activeblue {
-  background: rgba(0, 96, 245, 0.16);
+
+.tet-color__green50dark,
+.tet-color__green50dark--hover:hover,
+.tet-color__green50dark--focus:focus {
+  color: var(--tc-green-50);
 }
-.container .container-section .section .section-color .color.gradient-tv {
-  background: radial-gradient(100% 100% at 0% 0%, #F8FFF5 0%, #DDF2E6 100%);
+
+.tet-color__green50dark--border,
+.tet-color__green50dark--border-hover:hover,
+.tet-color__green50dark--border-focus:focus {
+  border-color: var(--tc-green-50);
 }
-.container .container-section .section .section-color .color.gradient-tvplus {
-  background: radial-gradient(100% 100% at 0% 0%, #F2FDFF 0%, #FAFEFF 0.01%, #DEF0F8 100%);
+
+.tet-color__green50dark--background,
+.tet-color__green50dark--background-hover:hover,
+.tet-color__green50dark--background-focus:focus {
+  background-color: var(--tc-green-50);
 }
-.container .container-section .section .section-color .color.gradient-vtv {
-  background: radial-gradient(100% 100% at 0% 0%, #FFF0EB 0%, #FFFAFA 0.01%, #FFD8CC 100%);
+
+.tet-color__green40dark,
+.tet-color__green40dark--hover:hover,
+.tet-color__green40dark--focus:focus {
+  color: var(--tc-green-40);
 }
-.container .container-section .section .section-color .color.gradient-electricity {
-  background: radial-gradient(100% 100% at 0% 0%, #FEFBF6 0%, #FBF0D8 100%);
+
+.tet-color__green40dark--border,
+.tet-color__green40dark--border-hover:hover,
+.tet-color__green40dark--border-focus:focus {
+  border-color: var(--tc-green-40);
 }
-.container .container-section .section .section-color .color.gradient-internet {
-  background: radial-gradient(100% 100% at 0% 0%, #FBFDFF 0%, #DCEEFF 100%);
+
+.tet-color__green40dark--background,
+.tet-color__green40dark--background-hover:hover,
+.tet-color__green40dark--background-focus:focus {
+  background-color: var(--tc-green-40);
 }
-.container .container-section .section .section-color .color.gradient-bundles {
-  background: radial-gradient(100% 100% at 0% 0%, #FCFBFF 0%, #E5E5FF 100%);
+
+.tet-color__green10dark,
+.tet-color__green10dark--hover:hover,
+.tet-color__green10dark--focus:focus {
+  color: var(--tc-green-10);
 }
-.container .container-section .section .section-color .color.blue-80 {
-  background: rgb(8, 53, 104);
+
+.tet-color__green10dark--border,
+.tet-color__green10dark--border-hover:hover,
+.tet-color__green10dark--border-focus:focus {
+  border-color: var(--tc-green-10);
 }
-.container .container-section .section .section-color .color.blue-40 {
-  background: rgb(0, 96, 245);
+
+.tet-color__green10dark--background,
+.tet-color__green10dark--background-hover:hover,
+.tet-color__green10dark--background-focus:focus {
+  background-color: var(--tc-green-10);
 }
-.container .container-section .section .section-color .color.blue-30 {
-  background: rgb(52, 132, 244);
+
+.tet-color__yellow,
+.tet-color__yellow--hover:hover,
+.tet-color__yellow--focus:focus {
+  color: var(--tc-yellow-40);
 }
-.container .container-section .section .section-color .color.blue-20 {
-  background: rgb(113, 172, 244);
+
+.tet-color__yellow--border,
+.tet-color__yellow--border-hover:hover,
+.tet-color__yellow--border-focus:focus {
+  border-color: var(--tc-yellow-40);
 }
-.container .container-section .section .section-color .color.blue-10 {
-  background: rgb(201, 224, 248);
+
+.tet-color__yellow--background,
+.tet-color__yellow--background-hover:hover,
+.tet-color__yellow--background-focus:focus {
+  background-color: var(--tc-yellow-40);
 }
-.container .container-section .section .section-color .color.blue-00 {
-  background: rgb(237, 245, 252);
+
+.tet-color__yellow80,
+.tet-color__yellow80--hover:hover,
+.tet-color__yellow80--focus:focus {
+  color: var(--tc-yellow-80);
 }
-.container .container-section .section .section-color .color.mint-80 {
-  background: rgb(19, 74, 76);
+
+.tet-color__yellow80--border,
+.tet-color__yellow80--border-hover:hover,
+.tet-color__yellow80--border-focus:focus {
+  border-color: var(--tc-yellow-80);
 }
-.container .container-section .section .section-color .color.mint-40 {
-  background: rgb(31, 208, 214);
+
+.tet-color__yellow80--background,
+.tet-color__yellow80--background-hover:hover,
+.tet-color__yellow80--background-focus:focus {
+  background-color: var(--tc-yellow-80);
 }
-.container .container-section .section .section-color .color.mint-30 {
-  background: rgb(111, 227, 231);
+
+.tet-color__yellow70,
+.tet-color__yellow70--hover:hover,
+.tet-color__yellow70--focus:focus {
+  color: var(--tc-yellow-70);
 }
-.container .container-section .section .section-color .color.mint-20 {
-  background: rgb(153, 231, 234);
+
+.tet-color__yellow70--border,
+.tet-color__yellow70--border-hover:hover,
+.tet-color__yellow70--border-focus:focus {
+  border-color: var(--tc-yellow-70);
 }
-.container .container-section .section .section-color .color.mint-10 {
-  background: rgb(194, 243, 244);
+
+.tet-color__yellow70--background,
+.tet-color__yellow70--background-hover:hover,
+.tet-color__yellow70--background-focus:focus {
+  background-color: var(--tc-yellow-70);
 }
-.container .container-section .section .section-color .color.mint-00 {
-  background: rgb(229, 250, 250);
+
+.tet-color__yellow60,
+.tet-color__yellow60--hover:hover,
+.tet-color__yellow60--focus:focus {
+  color: var(--tc-yellow-60);
 }
-.container .container-section .section .section-color .color.green-80 {
-  background: rgb(31, 66, 45);
+
+.tet-color__yellow60--border,
+.tet-color__yellow60--border-hover:hover,
+.tet-color__yellow60--border-focus:focus {
+  border-color: var(--tc-yellow-60);
 }
-.container .container-section .section .section-color .color.green-40 {
-  background: rgb(22, 197, 95);
+
+.tet-color__yellow60--background,
+.tet-color__yellow60--background-hover:hover,
+.tet-color__yellow60--background-focus:focus {
+  background-color: var(--tc-yellow-60);
 }
-.container .container-section .section .section-color .color.green-30 {
-  background: rgb(66, 215, 128);
+
+.tet-color__yellow50,
+.tet-color__yellow50--hover:hover,
+.tet-color__yellow50--focus:focus {
+  color: var(--tc-yellow-50);
 }
-.container .container-section .section .section-color .color.green-20 {
-  background: rgb(117, 225, 162);
+
+.tet-color__yellow50--border,
+.tet-color__yellow50--border-hover:hover,
+.tet-color__yellow50--border-focus:focus {
+  border-color: var(--tc-yellow-50);
 }
-.container .container-section .section .section-color .color.green-10 {
-  background: rgb(169, 239, 198);
+
+.tet-color__yellow50--background,
+.tet-color__yellow50--background-hover:hover,
+.tet-color__yellow50--background-focus:focus {
+  background-color: var(--tc-yellow-50);
 }
-.container .container-section .section .section-color .color.green-00 {
-  background: rgb(231, 249, 238);
+
+.tet-color__yellow40,
+.tet-color__yellow40--hover:hover,
+.tet-color__yellow40--focus:focus {
+  color: var(--tc-yellow-40);
 }
-.container .container-section .section .section-color .color.yellow-80 {
-  background: rgb(80, 59, 22);
+
+.tet-color__yellow40--border,
+.tet-color__yellow40--border-hover:hover,
+.tet-color__yellow40--border-focus:focus {
+  border-color: var(--tc-yellow-40);
 }
-.container .container-section .section .section-color .color.yellow-50 {
-  background: rgb(255, 209, 38);
+
+.tet-color__yellow40--background,
+.tet-color__yellow40--background-hover:hover,
+.tet-color__yellow40--background-focus:focus {
+  background-color: var(--tc-yellow-40);
 }
-.container .container-section .section .section-color .color.yellow-40 {
-  background: rgb(255, 182, 26);
+
+.tet-color__yellow30,
+.tet-color__yellow30--hover:hover,
+.tet-color__yellow30--focus:focus {
+  color: var(--tc-yellow-30);
 }
-.container .container-section .section .section-color .color.yellow-30 {
-  background: rgb(251, 200, 91);
+
+.tet-color__yellow30--border,
+.tet-color__yellow30--border-hover:hover,
+.tet-color__yellow30--border-focus:focus {
+  border-color: var(--tc-yellow-30);
 }
-.container .container-section .section .section-color .color.yellow-20 {
-  background: rgb(249, 212, 134);
+
+.tet-color__yellow30--background,
+.tet-color__yellow30--background-hover:hover,
+.tet-color__yellow30--background-focus:focus {
+  background-color: var(--tc-yellow-30);
 }
-.container .container-section .section .section-color .color.yellow-10 {
-  background: rgb(251, 231, 187);
+
+.tet-color__yellow20,
+.tet-color__yellow20--hover:hover,
+.tet-color__yellow20--focus:focus {
+  color: var(--tc-yellow-20);
 }
-.container .container-section .section .section-color .color.yellow-00 {
-  background: rgb(252, 244, 227);
+
+.tet-color__yellow20--border,
+.tet-color__yellow20--border-hover:hover,
+.tet-color__yellow20--border-focus:focus {
+  border-color: var(--tc-yellow-20);
 }
-.container .container-section .section .section-color .color.red-80 {
-  background: rgb(108, 27, 19);
+
+.tet-color__yellow20--background,
+.tet-color__yellow20--background-hover:hover,
+.tet-color__yellow20--background-focus:focus {
+  background-color: var(--tc-yellow-20);
 }
-.container .container-section .section .section-color .color.red-50 {
-  background: rgb(229, 9, 20);
+
+.tet-color__yellow10,
+.tet-color__yellow10--hover:hover,
+.tet-color__yellow10--focus:focus {
+  color: var(--tc-yellow-10);
 }
-.container .container-section .section .section-color .color.red-40 {
-  background: rgb(233, 69, 54);
+
+.tet-color__yellow10--border,
+.tet-color__yellow10--border-hover:hover,
+.tet-color__yellow10--border-focus:focus {
+  border-color: var(--tc-yellow-10);
 }
-.container .container-section .section .section-color .color.red-30 {
-  background: rgb(239, 119, 108);
+
+.tet-color__yellow10--background,
+.tet-color__yellow10--background-hover:hover,
+.tet-color__yellow10--background-focus:focus {
+  background-color: var(--tc-yellow-10);
 }
-.container .container-section .section .section-color .color.red-20 {
-  background: rgb(243, 153, 145);
+
+.tet-color__yellow00,
+.tet-color__yellow00--hover:hover,
+.tet-color__yellow00--focus:focus {
+  color: var(--tc-yellow-00);
 }
-.container .container-section .section .section-color .color.red-10 {
-  background: rgb(248, 195, 191);
+
+.tet-color__yellow00--border,
+.tet-color__yellow00--border-hover:hover,
+.tet-color__yellow00--border-focus:focus {
+  border-color: var(--tc-yellow-00);
 }
-.container .container-section .section .section-color .color.red-00 {
-  background: rgb(252, 238, 238);
+
+.tet-color__yellow00--background,
+.tet-color__yellow00--background-hover:hover,
+.tet-color__yellow00--background-focus:focus {
+  background-color: var(--tc-yellow-00);
 }
-.container .container-section .section .section-color .color.darkblue-80 {
-  background: rgb(0, 36, 77);
+
+.tet-color__yellow80dark,
+.tet-color__yellow80dark--hover:hover,
+.tet-color__yellow80dark--focus:focus {
+  color: var(--tc-yellow-80);
 }
-.container .container-section .section .section-color .color.darkblue-70 {
-  background: rgb(0, 48, 102);
+
+.tet-color__yellow80dark--border,
+.tet-color__yellow80dark--border-hover:hover,
+.tet-color__yellow80dark--border-focus:focus {
+  border-color: var(--tc-yellow-80);
 }
-.container .container-section .section .section-color .color.darkblue-60 {
-  background: rgb(0, 71, 153);
+
+.tet-color__yellow80dark--background,
+.tet-color__yellow80dark--background-hover:hover,
+.tet-color__yellow80dark--background-focus:focus {
+  background-color: var(--tc-yellow-80);
 }
-.container .container-section .section .section-color .color.darkblue-50 {
-  background: rgb(0, 95, 204);
+
+.tet-color__yellow70dark,
+.tet-color__yellow70dark--hover:hover,
+.tet-color__yellow70dark--focus:focus {
+  color: var(--tc-yellow-70);
 }
-.container .container-section .section .section-color .color.darkblue-40 {
-  background: rgb(26, 115, 255);
+
+.tet-color__yellow70dark--border,
+.tet-color__yellow70dark--border-hover:hover,
+.tet-color__yellow70dark--border-focus:focus {
+  border-color: var(--tc-yellow-70);
 }
-.container .container-section .section .section-color .color.darkblue-10 {
-  background: rgb(194, 224, 255);
+
+.tet-color__yellow70dark--background,
+.tet-color__yellow70dark--background-hover:hover,
+.tet-color__yellow70dark--background-focus:focus {
+  background-color: var(--tc-yellow-70);
 }
-.container .container-section .section .section-color .color.darkmint-80 {
-  background: rgb(6, 53, 55);
+
+.tet-color__yellow60dark,
+.tet-color__yellow60dark--hover:hover,
+.tet-color__yellow60dark--focus:focus {
+  color: var(--tc-yellow-60);
 }
-.container .container-section .section .section-color .color.darkmint-70 {
-  background: rgb(11, 78, 80);
+
+.tet-color__yellow60dark--border,
+.tet-color__yellow60dark--border-hover:hover,
+.tet-color__yellow60dark--border-focus:focus {
+  border-color: var(--tc-yellow-60);
 }
-.container .container-section .section .section-color .color.darkmint-60 {
-  background: rgb(18, 122, 125);
+
+.tet-color__yellow60dark--background,
+.tet-color__yellow60dark--background-hover:hover,
+.tet-color__yellow60dark--background-focus:focus {
+  background-color: var(--tc-yellow-60);
 }
-.container .container-section .section .section-color .color.darkmint-50 {
-  background: rgb(24, 165, 170);
+
+.tet-color__yellow55dark,
+.tet-color__yellow55dark--hover:hover,
+.tet-color__yellow55dark--focus:focus {
+  color: var(--tc-yellow-50);
 }
-.container .container-section .section .section-color .color.darkmint-40 {
-  background: rgb(26, 213, 219);
+
+.tet-color__yellow55dark--border,
+.tet-color__yellow55dark--border-hover:hover,
+.tet-color__yellow55dark--border-focus:focus {
+  border-color: var(--tc-yellow-50);
 }
-.container .container-section .section .section-color .color.darkmint-10 {
-  background: rgb(153, 245, 255);
+
+.tet-color__yellow55dark--background,
+.tet-color__yellow55dark--background-hover:hover,
+.tet-color__yellow55dark--background-focus:focus {
+  background-color: var(--tc-yellow-50);
 }
-.container .container-section .section .section-color .color.darkgreen-80 {
-  background: rgb(5, 46, 22);
+
+.tet-color__yellow50dark,
+.tet-color__yellow50dark--hover:hover,
+.tet-color__yellow50dark--focus:focus {
+  color: var(--tc-yellow-50);
 }
-.container .container-section .section .section-color .color.darkgreen-70 {
-  background: rgb(8, 69, 33);
+
+.tet-color__yellow50dark--border,
+.tet-color__yellow50dark--border-hover:hover,
+.tet-color__yellow50dark--border-focus:focus {
+  border-color: var(--tc-yellow-50);
 }
-.container .container-section .section .section-color .color.darkgreen-60 {
-  background: rgb(12, 105, 51);
+
+.tet-color__yellow50dark--background,
+.tet-color__yellow50dark--background-hover:hover,
+.tet-color__yellow50dark--background-focus:focus {
+  background-color: var(--tc-yellow-50);
 }
-.container .container-section .section .section-color .color.darkgreen-50 {
-  background: rgb(17, 151, 73);
+
+.tet-color__yellow45dark,
+.tet-color__yellow45dark--hover:hover,
+.tet-color__yellow45dark--focus:focus {
+  color: var(--tc-yellow-40);
 }
-.container .container-section .section .section-color .color.darkgreen-40 {
-  background: rgb(37, 208, 108);
+
+.tet-color__yellow45dark--border,
+.tet-color__yellow45dark--border-hover:hover,
+.tet-color__yellow45dark--border-focus:focus {
+  border-color: var(--tc-yellow-40);
 }
-.container .container-section .section .section-color .color.darkgreen-10 {
-  background: rgb(184, 255, 213);
+
+.tet-color__yellow45dark--background,
+.tet-color__yellow45dark--background-hover:hover,
+.tet-color__yellow45dark--background-focus:focus {
+  background-color: var(--tc-yellow-40);
 }
-.container .container-section .section .section-color .color.darkyellow-80 {
-  background: rgb(51, 35, 0);
+
+.tet-color__yellow40dark,
+.tet-color__yellow40dark--hover:hover,
+.tet-color__yellow40dark--focus:focus {
+  color: var(--tc-yellow-40);
 }
-.container .container-section .section .section-color .color.darkyellow-70 {
-  background: rgb(102, 70, 0);
+
+.tet-color__yellow40dark--border,
+.tet-color__yellow40dark--border-hover:hover,
+.tet-color__yellow40dark--border-focus:focus {
+  border-color: var(--tc-yellow-40);
 }
-.container .container-section .section .section-color .color.darkyellow-60 {
-  background: rgb(168, 115, 0);
+
+.tet-color__yellow40dark--background,
+.tet-color__yellow40dark--background-hover:hover,
+.tet-color__yellow40dark--background-focus:focus {
+  background-color: var(--tc-yellow-40);
 }
-.container .container-section .section .section-color .color.darkyellow-55 {
-  background: rgb(204, 161, 0);
+
+.tet-color__yellow10dark,
+.tet-color__yellow10dark--hover:hover,
+.tet-color__yellow10dark--focus:focus {
+  color: var(--tc-yellow-10);
 }
-.container .container-section .section .section-color .color.darkyellow-50 {
-  background: rgb(229, 157, 0);
+
+.tet-color__yellow10dark--border,
+.tet-color__yellow10dark--border-hover:hover,
+.tet-color__yellow10dark--border-focus:focus {
+  border-color: var(--tc-yellow-10);
 }
-.container .container-section .section .section-color .color.darkyellow-45 {
-  background: rgb(229, 181, 0);
+
+.tet-color__yellow10dark--background,
+.tet-color__yellow10dark--background-hover:hover,
+.tet-color__yellow10dark--background-focus:focus {
+  background-color: var(--tc-yellow-10);
 }
-.container .container-section .section .section-color .color.darkyellow-40 {
-  background: rgb(255, 190, 51);
+
+.tet-color__red,
+.tet-color__red--hover:hover,
+.tet-color__red--focus:focus {
+  color: var(--tc-red-40);
 }
-.container .container-section .section .section-color .color.darkyellow-10 {
-  background: rgb(255, 232, 184);
+
+.tet-color__red--border,
+.tet-color__red--border-hover:hover,
+.tet-color__red--border-focus:focus {
+  border-color: var(--tc-red-40);
 }
-.container .container-section .section .section-color .color.darkred-80 {
-  background: rgb(55, 10, 6);
+
+.tet-color__red--background,
+.tet-color__red--background-hover:hover,
+.tet-color__red--background-focus:focus {
+  background-color: var(--tc-red-40);
 }
-.container .container-section .section .section-color .color.darkred-70 {
-  background: rgb(101, 19, 11);
+
+.tet-color__red80,
+.tet-color__red80--hover:hover,
+.tet-color__red80--focus:focus {
+  color: var(--tc-red-80);
 }
-.container .container-section .section .section-color .color.darkred-65 {
-  background: rgb(132, 5, 13);
+
+.tet-color__red80--border,
+.tet-color__red80--border-hover:hover,
+.tet-color__red80--border-focus:focus {
+  border-color: var(--tc-red-80);
 }
-.container .container-section .section .section-color .color.darkred-60 {
-  background: rgb(161, 30, 18);
+
+.tet-color__red80--background,
+.tet-color__red80--background-hover:hover,
+.tet-color__red80--background-focus:focus {
+  background-color: var(--tc-red-80);
 }
-.container .container-section .section .section-color .color.darkred-55 {
-  background: rgb(182, 7, 18);
+
+.tet-color__red70,
+.tet-color__red70--hover:hover,
+.tet-color__red70--focus:focus {
+  color: var(--tc-red-70);
 }
-.container .container-section .section .section-color .color.darkred-50 {
-  background: rgb(207, 38, 23);
+
+.tet-color__red70--border,
+.tet-color__red70--border-hover:hover,
+.tet-color__red70--border-focus:focus {
+  border-color: var(--tc-red-70);
 }
-.container .container-section .section .section-color .color.darkred-40 {
-  background: rgb(233, 69, 54);
+
+.tet-color__red70--background,
+.tet-color__red70--background-hover:hover,
+.tet-color__red70--background-focus:focus {
+  background-color: var(--tc-red-70);
 }
-.container .container-section .section .section-color .color.darkred-10 {
-  background: rgb(255, 208, 204);
+
+.tet-color__red60,
+.tet-color__red60--hover:hover,
+.tet-color__red60--focus:focus {
+  color: var(--tc-red-60);
+}
+
+.tet-color__red60--border,
+.tet-color__red60--border-hover:hover,
+.tet-color__red60--border-focus:focus {
+  border-color: var(--tc-red-60);
+}
+
+.tet-color__red60--background,
+.tet-color__red60--background-hover:hover,
+.tet-color__red60--background-focus:focus {
+  background-color: var(--tc-red-60);
+}
+
+.tet-color__red50,
+.tet-color__red50--hover:hover,
+.tet-color__red50--focus:focus {
+  color: var(--tc-red-50);
+}
+
+.tet-color__red50--border,
+.tet-color__red50--border-hover:hover,
+.tet-color__red50--border-focus:focus {
+  border-color: var(--tc-red-50);
+}
+
+.tet-color__red50--background,
+.tet-color__red50--background-hover:hover,
+.tet-color__red50--background-focus:focus {
+  background-color: var(--tc-red-50);
+}
+
+.tet-color__red40,
+.tet-color__red40--hover:hover,
+.tet-color__red40--focus:focus {
+  color: var(--tc-red-40);
+}
+
+.tet-color__red40--border,
+.tet-color__red40--border-hover:hover,
+.tet-color__red40--border-focus:focus {
+  border-color: var(--tc-red-40);
+}
+
+.tet-color__red40--background,
+.tet-color__red40--background-hover:hover,
+.tet-color__red40--background-focus:focus {
+  background-color: var(--tc-red-40);
+}
+
+.tet-color__red30,
+.tet-color__red30--hover:hover,
+.tet-color__red30--focus:focus {
+  color: var(--tc-red-30);
+}
+
+.tet-color__red30--border,
+.tet-color__red30--border-hover:hover,
+.tet-color__red30--border-focus:focus {
+  border-color: var(--tc-red-30);
+}
+
+.tet-color__red30--background,
+.tet-color__red30--background-hover:hover,
+.tet-color__red30--background-focus:focus {
+  background-color: var(--tc-red-30);
+}
+
+.tet-color__red20,
+.tet-color__red20--hover:hover,
+.tet-color__red20--focus:focus {
+  color: var(--tc-red-20);
+}
+
+.tet-color__red20--border,
+.tet-color__red20--border-hover:hover,
+.tet-color__red20--border-focus:focus {
+  border-color: var(--tc-red-20);
+}
+
+.tet-color__red20--background,
+.tet-color__red20--background-hover:hover,
+.tet-color__red20--background-focus:focus {
+  background-color: var(--tc-red-20);
+}
+
+.tet-color__red10,
+.tet-color__red10--hover:hover,
+.tet-color__red10--focus:focus {
+  color: var(--tc-red-10);
+}
+
+.tet-color__red10--border,
+.tet-color__red10--border-hover:hover,
+.tet-color__red10--border-focus:focus {
+  border-color: var(--tc-red-10);
+}
+
+.tet-color__red10--background,
+.tet-color__red10--background-hover:hover,
+.tet-color__red10--background-focus:focus {
+  background-color: var(--tc-red-10);
+}
+
+.tet-color__red00,
+.tet-color__red00--hover:hover,
+.tet-color__red00--focus:focus {
+  color: var(--tc-red-00);
+}
+
+.tet-color__red00--border,
+.tet-color__red00--border-hover:hover,
+.tet-color__red00--border-focus:focus {
+  border-color: var(--tc-red-00);
+}
+
+.tet-color__red00--background,
+.tet-color__red00--background-hover:hover,
+.tet-color__red00--background-focus:focus {
+  background-color: var(--tc-red-00);
+}
+
+.tet-color__red80dark,
+.tet-color__red80dark--hover:hover,
+.tet-color__red80dark--focus:focus {
+  color: var(--tc-red-80);
+}
+
+.tet-color__red80dark--border,
+.tet-color__red80dark--border-hover:hover,
+.tet-color__red80dark--border-focus:focus {
+  border-color: var(--tc-red-80);
+}
+
+.tet-color__red80dark--background,
+.tet-color__red80dark--background-hover:hover,
+.tet-color__red80dark--background-focus:focus {
+  background-color: var(--tc-red-80);
+}
+
+.tet-color__red70dark,
+.tet-color__red70dark--hover:hover,
+.tet-color__red70dark--focus:focus {
+  color: var(--tc-red-70);
+}
+
+.tet-color__red70dark--border,
+.tet-color__red70dark--border-hover:hover,
+.tet-color__red70dark--border-focus:focus {
+  border-color: var(--tc-red-70);
+}
+
+.tet-color__red70dark--background,
+.tet-color__red70dark--background-hover:hover,
+.tet-color__red70dark--background-focus:focus {
+  background-color: var(--tc-red-70);
+}
+
+.tet-color__red65dark,
+.tet-color__red65dark--hover:hover,
+.tet-color__red65dark--focus:focus {
+  color: var(--tc-red-60);
+}
+
+.tet-color__red65dark--border,
+.tet-color__red65dark--border-hover:hover,
+.tet-color__red65dark--border-focus:focus {
+  border-color: var(--tc-red-60);
+}
+
+.tet-color__red65dark--background,
+.tet-color__red65dark--background-hover:hover,
+.tet-color__red65dark--background-focus:focus {
+  background-color: var(--tc-red-60);
+}
+
+.tet-color__red60dark,
+.tet-color__red60dark--hover:hover,
+.tet-color__red60dark--focus:focus {
+  color: var(--tc-red-60);
+}
+
+.tet-color__red60dark--border,
+.tet-color__red60dark--border-hover:hover,
+.tet-color__red60dark--border-focus:focus {
+  border-color: var(--tc-red-60);
+}
+
+.tet-color__red60dark--background,
+.tet-color__red60dark--background-hover:hover,
+.tet-color__red60dark--background-focus:focus {
+  background-color: var(--tc-red-60);
+}
+
+.tet-color__red55dark,
+.tet-color__red55dark--hover:hover,
+.tet-color__red55dark--focus:focus {
+  color: var(--tc-red-50);
+}
+
+.tet-color__red55dark--border,
+.tet-color__red55dark--border-hover:hover,
+.tet-color__red55dark--border-focus:focus {
+  border-color: var(--tc-red-50);
+}
+
+.tet-color__red55dark--background,
+.tet-color__red55dark--background-hover:hover,
+.tet-color__red55dark--background-focus:focus {
+  background-color: var(--tc-red-50);
+}
+
+.tet-color__red50dark,
+.tet-color__red50dark--hover:hover,
+.tet-color__red50dark--focus:focus {
+  color: var(--tc-red-50);
+}
+
+.tet-color__red50dark--border,
+.tet-color__red50dark--border-hover:hover,
+.tet-color__red50dark--border-focus:focus {
+  border-color: var(--tc-red-50);
+}
+
+.tet-color__red50dark--background,
+.tet-color__red50dark--background-hover:hover,
+.tet-color__red50dark--background-focus:focus {
+  background-color: var(--tc-red-50);
+}
+
+.tet-color__red40dark,
+.tet-color__red40dark--hover:hover,
+.tet-color__red40dark--focus:focus {
+  color: var(--tc-red-40);
+}
+
+.tet-color__red40dark--border,
+.tet-color__red40dark--border-hover:hover,
+.tet-color__red40dark--border-focus:focus {
+  border-color: var(--tc-red-40);
+}
+
+.tet-color__red40dark--background,
+.tet-color__red40dark--background-hover:hover,
+.tet-color__red40dark--background-focus:focus {
+  background-color: var(--tc-red-40);
+}
+
+.tet-color__red10dark,
+.tet-color__red10dark--hover:hover,
+.tet-color__red10dark--focus:focus {
+  color: var(--tc-red-10);
+}
+
+.tet-color__red10dark--border,
+.tet-color__red10dark--border-hover:hover,
+.tet-color__red10dark--border-focus:focus {
+  border-color: var(--tc-red-10);
+}
+
+.tet-color__red10dark--background,
+.tet-color__red10dark--background-hover:hover,
+.tet-color__red10dark--background-focus:focus {
+  background-color: var(--tc-red-10);
+}
+
+.tet-color__violet,
+.tet-color__violet--hover:hover,
+.tet-color__violet--focus:focus {
+  color: var(--tc-violet-40);
+}
+
+.tet-color__violet--border,
+.tet-color__violet--border-hover:hover,
+.tet-color__violet--border-focus:focus {
+  border-color: var(--tc-violet-40);
+}
+
+.tet-color__violet--background,
+.tet-color__violet--background-hover:hover,
+.tet-color__violet--background-focus:focus {
+  background-color: var(--tc-violet-40);
+}
+
+.tet-color__violet80,
+.tet-color__violet80--hover:hover,
+.tet-color__violet80--focus:focus {
+  color: var(--tc-violet-80);
+}
+
+.tet-color__violet80--border,
+.tet-color__violet80--border-hover:hover,
+.tet-color__violet80--border-focus:focus {
+  border-color: var(--tc-violet-80);
+}
+
+.tet-color__violet80--background,
+.tet-color__violet80--background-hover:hover,
+.tet-color__violet80--background-focus:focus {
+  background-color: var(--tc-violet-80);
+}
+
+.tet-color__violet70,
+.tet-color__violet70--hover:hover,
+.tet-color__violet70--focus:focus {
+  color: var(--tc-violet-70);
+}
+
+.tet-color__violet70--border,
+.tet-color__violet70--border-hover:hover,
+.tet-color__violet70--border-focus:focus {
+  border-color: var(--tc-violet-70);
+}
+
+.tet-color__violet70--background,
+.tet-color__violet70--background-hover:hover,
+.tet-color__violet70--background-focus:focus {
+  background-color: var(--tc-violet-70);
+}
+
+.tet-color__violet60,
+.tet-color__violet60--hover:hover,
+.tet-color__violet60--focus:focus {
+  color: var(--tc-violet-60);
+}
+
+.tet-color__violet60--border,
+.tet-color__violet60--border-hover:hover,
+.tet-color__violet60--border-focus:focus {
+  border-color: var(--tc-violet-60);
+}
+
+.tet-color__violet60--background,
+.tet-color__violet60--background-hover:hover,
+.tet-color__violet60--background-focus:focus {
+  background-color: var(--tc-violet-60);
+}
+
+.tet-color__violet50,
+.tet-color__violet50--hover:hover,
+.tet-color__violet50--focus:focus {
+  color: var(--tc-violet-50);
+}
+
+.tet-color__violet50--border,
+.tet-color__violet50--border-hover:hover,
+.tet-color__violet50--border-focus:focus {
+  border-color: var(--tc-violet-50);
+}
+
+.tet-color__violet50--background,
+.tet-color__violet50--background-hover:hover,
+.tet-color__violet50--background-focus:focus {
+  background-color: var(--tc-violet-50);
+}
+
+.tet-color__violet40,
+.tet-color__violet40--hover:hover,
+.tet-color__violet40--focus:focus {
+  color: var(--tc-violet-40);
+}
+
+.tet-color__violet40--border,
+.tet-color__violet40--border-hover:hover,
+.tet-color__violet40--border-focus:focus {
+  border-color: var(--tc-violet-40);
+}
+
+.tet-color__violet40--background,
+.tet-color__violet40--background-hover:hover,
+.tet-color__violet40--background-focus:focus {
+  background-color: var(--tc-violet-40);
+}
+
+.tet-color__violet30,
+.tet-color__violet30--hover:hover,
+.tet-color__violet30--focus:focus {
+  color: var(--tc-violet-30);
+}
+
+.tet-color__violet30--border,
+.tet-color__violet30--border-hover:hover,
+.tet-color__violet30--border-focus:focus {
+  border-color: var(--tc-violet-30);
+}
+
+.tet-color__violet30--background,
+.tet-color__violet30--background-hover:hover,
+.tet-color__violet30--background-focus:focus {
+  background-color: var(--tc-violet-30);
+}
+
+.tet-color__violet20,
+.tet-color__violet20--hover:hover,
+.tet-color__violet20--focus:focus {
+  color: var(--tc-violet-20);
+}
+
+.tet-color__violet20--border,
+.tet-color__violet20--border-hover:hover,
+.tet-color__violet20--border-focus:focus {
+  border-color: var(--tc-violet-20);
+}
+
+.tet-color__violet20--background,
+.tet-color__violet20--background-hover:hover,
+.tet-color__violet20--background-focus:focus {
+  background-color: var(--tc-violet-20);
+}
+
+.tet-color__violet10,
+.tet-color__violet10--hover:hover,
+.tet-color__violet10--focus:focus {
+  color: var(--tc-violet-10);
+}
+
+.tet-color__violet10--border,
+.tet-color__violet10--border-hover:hover,
+.tet-color__violet10--border-focus:focus {
+  border-color: var(--tc-violet-10);
+}
+
+.tet-color__violet10--background,
+.tet-color__violet10--background-hover:hover,
+.tet-color__violet10--background-focus:focus {
+  background-color: var(--tc-violet-10);
+}
+
+.tet-color__violet00,
+.tet-color__violet00--hover:hover,
+.tet-color__violet00--focus:focus {
+  color: var(--tc-violet-00);
+}
+
+.tet-color__violet00--border,
+.tet-color__violet00--border-hover:hover,
+.tet-color__violet00--border-focus:focus {
+  border-color: var(--tc-violet-00);
+}
+
+.tet-color__violet00--background,
+.tet-color__violet00--background-hover:hover,
+.tet-color__violet00--background-focus:focus {
+  background-color: var(--tc-violet-00);
+}
+
+.tet-color__grey110,
+.tet-color__grey110--hover:hover,
+.tet-color__grey110--focus:focus {
+  color: var(--tc-grey-110);
+}
+
+.tet-color__grey110--border,
+.tet-color__grey110--border-hover:hover,
+.tet-color__grey110--border-focus:focus {
+  border-color: var(--tc-grey-110);
+}
+
+.tet-color__grey110--background,
+.tet-color__grey110--background-hover:hover,
+.tet-color__grey110--background-focus:focus {
+  background-color: var(--tc-grey-110);
+}
+
+.tet-color__grey100,
+.tet-color__grey100--hover:hover,
+.tet-color__grey100--focus:focus {
+  color: var(--tc-grey-100);
+}
+
+.tet-color__grey100--border,
+.tet-color__grey100--border-hover:hover,
+.tet-color__grey100--border-focus:focus {
+  border-color: var(--tc-grey-100);
+}
+
+.tet-color__grey100--background,
+.tet-color__grey100--background-hover:hover,
+.tet-color__grey100--background-focus:focus {
+  background-color: var(--tc-grey-100);
+}
+
+.tet-color__grey90,
+.tet-color__grey90--hover:hover,
+.tet-color__grey90--focus:focus {
+  color: var(--tc-grey-90);
+}
+
+.tet-color__grey90--border,
+.tet-color__grey90--border-hover:hover,
+.tet-color__grey90--border-focus:focus {
+  border-color: var(--tc-grey-90);
+}
+
+.tet-color__grey90--background,
+.tet-color__grey90--background-hover:hover,
+.tet-color__grey90--background-focus:focus {
+  background-color: var(--tc-grey-90);
+}
+
+.tet-color__grey80,
+.tet-color__grey80--hover:hover,
+.tet-color__grey80--focus:focus {
+  color: var(--tc-grey-80);
+}
+
+.tet-color__grey80--border,
+.tet-color__grey80--border-hover:hover,
+.tet-color__grey80--border-focus:focus {
+  border-color: var(--tc-grey-80);
+}
+
+.tet-color__grey80--background,
+.tet-color__grey80--background-hover:hover,
+.tet-color__grey80--background-focus:focus {
+  background-color: var(--tc-grey-80);
+}
+
+.tet-color__grey70,
+.tet-color__grey70--hover:hover,
+.tet-color__grey70--focus:focus {
+  color: var(--tc-grey-70);
+}
+
+.tet-color__grey70--border,
+.tet-color__grey70--border-hover:hover,
+.tet-color__grey70--border-focus:focus {
+  border-color: var(--tc-grey-70);
+}
+
+.tet-color__grey70--background,
+.tet-color__grey70--background-hover:hover,
+.tet-color__grey70--background-focus:focus {
+  background-color: var(--tc-grey-70);
+}
+
+.tet-color__grey60,
+.tet-color__grey60--hover:hover,
+.tet-color__grey60--focus:focus {
+  color: var(--tc-grey-60);
+}
+
+.tet-color__grey60--border,
+.tet-color__grey60--border-hover:hover,
+.tet-color__grey60--border-focus:focus {
+  border-color: var(--tc-grey-60);
+}
+
+.tet-color__grey60--background,
+.tet-color__grey60--background-hover:hover,
+.tet-color__grey60--background-focus:focus {
+  background-color: var(--tc-grey-60);
+}
+
+.tet-color__grey50,
+.tet-color__grey50--hover:hover,
+.tet-color__grey50--focus:focus {
+  color: var(--tc-grey-50);
+}
+
+.tet-color__grey50--border,
+.tet-color__grey50--border-hover:hover,
+.tet-color__grey50--border-focus:focus {
+  border-color: var(--tc-grey-50);
+}
+
+.tet-color__grey50--background,
+.tet-color__grey50--background-hover:hover,
+.tet-color__grey50--background-focus:focus {
+  background-color: var(--tc-grey-50);
+}
+
+.tet-color__grey40,
+.tet-color__grey40--hover:hover,
+.tet-color__grey40--focus:focus {
+  color: var(--tc-grey-40);
+}
+
+.tet-color__grey40--border,
+.tet-color__grey40--border-hover:hover,
+.tet-color__grey40--border-focus:focus {
+  border-color: var(--tc-grey-40);
+}
+
+.tet-color__grey40--background,
+.tet-color__grey40--background-hover:hover,
+.tet-color__grey40--background-focus:focus {
+  background-color: var(--tc-grey-40);
+}
+
+.tet-color__grey30,
+.tet-color__grey30--hover:hover,
+.tet-color__grey30--focus:focus {
+  color: var(--tc-grey-30);
+}
+
+.tet-color__grey30--border,
+.tet-color__grey30--border-hover:hover,
+.tet-color__grey30--border-focus:focus {
+  border-color: var(--tc-grey-30);
+}
+
+.tet-color__grey30--background,
+.tet-color__grey30--background-hover:hover,
+.tet-color__grey30--background-focus:focus {
+  background-color: var(--tc-grey-30);
+}
+
+.tet-color__grey20,
+.tet-color__grey20--hover:hover,
+.tet-color__grey20--focus:focus {
+  color: var(--tc-grey-20);
+}
+
+.tet-color__grey20--border,
+.tet-color__grey20--border-hover:hover,
+.tet-color__grey20--border-focus:focus {
+  border-color: var(--tc-grey-20);
+}
+
+.tet-color__grey20--background,
+.tet-color__grey20--background-hover:hover,
+.tet-color__grey20--background-focus:focus {
+  background-color: var(--tc-grey-20);
+}
+
+.tet-color__grey10,
+.tet-color__grey10--hover:hover,
+.tet-color__grey10--focus:focus {
+  color: var(--tc-grey-10);
+}
+
+.tet-color__grey10--border,
+.tet-color__grey10--border-hover:hover,
+.tet-color__grey10--border-focus:focus {
+  border-color: var(--tc-grey-10);
+}
+
+.tet-color__grey10--background,
+.tet-color__grey10--background-hover:hover,
+.tet-color__grey10--background-focus:focus {
+  background-color: var(--tc-grey-10);
+}
+
+.tet-color__grey00,
+.tet-color__grey00--hover:hover,
+.tet-color__grey00--focus:focus {
+  color: var(--tc-grey-00);
+}
+
+.tet-color__grey00--border,
+.tet-color__grey00--border-hover:hover,
+.tet-color__grey00--border-focus:focus {
+  border-color: var(--tc-grey-00);
+}
+
+.tet-color__grey00--background,
+.tet-color__grey00--background-hover:hover,
+.tet-color__grey00--background-focus:focus {
+  background-color: var(--tc-grey-00);
+}
+
+.tet-color__purple,
+.tet-color__purple--hover:hover,
+.tet-color__purple--focus:focus {
+  color: var(--tc-violet-40);
+}
+
+.tet-color__purple--border,
+.tet-color__purple--border-hover:hover,
+.tet-color__purple--border-focus:focus {
+  border-color: var(--tc-violet-40);
+}
+
+.tet-color__purple--background,
+.tet-color__purple--background-hover:hover,
+.tet-color__purple--background-focus:focus {
+  background-color: var(--tc-violet-40);
+}
+
+.tet-color__black,
+.tet-color__black--hover:hover,
+.tet-color__black--focus:focus {
+  color: var(--tc-foundation-black);
+}
+
+.tet-color__black--border,
+.tet-color__black--border-hover:hover,
+.tet-color__black--border-focus:focus {
+  border-color: var(--tc-foundation-black);
+}
+
+.tet-color__black--background,
+.tet-color__black--background-hover:hover,
+.tet-color__black--background-focus:focus {
+  background-color: var(--tc-foundation-black);
+}
+
+.tet-color__white,
+.tet-color__white--hover:hover,
+.tet-color__white--focus:focus {
+  color: var(--tc-foundation-white);
+}
+
+.tet-color__white--border,
+.tet-color__white--border-hover:hover,
+.tet-color__white--border-focus:focus {
+  border-color: var(--tc-foundation-white);
+}
+
+.tet-color__white--background,
+.tet-color__white--background-hover:hover,
+.tet-color__white--background-focus:focus {
+  background-color: var(--tc-foundation-white);
+}
+
+.dark .tet-color__blue,
+.dark .tet-color__blue--hover:hover,
+.dark .tet-color__blue--focus:focus {
+  color: var(--tc-blue-40-dark);
+}
+
+.dark .tet-color__blue--border,
+.dark .tet-color__blue--border-hover:hover,
+.dark .tet-color__blue--border-focus:focus {
+  border-color: var(--tc-blue-40-dark);
+}
+
+.dark .tet-color__blue--background,
+.dark .tet-color__blue--background-hover:hover,
+.dark .tet-color__blue--background-focus:focus {
+  background-color: var(--tc-blue-40-dark);
+}
+
+.dark .tet-color__blue80,
+.dark .tet-color__blue80--hover:hover,
+.dark .tet-color__blue80--focus:focus {
+  color: var(--tc-blue-80-dark);
+}
+
+.dark .tet-color__blue80--border,
+.dark .tet-color__blue80--border-hover:hover,
+.dark .tet-color__blue80--border-focus:focus {
+  border-color: var(--tc-blue-80-dark);
+}
+
+.dark .tet-color__blue80--background,
+.dark .tet-color__blue80--background-hover:hover,
+.dark .tet-color__blue80--background-focus:focus {
+  background-color: var(--tc-blue-80-dark);
+}
+
+.dark .tet-color__blue70,
+.dark .tet-color__blue70--hover:hover,
+.dark .tet-color__blue70--focus:focus {
+  color: var(--tc-blue-70-dark);
+}
+
+.dark .tet-color__blue70--border,
+.dark .tet-color__blue70--border-hover:hover,
+.dark .tet-color__blue70--border-focus:focus {
+  border-color: var(--tc-blue-70-dark);
+}
+
+.dark .tet-color__blue70--background,
+.dark .tet-color__blue70--background-hover:hover,
+.dark .tet-color__blue70--background-focus:focus {
+  background-color: var(--tc-blue-70-dark);
+}
+
+.dark .tet-color__blue60,
+.dark .tet-color__blue60--hover:hover,
+.dark .tet-color__blue60--focus:focus {
+  color: var(--tc-blue-60-dark);
+}
+
+.dark .tet-color__blue60--border,
+.dark .tet-color__blue60--border-hover:hover,
+.dark .tet-color__blue60--border-focus:focus {
+  border-color: var(--tc-blue-60-dark);
+}
+
+.dark .tet-color__blue60--background,
+.dark .tet-color__blue60--background-hover:hover,
+.dark .tet-color__blue60--background-focus:focus {
+  background-color: var(--tc-blue-60-dark);
+}
+
+.dark .tet-color__blue50,
+.dark .tet-color__blue50--hover:hover,
+.dark .tet-color__blue50--focus:focus {
+  color: var(--tc-blue-50-dark);
+}
+
+.dark .tet-color__blue50--border,
+.dark .tet-color__blue50--border-hover:hover,
+.dark .tet-color__blue50--border-focus:focus {
+  border-color: var(--tc-blue-50-dark);
+}
+
+.dark .tet-color__blue50--background,
+.dark .tet-color__blue50--background-hover:hover,
+.dark .tet-color__blue50--background-focus:focus {
+  background-color: var(--tc-blue-50-dark);
+}
+
+.dark .tet-color__blue40,
+.dark .tet-color__blue40--hover:hover,
+.dark .tet-color__blue40--focus:focus {
+  color: var(--tc-blue-40-dark);
+}
+
+.dark .tet-color__blue40--border,
+.dark .tet-color__blue40--border-hover:hover,
+.dark .tet-color__blue40--border-focus:focus {
+  border-color: var(--tc-blue-40-dark);
+}
+
+.dark .tet-color__blue40--background,
+.dark .tet-color__blue40--background-hover:hover,
+.dark .tet-color__blue40--background-focus:focus {
+  background-color: var(--tc-blue-40-dark);
+}
+
+.dark .tet-color__blue30,
+.dark .tet-color__blue30--hover:hover,
+.dark .tet-color__blue30--focus:focus {
+  color: var(--tc-blue-30-dark);
+}
+
+.dark .tet-color__blue30--border,
+.dark .tet-color__blue30--border-hover:hover,
+.dark .tet-color__blue30--border-focus:focus {
+  border-color: var(--tc-blue-30-dark);
+}
+
+.dark .tet-color__blue30--background,
+.dark .tet-color__blue30--background-hover:hover,
+.dark .tet-color__blue30--background-focus:focus {
+  background-color: var(--tc-blue-30-dark);
+}
+
+.dark .tet-color__blue20,
+.dark .tet-color__blue20--hover:hover,
+.dark .tet-color__blue20--focus:focus {
+  color: var(--tc-blue-20-dark);
+}
+
+.dark .tet-color__blue20--border,
+.dark .tet-color__blue20--border-hover:hover,
+.dark .tet-color__blue20--border-focus:focus {
+  border-color: var(--tc-blue-20-dark);
+}
+
+.dark .tet-color__blue20--background,
+.dark .tet-color__blue20--background-hover:hover,
+.dark .tet-color__blue20--background-focus:focus {
+  background-color: var(--tc-blue-20-dark);
+}
+
+.dark .tet-color__blue10,
+.dark .tet-color__blue10--hover:hover,
+.dark .tet-color__blue10--focus:focus {
+  color: var(--tc-blue-10-dark);
+}
+
+.dark .tet-color__blue10--border,
+.dark .tet-color__blue10--border-hover:hover,
+.dark .tet-color__blue10--border-focus:focus {
+  border-color: var(--tc-blue-10-dark);
+}
+
+.dark .tet-color__blue10--background,
+.dark .tet-color__blue10--background-hover:hover,
+.dark .tet-color__blue10--background-focus:focus {
+  background-color: var(--tc-blue-10-dark);
+}
+
+.dark .tet-color__blue00,
+.dark .tet-color__blue00--hover:hover,
+.dark .tet-color__blue00--focus:focus {
+  color: var(--tc-blue-00-dark);
+}
+
+.dark .tet-color__blue00--border,
+.dark .tet-color__blue00--border-hover:hover,
+.dark .tet-color__blue00--border-focus:focus {
+  border-color: var(--tc-blue-00-dark);
+}
+
+.dark .tet-color__blue00--background,
+.dark .tet-color__blue00--background-hover:hover,
+.dark .tet-color__blue00--background-focus:focus {
+  background-color: var(--tc-blue-00-dark);
+}
+
+.dark .tet-color__blue80dark,
+.dark .tet-color__blue80dark--hover:hover,
+.dark .tet-color__blue80dark--focus:focus {
+  color: var(--tc-blue-80-dark);
+}
+
+.dark .tet-color__blue80dark--border,
+.dark .tet-color__blue80dark--border-hover:hover,
+.dark .tet-color__blue80dark--border-focus:focus {
+  border-color: var(--tc-blue-80-dark);
+}
+
+.dark .tet-color__blue80dark--background,
+.dark .tet-color__blue80dark--background-hover:hover,
+.dark .tet-color__blue80dark--background-focus:focus {
+  background-color: var(--tc-blue-80-dark);
+}
+
+.dark .tet-color__blue70dark,
+.dark .tet-color__blue70dark--hover:hover,
+.dark .tet-color__blue70dark--focus:focus {
+  color: var(--tc-blue-70-dark);
+}
+
+.dark .tet-color__blue70dark--border,
+.dark .tet-color__blue70dark--border-hover:hover,
+.dark .tet-color__blue70dark--border-focus:focus {
+  border-color: var(--tc-blue-70-dark);
+}
+
+.dark .tet-color__blue70dark--background,
+.dark .tet-color__blue70dark--background-hover:hover,
+.dark .tet-color__blue70dark--background-focus:focus {
+  background-color: var(--tc-blue-70-dark);
+}
+
+.dark .tet-color__blue60dark,
+.dark .tet-color__blue60dark--hover:hover,
+.dark .tet-color__blue60dark--focus:focus {
+  color: var(--tc-blue-60-dark);
+}
+
+.dark .tet-color__blue60dark--border,
+.dark .tet-color__blue60dark--border-hover:hover,
+.dark .tet-color__blue60dark--border-focus:focus {
+  border-color: var(--tc-blue-60-dark);
+}
+
+.dark .tet-color__blue60dark--background,
+.dark .tet-color__blue60dark--background-hover:hover,
+.dark .tet-color__blue60dark--background-focus:focus {
+  background-color: var(--tc-blue-60-dark);
+}
+
+.dark .tet-color__blue50dark,
+.dark .tet-color__blue50dark--hover:hover,
+.dark .tet-color__blue50dark--focus:focus {
+  color: var(--tc-blue-50-dark);
+}
+
+.dark .tet-color__blue50dark--border,
+.dark .tet-color__blue50dark--border-hover:hover,
+.dark .tet-color__blue50dark--border-focus:focus {
+  border-color: var(--tc-blue-50-dark);
+}
+
+.dark .tet-color__blue50dark--background,
+.dark .tet-color__blue50dark--background-hover:hover,
+.dark .tet-color__blue50dark--background-focus:focus {
+  background-color: var(--tc-blue-50-dark);
+}
+
+.dark .tet-color__blue40dark,
+.dark .tet-color__blue40dark--hover:hover,
+.dark .tet-color__blue40dark--focus:focus {
+  color: var(--tc-blue-40-dark);
+}
+
+.dark .tet-color__blue40dark--border,
+.dark .tet-color__blue40dark--border-hover:hover,
+.dark .tet-color__blue40dark--border-focus:focus {
+  border-color: var(--tc-blue-40-dark);
+}
+
+.dark .tet-color__blue40dark--background,
+.dark .tet-color__blue40dark--background-hover:hover,
+.dark .tet-color__blue40dark--background-focus:focus {
+  background-color: var(--tc-blue-40-dark);
+}
+
+.dark .tet-color__blue10dark,
+.dark .tet-color__blue10dark--hover:hover,
+.dark .tet-color__blue10dark--focus:focus {
+  color: var(--tc-blue-10-dark);
+}
+
+.dark .tet-color__blue10dark--border,
+.dark .tet-color__blue10dark--border-hover:hover,
+.dark .tet-color__blue10dark--border-focus:focus {
+  border-color: var(--tc-blue-10-dark);
+}
+
+.dark .tet-color__blue10dark--background,
+.dark .tet-color__blue10dark--background-hover:hover,
+.dark .tet-color__blue10dark--background-focus:focus {
+  background-color: var(--tc-blue-10-dark);
+}
+
+.dark .tet-color__green,
+.dark .tet-color__green--hover:hover,
+.dark .tet-color__green--focus:focus {
+  color: var(--tc-green-40-dark);
+}
+
+.dark .tet-color__green--border,
+.dark .tet-color__green--border-hover:hover,
+.dark .tet-color__green--border-focus:focus {
+  border-color: var(--tc-green-40-dark);
+}
+
+.dark .tet-color__green--background,
+.dark .tet-color__green--background-hover:hover,
+.dark .tet-color__green--background-focus:focus {
+  background-color: var(--tc-green-40-dark);
+}
+
+.dark .tet-color__green80,
+.dark .tet-color__green80--hover:hover,
+.dark .tet-color__green80--focus:focus {
+  color: var(--tc-green-80-dark);
+}
+
+.dark .tet-color__green80--border,
+.dark .tet-color__green80--border-hover:hover,
+.dark .tet-color__green80--border-focus:focus {
+  border-color: var(--tc-green-80-dark);
+}
+
+.dark .tet-color__green80--background,
+.dark .tet-color__green80--background-hover:hover,
+.dark .tet-color__green80--background-focus:focus {
+  background-color: var(--tc-green-80-dark);
+}
+
+.dark .tet-color__green70,
+.dark .tet-color__green70--hover:hover,
+.dark .tet-color__green70--focus:focus {
+  color: var(--tc-green-70-dark);
+}
+
+.dark .tet-color__green70--border,
+.dark .tet-color__green70--border-hover:hover,
+.dark .tet-color__green70--border-focus:focus {
+  border-color: var(--tc-green-70-dark);
+}
+
+.dark .tet-color__green70--background,
+.dark .tet-color__green70--background-hover:hover,
+.dark .tet-color__green70--background-focus:focus {
+  background-color: var(--tc-green-70-dark);
+}
+
+.dark .tet-color__green60,
+.dark .tet-color__green60--hover:hover,
+.dark .tet-color__green60--focus:focus {
+  color: var(--tc-green-60-dark);
+}
+
+.dark .tet-color__green60--border,
+.dark .tet-color__green60--border-hover:hover,
+.dark .tet-color__green60--border-focus:focus {
+  border-color: var(--tc-green-60-dark);
+}
+
+.dark .tet-color__green60--background,
+.dark .tet-color__green60--background-hover:hover,
+.dark .tet-color__green60--background-focus:focus {
+  background-color: var(--tc-green-60-dark);
+}
+
+.dark .tet-color__green50,
+.dark .tet-color__green50--hover:hover,
+.dark .tet-color__green50--focus:focus {
+  color: var(--tc-green-50-dark);
+}
+
+.dark .tet-color__green50--border,
+.dark .tet-color__green50--border-hover:hover,
+.dark .tet-color__green50--border-focus:focus {
+  border-color: var(--tc-green-50-dark);
+}
+
+.dark .tet-color__green50--background,
+.dark .tet-color__green50--background-hover:hover,
+.dark .tet-color__green50--background-focus:focus {
+  background-color: var(--tc-green-50-dark);
+}
+
+.dark .tet-color__green40,
+.dark .tet-color__green40--hover:hover,
+.dark .tet-color__green40--focus:focus {
+  color: var(--tc-green-40-dark);
+}
+
+.dark .tet-color__green40--border,
+.dark .tet-color__green40--border-hover:hover,
+.dark .tet-color__green40--border-focus:focus {
+  border-color: var(--tc-green-40-dark);
+}
+
+.dark .tet-color__green40--background,
+.dark .tet-color__green40--background-hover:hover,
+.dark .tet-color__green40--background-focus:focus {
+  background-color: var(--tc-green-40-dark);
+}
+
+.dark .tet-color__green30,
+.dark .tet-color__green30--hover:hover,
+.dark .tet-color__green30--focus:focus {
+  color: var(--tc-green-30-dark);
+}
+
+.dark .tet-color__green30--border,
+.dark .tet-color__green30--border-hover:hover,
+.dark .tet-color__green30--border-focus:focus {
+  border-color: var(--tc-green-30-dark);
+}
+
+.dark .tet-color__green30--background,
+.dark .tet-color__green30--background-hover:hover,
+.dark .tet-color__green30--background-focus:focus {
+  background-color: var(--tc-green-30-dark);
+}
+
+.dark .tet-color__green20,
+.dark .tet-color__green20--hover:hover,
+.dark .tet-color__green20--focus:focus {
+  color: var(--tc-green-20-dark);
+}
+
+.dark .tet-color__green20--border,
+.dark .tet-color__green20--border-hover:hover,
+.dark .tet-color__green20--border-focus:focus {
+  border-color: var(--tc-green-20-dark);
+}
+
+.dark .tet-color__green20--background,
+.dark .tet-color__green20--background-hover:hover,
+.dark .tet-color__green20--background-focus:focus {
+  background-color: var(--tc-green-20-dark);
+}
+
+.dark .tet-color__green10,
+.dark .tet-color__green10--hover:hover,
+.dark .tet-color__green10--focus:focus {
+  color: var(--tc-green-10-dark);
+}
+
+.dark .tet-color__green10--border,
+.dark .tet-color__green10--border-hover:hover,
+.dark .tet-color__green10--border-focus:focus {
+  border-color: var(--tc-green-10-dark);
+}
+
+.dark .tet-color__green10--background,
+.dark .tet-color__green10--background-hover:hover,
+.dark .tet-color__green10--background-focus:focus {
+  background-color: var(--tc-green-10-dark);
+}
+
+.dark .tet-color__green00,
+.dark .tet-color__green00--hover:hover,
+.dark .tet-color__green00--focus:focus {
+  color: var(--tc-green-00-dark);
+}
+
+.dark .tet-color__green00--border,
+.dark .tet-color__green00--border-hover:hover,
+.dark .tet-color__green00--border-focus:focus {
+  border-color: var(--tc-green-00-dark);
+}
+
+.dark .tet-color__green00--background,
+.dark .tet-color__green00--background-hover:hover,
+.dark .tet-color__green00--background-focus:focus {
+  background-color: var(--tc-green-00-dark);
+}
+
+.dark .tet-color__green80dark,
+.dark .tet-color__green80dark--hover:hover,
+.dark .tet-color__green80dark--focus:focus {
+  color: var(--tc-green-80-dark);
+}
+
+.dark .tet-color__green80dark--border,
+.dark .tet-color__green80dark--border-hover:hover,
+.dark .tet-color__green80dark--border-focus:focus {
+  border-color: var(--tc-green-80-dark);
+}
+
+.dark .tet-color__green80dark--background,
+.dark .tet-color__green80dark--background-hover:hover,
+.dark .tet-color__green80dark--background-focus:focus {
+  background-color: var(--tc-green-80-dark);
+}
+
+.dark .tet-color__green70dark,
+.dark .tet-color__green70dark--hover:hover,
+.dark .tet-color__green70dark--focus:focus {
+  color: var(--tc-green-70-dark);
+}
+
+.dark .tet-color__green70dark--border,
+.dark .tet-color__green70dark--border-hover:hover,
+.dark .tet-color__green70dark--border-focus:focus {
+  border-color: var(--tc-green-70-dark);
+}
+
+.dark .tet-color__green70dark--background,
+.dark .tet-color__green70dark--background-hover:hover,
+.dark .tet-color__green70dark--background-focus:focus {
+  background-color: var(--tc-green-70-dark);
+}
+
+.dark .tet-color__green60dark,
+.dark .tet-color__green60dark--hover:hover,
+.dark .tet-color__green60dark--focus:focus {
+  color: var(--tc-green-60-dark);
+}
+
+.dark .tet-color__green60dark--border,
+.dark .tet-color__green60dark--border-hover:hover,
+.dark .tet-color__green60dark--border-focus:focus {
+  border-color: var(--tc-green-60-dark);
+}
+
+.dark .tet-color__green60dark--background,
+.dark .tet-color__green60dark--background-hover:hover,
+.dark .tet-color__green60dark--background-focus:focus {
+  background-color: var(--tc-green-60-dark);
+}
+
+.dark .tet-color__green50dark,
+.dark .tet-color__green50dark--hover:hover,
+.dark .tet-color__green50dark--focus:focus {
+  color: var(--tc-green-50-dark);
+}
+
+.dark .tet-color__green50dark--border,
+.dark .tet-color__green50dark--border-hover:hover,
+.dark .tet-color__green50dark--border-focus:focus {
+  border-color: var(--tc-green-50-dark);
+}
+
+.dark .tet-color__green50dark--background,
+.dark .tet-color__green50dark--background-hover:hover,
+.dark .tet-color__green50dark--background-focus:focus {
+  background-color: var(--tc-green-50-dark);
+}
+
+.dark .tet-color__green40dark,
+.dark .tet-color__green40dark--hover:hover,
+.dark .tet-color__green40dark--focus:focus {
+  color: var(--tc-green-40-dark);
+}
+
+.dark .tet-color__green40dark--border,
+.dark .tet-color__green40dark--border-hover:hover,
+.dark .tet-color__green40dark--border-focus:focus {
+  border-color: var(--tc-green-40-dark);
+}
+
+.dark .tet-color__green40dark--background,
+.dark .tet-color__green40dark--background-hover:hover,
+.dark .tet-color__green40dark--background-focus:focus {
+  background-color: var(--tc-green-40-dark);
+}
+
+.dark .tet-color__green10dark,
+.dark .tet-color__green10dark--hover:hover,
+.dark .tet-color__green10dark--focus:focus {
+  color: var(--tc-green-10-dark);
+}
+
+.dark .tet-color__green10dark--border,
+.dark .tet-color__green10dark--border-hover:hover,
+.dark .tet-color__green10dark--border-focus:focus {
+  border-color: var(--tc-green-10-dark);
+}
+
+.dark .tet-color__green10dark--background,
+.dark .tet-color__green10dark--background-hover:hover,
+.dark .tet-color__green10dark--background-focus:focus {
+  background-color: var(--tc-green-10-dark);
+}
+
+.dark .tet-color__yellow,
+.dark .tet-color__yellow--hover:hover,
+.dark .tet-color__yellow--focus:focus {
+  color: var(--tc-yellow-40-dark);
+}
+
+.dark .tet-color__yellow--border,
+.dark .tet-color__yellow--border-hover:hover,
+.dark .tet-color__yellow--border-focus:focus {
+  border-color: var(--tc-yellow-40-dark);
+}
+
+.dark .tet-color__yellow--background,
+.dark .tet-color__yellow--background-hover:hover,
+.dark .tet-color__yellow--background-focus:focus {
+  background-color: var(--tc-yellow-40-dark);
+}
+
+.dark .tet-color__yellow80,
+.dark .tet-color__yellow80--hover:hover,
+.dark .tet-color__yellow80--focus:focus {
+  color: var(--tc-yellow-80-dark);
+}
+
+.dark .tet-color__yellow80--border,
+.dark .tet-color__yellow80--border-hover:hover,
+.dark .tet-color__yellow80--border-focus:focus {
+  border-color: var(--tc-yellow-80-dark);
+}
+
+.dark .tet-color__yellow80--background,
+.dark .tet-color__yellow80--background-hover:hover,
+.dark .tet-color__yellow80--background-focus:focus {
+  background-color: var(--tc-yellow-80-dark);
+}
+
+.dark .tet-color__yellow70,
+.dark .tet-color__yellow70--hover:hover,
+.dark .tet-color__yellow70--focus:focus {
+  color: var(--tc-yellow-70-dark);
+}
+
+.dark .tet-color__yellow70--border,
+.dark .tet-color__yellow70--border-hover:hover,
+.dark .tet-color__yellow70--border-focus:focus {
+  border-color: var(--tc-yellow-70-dark);
+}
+
+.dark .tet-color__yellow70--background,
+.dark .tet-color__yellow70--background-hover:hover,
+.dark .tet-color__yellow70--background-focus:focus {
+  background-color: var(--tc-yellow-70-dark);
+}
+
+.dark .tet-color__yellow60,
+.dark .tet-color__yellow60--hover:hover,
+.dark .tet-color__yellow60--focus:focus {
+  color: var(--tc-yellow-60-dark);
+}
+
+.dark .tet-color__yellow60--border,
+.dark .tet-color__yellow60--border-hover:hover,
+.dark .tet-color__yellow60--border-focus:focus {
+  border-color: var(--tc-yellow-60-dark);
+}
+
+.dark .tet-color__yellow60--background,
+.dark .tet-color__yellow60--background-hover:hover,
+.dark .tet-color__yellow60--background-focus:focus {
+  background-color: var(--tc-yellow-60-dark);
+}
+
+.dark .tet-color__yellow50,
+.dark .tet-color__yellow50--hover:hover,
+.dark .tet-color__yellow50--focus:focus {
+  color: var(--tc-yellow-50-dark);
+}
+
+.dark .tet-color__yellow50--border,
+.dark .tet-color__yellow50--border-hover:hover,
+.dark .tet-color__yellow50--border-focus:focus {
+  border-color: var(--tc-yellow-50-dark);
+}
+
+.dark .tet-color__yellow50--background,
+.dark .tet-color__yellow50--background-hover:hover,
+.dark .tet-color__yellow50--background-focus:focus {
+  background-color: var(--tc-yellow-50-dark);
+}
+
+.dark .tet-color__yellow40,
+.dark .tet-color__yellow40--hover:hover,
+.dark .tet-color__yellow40--focus:focus {
+  color: var(--tc-yellow-40-dark);
+}
+
+.dark .tet-color__yellow40--border,
+.dark .tet-color__yellow40--border-hover:hover,
+.dark .tet-color__yellow40--border-focus:focus {
+  border-color: var(--tc-yellow-40-dark);
+}
+
+.dark .tet-color__yellow40--background,
+.dark .tet-color__yellow40--background-hover:hover,
+.dark .tet-color__yellow40--background-focus:focus {
+  background-color: var(--tc-yellow-40-dark);
+}
+
+.dark .tet-color__yellow30,
+.dark .tet-color__yellow30--hover:hover,
+.dark .tet-color__yellow30--focus:focus {
+  color: var(--tc-yellow-30-dark);
+}
+
+.dark .tet-color__yellow30--border,
+.dark .tet-color__yellow30--border-hover:hover,
+.dark .tet-color__yellow30--border-focus:focus {
+  border-color: var(--tc-yellow-30-dark);
+}
+
+.dark .tet-color__yellow30--background,
+.dark .tet-color__yellow30--background-hover:hover,
+.dark .tet-color__yellow30--background-focus:focus {
+  background-color: var(--tc-yellow-30-dark);
+}
+
+.dark .tet-color__yellow20,
+.dark .tet-color__yellow20--hover:hover,
+.dark .tet-color__yellow20--focus:focus {
+  color: var(--tc-yellow-20-dark);
+}
+
+.dark .tet-color__yellow20--border,
+.dark .tet-color__yellow20--border-hover:hover,
+.dark .tet-color__yellow20--border-focus:focus {
+  border-color: var(--tc-yellow-20-dark);
+}
+
+.dark .tet-color__yellow20--background,
+.dark .tet-color__yellow20--background-hover:hover,
+.dark .tet-color__yellow20--background-focus:focus {
+  background-color: var(--tc-yellow-20-dark);
+}
+
+.dark .tet-color__yellow10,
+.dark .tet-color__yellow10--hover:hover,
+.dark .tet-color__yellow10--focus:focus {
+  color: var(--tc-yellow-10-dark);
+}
+
+.dark .tet-color__yellow10--border,
+.dark .tet-color__yellow10--border-hover:hover,
+.dark .tet-color__yellow10--border-focus:focus {
+  border-color: var(--tc-yellow-10-dark);
+}
+
+.dark .tet-color__yellow10--background,
+.dark .tet-color__yellow10--background-hover:hover,
+.dark .tet-color__yellow10--background-focus:focus {
+  background-color: var(--tc-yellow-10-dark);
+}
+
+.dark .tet-color__yellow00,
+.dark .tet-color__yellow00--hover:hover,
+.dark .tet-color__yellow00--focus:focus {
+  color: var(--tc-yellow-00-dark);
+}
+
+.dark .tet-color__yellow00--border,
+.dark .tet-color__yellow00--border-hover:hover,
+.dark .tet-color__yellow00--border-focus:focus {
+  border-color: var(--tc-yellow-00-dark);
+}
+
+.dark .tet-color__yellow00--background,
+.dark .tet-color__yellow00--background-hover:hover,
+.dark .tet-color__yellow00--background-focus:focus {
+  background-color: var(--tc-yellow-00-dark);
+}
+
+.dark .tet-color__yellow80dark,
+.dark .tet-color__yellow80dark--hover:hover,
+.dark .tet-color__yellow80dark--focus:focus {
+  color: var(--tc-yellow-80-dark);
+}
+
+.dark .tet-color__yellow80dark--border,
+.dark .tet-color__yellow80dark--border-hover:hover,
+.dark .tet-color__yellow80dark--border-focus:focus {
+  border-color: var(--tc-yellow-80-dark);
+}
+
+.dark .tet-color__yellow80dark--background,
+.dark .tet-color__yellow80dark--background-hover:hover,
+.dark .tet-color__yellow80dark--background-focus:focus {
+  background-color: var(--tc-yellow-80-dark);
+}
+
+.dark .tet-color__yellow70dark,
+.dark .tet-color__yellow70dark--hover:hover,
+.dark .tet-color__yellow70dark--focus:focus {
+  color: var(--tc-yellow-70-dark);
+}
+
+.dark .tet-color__yellow70dark--border,
+.dark .tet-color__yellow70dark--border-hover:hover,
+.dark .tet-color__yellow70dark--border-focus:focus {
+  border-color: var(--tc-yellow-70-dark);
+}
+
+.dark .tet-color__yellow70dark--background,
+.dark .tet-color__yellow70dark--background-hover:hover,
+.dark .tet-color__yellow70dark--background-focus:focus {
+  background-color: var(--tc-yellow-70-dark);
+}
+
+.dark .tet-color__yellow60dark,
+.dark .tet-color__yellow60dark--hover:hover,
+.dark .tet-color__yellow60dark--focus:focus {
+  color: var(--tc-yellow-60-dark);
+}
+
+.dark .tet-color__yellow60dark--border,
+.dark .tet-color__yellow60dark--border-hover:hover,
+.dark .tet-color__yellow60dark--border-focus:focus {
+  border-color: var(--tc-yellow-60-dark);
+}
+
+.dark .tet-color__yellow60dark--background,
+.dark .tet-color__yellow60dark--background-hover:hover,
+.dark .tet-color__yellow60dark--background-focus:focus {
+  background-color: var(--tc-yellow-60-dark);
+}
+
+.dark .tet-color__yellow55dark,
+.dark .tet-color__yellow55dark--hover:hover,
+.dark .tet-color__yellow55dark--focus:focus {
+  color: var(--tc-yellow-50-dark);
+}
+
+.dark .tet-color__yellow55dark--border,
+.dark .tet-color__yellow55dark--border-hover:hover,
+.dark .tet-color__yellow55dark--border-focus:focus {
+  border-color: var(--tc-yellow-50-dark);
+}
+
+.dark .tet-color__yellow55dark--background,
+.dark .tet-color__yellow55dark--background-hover:hover,
+.dark .tet-color__yellow55dark--background-focus:focus {
+  background-color: var(--tc-yellow-50-dark);
+}
+
+.dark .tet-color__yellow50dark,
+.dark .tet-color__yellow50dark--hover:hover,
+.dark .tet-color__yellow50dark--focus:focus {
+  color: var(--tc-yellow-50-dark);
+}
+
+.dark .tet-color__yellow50dark--border,
+.dark .tet-color__yellow50dark--border-hover:hover,
+.dark .tet-color__yellow50dark--border-focus:focus {
+  border-color: var(--tc-yellow-50-dark);
+}
+
+.dark .tet-color__yellow50dark--background,
+.dark .tet-color__yellow50dark--background-hover:hover,
+.dark .tet-color__yellow50dark--background-focus:focus {
+  background-color: var(--tc-yellow-50-dark);
+}
+
+.dark .tet-color__yellow45dark,
+.dark .tet-color__yellow45dark--hover:hover,
+.dark .tet-color__yellow45dark--focus:focus {
+  color: var(--tc-yellow-40-dark);
+}
+
+.dark .tet-color__yellow45dark--border,
+.dark .tet-color__yellow45dark--border-hover:hover,
+.dark .tet-color__yellow45dark--border-focus:focus {
+  border-color: var(--tc-yellow-40-dark);
+}
+
+.dark .tet-color__yellow45dark--background,
+.dark .tet-color__yellow45dark--background-hover:hover,
+.dark .tet-color__yellow45dark--background-focus:focus {
+  background-color: var(--tc-yellow-40-dark);
+}
+
+.dark .tet-color__yellow40dark,
+.dark .tet-color__yellow40dark--hover:hover,
+.dark .tet-color__yellow40dark--focus:focus {
+  color: var(--tc-yellow-40-dark);
+}
+
+.dark .tet-color__yellow40dark--border,
+.dark .tet-color__yellow40dark--border-hover:hover,
+.dark .tet-color__yellow40dark--border-focus:focus {
+  border-color: var(--tc-yellow-40-dark);
+}
+
+.dark .tet-color__yellow40dark--background,
+.dark .tet-color__yellow40dark--background-hover:hover,
+.dark .tet-color__yellow40dark--background-focus:focus {
+  background-color: var(--tc-yellow-40-dark);
+}
+
+.dark .tet-color__yellow10dark,
+.dark .tet-color__yellow10dark--hover:hover,
+.dark .tet-color__yellow10dark--focus:focus {
+  color: var(--tc-yellow-10-dark);
+}
+
+.dark .tet-color__yellow10dark--border,
+.dark .tet-color__yellow10dark--border-hover:hover,
+.dark .tet-color__yellow10dark--border-focus:focus {
+  border-color: var(--tc-yellow-10-dark);
+}
+
+.dark .tet-color__yellow10dark--background,
+.dark .tet-color__yellow10dark--background-hover:hover,
+.dark .tet-color__yellow10dark--background-focus:focus {
+  background-color: var(--tc-yellow-10-dark);
+}
+
+.dark .tet-color__red,
+.dark .tet-color__red--hover:hover,
+.dark .tet-color__red--focus:focus {
+  color: var(--tc-red-40-dark);
+}
+
+.dark .tet-color__red--border,
+.dark .tet-color__red--border-hover:hover,
+.dark .tet-color__red--border-focus:focus {
+  border-color: var(--tc-red-40-dark);
+}
+
+.dark .tet-color__red--background,
+.dark .tet-color__red--background-hover:hover,
+.dark .tet-color__red--background-focus:focus {
+  background-color: var(--tc-red-40-dark);
+}
+
+.dark .tet-color__red80,
+.dark .tet-color__red80--hover:hover,
+.dark .tet-color__red80--focus:focus {
+  color: var(--tc-red-80-dark);
+}
+
+.dark .tet-color__red80--border,
+.dark .tet-color__red80--border-hover:hover,
+.dark .tet-color__red80--border-focus:focus {
+  border-color: var(--tc-red-80-dark);
+}
+
+.dark .tet-color__red80--background,
+.dark .tet-color__red80--background-hover:hover,
+.dark .tet-color__red80--background-focus:focus {
+  background-color: var(--tc-red-80-dark);
+}
+
+.dark .tet-color__red70,
+.dark .tet-color__red70--hover:hover,
+.dark .tet-color__red70--focus:focus {
+  color: var(--tc-red-70-dark);
+}
+
+.dark .tet-color__red70--border,
+.dark .tet-color__red70--border-hover:hover,
+.dark .tet-color__red70--border-focus:focus {
+  border-color: var(--tc-red-70-dark);
+}
+
+.dark .tet-color__red70--background,
+.dark .tet-color__red70--background-hover:hover,
+.dark .tet-color__red70--background-focus:focus {
+  background-color: var(--tc-red-70-dark);
+}
+
+.dark .tet-color__red60,
+.dark .tet-color__red60--hover:hover,
+.dark .tet-color__red60--focus:focus {
+  color: var(--tc-red-60-dark);
+}
+
+.dark .tet-color__red60--border,
+.dark .tet-color__red60--border-hover:hover,
+.dark .tet-color__red60--border-focus:focus {
+  border-color: var(--tc-red-60-dark);
+}
+
+.dark .tet-color__red60--background,
+.dark .tet-color__red60--background-hover:hover,
+.dark .tet-color__red60--background-focus:focus {
+  background-color: var(--tc-red-60-dark);
+}
+
+.dark .tet-color__red50,
+.dark .tet-color__red50--hover:hover,
+.dark .tet-color__red50--focus:focus {
+  color: var(--tc-red-50-dark);
+}
+
+.dark .tet-color__red50--border,
+.dark .tet-color__red50--border-hover:hover,
+.dark .tet-color__red50--border-focus:focus {
+  border-color: var(--tc-red-50-dark);
+}
+
+.dark .tet-color__red50--background,
+.dark .tet-color__red50--background-hover:hover,
+.dark .tet-color__red50--background-focus:focus {
+  background-color: var(--tc-red-50-dark);
+}
+
+.dark .tet-color__red40,
+.dark .tet-color__red40--hover:hover,
+.dark .tet-color__red40--focus:focus {
+  color: var(--tc-red-40-dark);
+}
+
+.dark .tet-color__red40--border,
+.dark .tet-color__red40--border-hover:hover,
+.dark .tet-color__red40--border-focus:focus {
+  border-color: var(--tc-red-40-dark);
+}
+
+.dark .tet-color__red40--background,
+.dark .tet-color__red40--background-hover:hover,
+.dark .tet-color__red40--background-focus:focus {
+  background-color: var(--tc-red-40-dark);
+}
+
+.dark .tet-color__red30,
+.dark .tet-color__red30--hover:hover,
+.dark .tet-color__red30--focus:focus {
+  color: var(--tc-red-30-dark);
+}
+
+.dark .tet-color__red30--border,
+.dark .tet-color__red30--border-hover:hover,
+.dark .tet-color__red30--border-focus:focus {
+  border-color: var(--tc-red-30-dark);
+}
+
+.dark .tet-color__red30--background,
+.dark .tet-color__red30--background-hover:hover,
+.dark .tet-color__red30--background-focus:focus {
+  background-color: var(--tc-red-30-dark);
+}
+
+.dark .tet-color__red20,
+.dark .tet-color__red20--hover:hover,
+.dark .tet-color__red20--focus:focus {
+  color: var(--tc-red-20-dark);
+}
+
+.dark .tet-color__red20--border,
+.dark .tet-color__red20--border-hover:hover,
+.dark .tet-color__red20--border-focus:focus {
+  border-color: var(--tc-red-20-dark);
+}
+
+.dark .tet-color__red20--background,
+.dark .tet-color__red20--background-hover:hover,
+.dark .tet-color__red20--background-focus:focus {
+  background-color: var(--tc-red-20-dark);
+}
+
+.dark .tet-color__red10,
+.dark .tet-color__red10--hover:hover,
+.dark .tet-color__red10--focus:focus {
+  color: var(--tc-red-10-dark);
+}
+
+.dark .tet-color__red10--border,
+.dark .tet-color__red10--border-hover:hover,
+.dark .tet-color__red10--border-focus:focus {
+  border-color: var(--tc-red-10-dark);
+}
+
+.dark .tet-color__red10--background,
+.dark .tet-color__red10--background-hover:hover,
+.dark .tet-color__red10--background-focus:focus {
+  background-color: var(--tc-red-10-dark);
+}
+
+.dark .tet-color__red00,
+.dark .tet-color__red00--hover:hover,
+.dark .tet-color__red00--focus:focus {
+  color: var(--tc-red-00-dark);
+}
+
+.dark .tet-color__red00--border,
+.dark .tet-color__red00--border-hover:hover,
+.dark .tet-color__red00--border-focus:focus {
+  border-color: var(--tc-red-00-dark);
+}
+
+.dark .tet-color__red00--background,
+.dark .tet-color__red00--background-hover:hover,
+.dark .tet-color__red00--background-focus:focus {
+  background-color: var(--tc-red-00-dark);
+}
+
+.dark .tet-color__red80dark,
+.dark .tet-color__red80dark--hover:hover,
+.dark .tet-color__red80dark--focus:focus {
+  color: var(--tc-red-80-dark);
+}
+
+.dark .tet-color__red80dark--border,
+.dark .tet-color__red80dark--border-hover:hover,
+.dark .tet-color__red80dark--border-focus:focus {
+  border-color: var(--tc-red-80-dark);
+}
+
+.dark .tet-color__red80dark--background,
+.dark .tet-color__red80dark--background-hover:hover,
+.dark .tet-color__red80dark--background-focus:focus {
+  background-color: var(--tc-red-80-dark);
+}
+
+.dark .tet-color__red70dark,
+.dark .tet-color__red70dark--hover:hover,
+.dark .tet-color__red70dark--focus:focus {
+  color: var(--tc-red-70-dark);
+}
+
+.dark .tet-color__red70dark--border,
+.dark .tet-color__red70dark--border-hover:hover,
+.dark .tet-color__red70dark--border-focus:focus {
+  border-color: var(--tc-red-70-dark);
+}
+
+.dark .tet-color__red70dark--background,
+.dark .tet-color__red70dark--background-hover:hover,
+.dark .tet-color__red70dark--background-focus:focus {
+  background-color: var(--tc-red-70-dark);
+}
+
+.dark .tet-color__red65dark,
+.dark .tet-color__red65dark--hover:hover,
+.dark .tet-color__red65dark--focus:focus {
+  color: var(--tc-red-60-dark);
+}
+
+.dark .tet-color__red65dark--border,
+.dark .tet-color__red65dark--border-hover:hover,
+.dark .tet-color__red65dark--border-focus:focus {
+  border-color: var(--tc-red-60-dark);
+}
+
+.dark .tet-color__red65dark--background,
+.dark .tet-color__red65dark--background-hover:hover,
+.dark .tet-color__red65dark--background-focus:focus {
+  background-color: var(--tc-red-60-dark);
+}
+
+.dark .tet-color__red60dark,
+.dark .tet-color__red60dark--hover:hover,
+.dark .tet-color__red60dark--focus:focus {
+  color: var(--tc-red-60-dark);
+}
+
+.dark .tet-color__red60dark--border,
+.dark .tet-color__red60dark--border-hover:hover,
+.dark .tet-color__red60dark--border-focus:focus {
+  border-color: var(--tc-red-60-dark);
+}
+
+.dark .tet-color__red60dark--background,
+.dark .tet-color__red60dark--background-hover:hover,
+.dark .tet-color__red60dark--background-focus:focus {
+  background-color: var(--tc-red-60-dark);
+}
+
+.dark .tet-color__red55dark,
+.dark .tet-color__red55dark--hover:hover,
+.dark .tet-color__red55dark--focus:focus {
+  color: var(--tc-red-50-dark);
+}
+
+.dark .tet-color__red55dark--border,
+.dark .tet-color__red55dark--border-hover:hover,
+.dark .tet-color__red55dark--border-focus:focus {
+  border-color: var(--tc-red-50-dark);
+}
+
+.dark .tet-color__red55dark--background,
+.dark .tet-color__red55dark--background-hover:hover,
+.dark .tet-color__red55dark--background-focus:focus {
+  background-color: var(--tc-red-50-dark);
+}
+
+.dark .tet-color__red50dark,
+.dark .tet-color__red50dark--hover:hover,
+.dark .tet-color__red50dark--focus:focus {
+  color: var(--tc-red-50-dark);
+}
+
+.dark .tet-color__red50dark--border,
+.dark .tet-color__red50dark--border-hover:hover,
+.dark .tet-color__red50dark--border-focus:focus {
+  border-color: var(--tc-red-50-dark);
+}
+
+.dark .tet-color__red50dark--background,
+.dark .tet-color__red50dark--background-hover:hover,
+.dark .tet-color__red50dark--background-focus:focus {
+  background-color: var(--tc-red-50-dark);
+}
+
+.dark .tet-color__red40dark,
+.dark .tet-color__red40dark--hover:hover,
+.dark .tet-color__red40dark--focus:focus {
+  color: var(--tc-red-40-dark);
+}
+
+.dark .tet-color__red40dark--border,
+.dark .tet-color__red40dark--border-hover:hover,
+.dark .tet-color__red40dark--border-focus:focus {
+  border-color: var(--tc-red-40-dark);
+}
+
+.dark .tet-color__red40dark--background,
+.dark .tet-color__red40dark--background-hover:hover,
+.dark .tet-color__red40dark--background-focus:focus {
+  background-color: var(--tc-red-40-dark);
+}
+
+.dark .tet-color__red10dark,
+.dark .tet-color__red10dark--hover:hover,
+.dark .tet-color__red10dark--focus:focus {
+  color: var(--tc-red-10-dark);
+}
+
+.dark .tet-color__red10dark--border,
+.dark .tet-color__red10dark--border-hover:hover,
+.dark .tet-color__red10dark--border-focus:focus {
+  border-color: var(--tc-red-10-dark);
+}
+
+.dark .tet-color__red10dark--background,
+.dark .tet-color__red10dark--background-hover:hover,
+.dark .tet-color__red10dark--background-focus:focus {
+  background-color: var(--tc-red-10-dark);
+}
+
+.dark .tet-color__violet,
+.dark .tet-color__violet--hover:hover,
+.dark .tet-color__violet--focus:focus {
+  color: var(--tc-violet-40-dark);
+}
+
+.dark .tet-color__violet--border,
+.dark .tet-color__violet--border-hover:hover,
+.dark .tet-color__violet--border-focus:focus {
+  border-color: var(--tc-violet-40-dark);
+}
+
+.dark .tet-color__violet--background,
+.dark .tet-color__violet--background-hover:hover,
+.dark .tet-color__violet--background-focus:focus {
+  background-color: var(--tc-violet-40-dark);
+}
+
+.dark .tet-color__violet80,
+.dark .tet-color__violet80--hover:hover,
+.dark .tet-color__violet80--focus:focus {
+  color: var(--tc-violet-80-dark);
+}
+
+.dark .tet-color__violet80--border,
+.dark .tet-color__violet80--border-hover:hover,
+.dark .tet-color__violet80--border-focus:focus {
+  border-color: var(--tc-violet-80-dark);
+}
+
+.dark .tet-color__violet80--background,
+.dark .tet-color__violet80--background-hover:hover,
+.dark .tet-color__violet80--background-focus:focus {
+  background-color: var(--tc-violet-80-dark);
+}
+
+.dark .tet-color__violet70,
+.dark .tet-color__violet70--hover:hover,
+.dark .tet-color__violet70--focus:focus {
+  color: var(--tc-violet-70-dark);
+}
+
+.dark .tet-color__violet70--border,
+.dark .tet-color__violet70--border-hover:hover,
+.dark .tet-color__violet70--border-focus:focus {
+  border-color: var(--tc-violet-70-dark);
+}
+
+.dark .tet-color__violet70--background,
+.dark .tet-color__violet70--background-hover:hover,
+.dark .tet-color__violet70--background-focus:focus {
+  background-color: var(--tc-violet-70-dark);
+}
+
+.dark .tet-color__violet60,
+.dark .tet-color__violet60--hover:hover,
+.dark .tet-color__violet60--focus:focus {
+  color: var(--tc-violet-60-dark);
+}
+
+.dark .tet-color__violet60--border,
+.dark .tet-color__violet60--border-hover:hover,
+.dark .tet-color__violet60--border-focus:focus {
+  border-color: var(--tc-violet-60-dark);
+}
+
+.dark .tet-color__violet60--background,
+.dark .tet-color__violet60--background-hover:hover,
+.dark .tet-color__violet60--background-focus:focus {
+  background-color: var(--tc-violet-60-dark);
+}
+
+.dark .tet-color__violet50,
+.dark .tet-color__violet50--hover:hover,
+.dark .tet-color__violet50--focus:focus {
+  color: var(--tc-violet-50-dark);
+}
+
+.dark .tet-color__violet50--border,
+.dark .tet-color__violet50--border-hover:hover,
+.dark .tet-color__violet50--border-focus:focus {
+  border-color: var(--tc-violet-50-dark);
+}
+
+.dark .tet-color__violet50--background,
+.dark .tet-color__violet50--background-hover:hover,
+.dark .tet-color__violet50--background-focus:focus {
+  background-color: var(--tc-violet-50-dark);
+}
+
+.dark .tet-color__violet40,
+.dark .tet-color__violet40--hover:hover,
+.dark .tet-color__violet40--focus:focus {
+  color: var(--tc-violet-40-dark);
+}
+
+.dark .tet-color__violet40--border,
+.dark .tet-color__violet40--border-hover:hover,
+.dark .tet-color__violet40--border-focus:focus {
+  border-color: var(--tc-violet-40-dark);
+}
+
+.dark .tet-color__violet40--background,
+.dark .tet-color__violet40--background-hover:hover,
+.dark .tet-color__violet40--background-focus:focus {
+  background-color: var(--tc-violet-40-dark);
+}
+
+.dark .tet-color__violet30,
+.dark .tet-color__violet30--hover:hover,
+.dark .tet-color__violet30--focus:focus {
+  color: var(--tc-violet-30-dark);
+}
+
+.dark .tet-color__violet30--border,
+.dark .tet-color__violet30--border-hover:hover,
+.dark .tet-color__violet30--border-focus:focus {
+  border-color: var(--tc-violet-30-dark);
+}
+
+.dark .tet-color__violet30--background,
+.dark .tet-color__violet30--background-hover:hover,
+.dark .tet-color__violet30--background-focus:focus {
+  background-color: var(--tc-violet-30-dark);
+}
+
+.dark .tet-color__violet20,
+.dark .tet-color__violet20--hover:hover,
+.dark .tet-color__violet20--focus:focus {
+  color: var(--tc-violet-20-dark);
+}
+
+.dark .tet-color__violet20--border,
+.dark .tet-color__violet20--border-hover:hover,
+.dark .tet-color__violet20--border-focus:focus {
+  border-color: var(--tc-violet-20-dark);
+}
+
+.dark .tet-color__violet20--background,
+.dark .tet-color__violet20--background-hover:hover,
+.dark .tet-color__violet20--background-focus:focus {
+  background-color: var(--tc-violet-20-dark);
+}
+
+.dark .tet-color__violet10,
+.dark .tet-color__violet10--hover:hover,
+.dark .tet-color__violet10--focus:focus {
+  color: var(--tc-violet-10-dark);
+}
+
+.dark .tet-color__violet10--border,
+.dark .tet-color__violet10--border-hover:hover,
+.dark .tet-color__violet10--border-focus:focus {
+  border-color: var(--tc-violet-10-dark);
+}
+
+.dark .tet-color__violet10--background,
+.dark .tet-color__violet10--background-hover:hover,
+.dark .tet-color__violet10--background-focus:focus {
+  background-color: var(--tc-violet-10-dark);
+}
+
+.dark .tet-color__violet00,
+.dark .tet-color__violet00--hover:hover,
+.dark .tet-color__violet00--focus:focus {
+  color: var(--tc-violet-00-dark);
+}
+
+.dark .tet-color__violet00--border,
+.dark .tet-color__violet00--border-hover:hover,
+.dark .tet-color__violet00--border-focus:focus {
+  border-color: var(--tc-violet-00-dark);
+}
+
+.dark .tet-color__violet00--background,
+.dark .tet-color__violet00--background-hover:hover,
+.dark .tet-color__violet00--background-focus:focus {
+  background-color: var(--tc-violet-00-dark);
+}
+
+.dark .tet-color__grey110,
+.dark .tet-color__grey110--hover:hover,
+.dark .tet-color__grey110--focus:focus {
+  color: var(--tc-grey-110-dark);
+}
+
+.dark .tet-color__grey110--border,
+.dark .tet-color__grey110--border-hover:hover,
+.dark .tet-color__grey110--border-focus:focus {
+  border-color: var(--tc-grey-110-dark);
+}
+
+.dark .tet-color__grey110--background,
+.dark .tet-color__grey110--background-hover:hover,
+.dark .tet-color__grey110--background-focus:focus {
+  background-color: var(--tc-grey-110-dark);
+}
+
+.dark .tet-color__grey100,
+.dark .tet-color__grey100--hover:hover,
+.dark .tet-color__grey100--focus:focus {
+  color: var(--tc-grey-100-dark);
+}
+
+.dark .tet-color__grey100--border,
+.dark .tet-color__grey100--border-hover:hover,
+.dark .tet-color__grey100--border-focus:focus {
+  border-color: var(--tc-grey-100-dark);
+}
+
+.dark .tet-color__grey100--background,
+.dark .tet-color__grey100--background-hover:hover,
+.dark .tet-color__grey100--background-focus:focus {
+  background-color: var(--tc-grey-100-dark);
+}
+
+.dark .tet-color__grey90,
+.dark .tet-color__grey90--hover:hover,
+.dark .tet-color__grey90--focus:focus {
+  color: var(--tc-grey-90-dark);
+}
+
+.dark .tet-color__grey90--border,
+.dark .tet-color__grey90--border-hover:hover,
+.dark .tet-color__grey90--border-focus:focus {
+  border-color: var(--tc-grey-90-dark);
+}
+
+.dark .tet-color__grey90--background,
+.dark .tet-color__grey90--background-hover:hover,
+.dark .tet-color__grey90--background-focus:focus {
+  background-color: var(--tc-grey-90-dark);
+}
+
+.dark .tet-color__grey80,
+.dark .tet-color__grey80--hover:hover,
+.dark .tet-color__grey80--focus:focus {
+  color: var(--tc-grey-80-dark);
+}
+
+.dark .tet-color__grey80--border,
+.dark .tet-color__grey80--border-hover:hover,
+.dark .tet-color__grey80--border-focus:focus {
+  border-color: var(--tc-grey-80-dark);
+}
+
+.dark .tet-color__grey80--background,
+.dark .tet-color__grey80--background-hover:hover,
+.dark .tet-color__grey80--background-focus:focus {
+  background-color: var(--tc-grey-80-dark);
+}
+
+.dark .tet-color__grey70,
+.dark .tet-color__grey70--hover:hover,
+.dark .tet-color__grey70--focus:focus {
+  color: var(--tc-grey-70-dark);
+}
+
+.dark .tet-color__grey70--border,
+.dark .tet-color__grey70--border-hover:hover,
+.dark .tet-color__grey70--border-focus:focus {
+  border-color: var(--tc-grey-70-dark);
+}
+
+.dark .tet-color__grey70--background,
+.dark .tet-color__grey70--background-hover:hover,
+.dark .tet-color__grey70--background-focus:focus {
+  background-color: var(--tc-grey-70-dark);
+}
+
+.dark .tet-color__grey60,
+.dark .tet-color__grey60--hover:hover,
+.dark .tet-color__grey60--focus:focus {
+  color: var(--tc-grey-60-dark);
+}
+
+.dark .tet-color__grey60--border,
+.dark .tet-color__grey60--border-hover:hover,
+.dark .tet-color__grey60--border-focus:focus {
+  border-color: var(--tc-grey-60-dark);
+}
+
+.dark .tet-color__grey60--background,
+.dark .tet-color__grey60--background-hover:hover,
+.dark .tet-color__grey60--background-focus:focus {
+  background-color: var(--tc-grey-60-dark);
+}
+
+.dark .tet-color__grey50,
+.dark .tet-color__grey50--hover:hover,
+.dark .tet-color__grey50--focus:focus {
+  color: var(--tc-grey-50-dark);
+}
+
+.dark .tet-color__grey50--border,
+.dark .tet-color__grey50--border-hover:hover,
+.dark .tet-color__grey50--border-focus:focus {
+  border-color: var(--tc-grey-50-dark);
+}
+
+.dark .tet-color__grey50--background,
+.dark .tet-color__grey50--background-hover:hover,
+.dark .tet-color__grey50--background-focus:focus {
+  background-color: var(--tc-grey-50-dark);
+}
+
+.dark .tet-color__grey40,
+.dark .tet-color__grey40--hover:hover,
+.dark .tet-color__grey40--focus:focus {
+  color: var(--tc-grey-40-dark);
+}
+
+.dark .tet-color__grey40--border,
+.dark .tet-color__grey40--border-hover:hover,
+.dark .tet-color__grey40--border-focus:focus {
+  border-color: var(--tc-grey-40-dark);
+}
+
+.dark .tet-color__grey40--background,
+.dark .tet-color__grey40--background-hover:hover,
+.dark .tet-color__grey40--background-focus:focus {
+  background-color: var(--tc-grey-40-dark);
+}
+
+.dark .tet-color__grey30,
+.dark .tet-color__grey30--hover:hover,
+.dark .tet-color__grey30--focus:focus {
+  color: var(--tc-grey-30-dark);
+}
+
+.dark .tet-color__grey30--border,
+.dark .tet-color__grey30--border-hover:hover,
+.dark .tet-color__grey30--border-focus:focus {
+  border-color: var(--tc-grey-30-dark);
+}
+
+.dark .tet-color__grey30--background,
+.dark .tet-color__grey30--background-hover:hover,
+.dark .tet-color__grey30--background-focus:focus {
+  background-color: var(--tc-grey-30-dark);
+}
+
+.dark .tet-color__grey20,
+.dark .tet-color__grey20--hover:hover,
+.dark .tet-color__grey20--focus:focus {
+  color: var(--tc-grey-20-dark);
+}
+
+.dark .tet-color__grey20--border,
+.dark .tet-color__grey20--border-hover:hover,
+.dark .tet-color__grey20--border-focus:focus {
+  border-color: var(--tc-grey-20-dark);
+}
+
+.dark .tet-color__grey20--background,
+.dark .tet-color__grey20--background-hover:hover,
+.dark .tet-color__grey20--background-focus:focus {
+  background-color: var(--tc-grey-20-dark);
+}
+
+.dark .tet-color__grey10,
+.dark .tet-color__grey10--hover:hover,
+.dark .tet-color__grey10--focus:focus {
+  color: var(--tc-grey-10-dark);
+}
+
+.dark .tet-color__grey10--border,
+.dark .tet-color__grey10--border-hover:hover,
+.dark .tet-color__grey10--border-focus:focus {
+  border-color: var(--tc-grey-10-dark);
+}
+
+.dark .tet-color__grey10--background,
+.dark .tet-color__grey10--background-hover:hover,
+.dark .tet-color__grey10--background-focus:focus {
+  background-color: var(--tc-grey-10-dark);
+}
+
+.dark .tet-color__grey00,
+.dark .tet-color__grey00--hover:hover,
+.dark .tet-color__grey00--focus:focus {
+  color: var(--tc-grey-00-dark);
+}
+
+.dark .tet-color__grey00--border,
+.dark .tet-color__grey00--border-hover:hover,
+.dark .tet-color__grey00--border-focus:focus {
+  border-color: var(--tc-grey-00-dark);
+}
+
+.dark .tet-color__grey00--background,
+.dark .tet-color__grey00--background-hover:hover,
+.dark .tet-color__grey00--background-focus:focus {
+  background-color: var(--tc-grey-00-dark);
+}
+
+.dark .tet-color__purple,
+.dark .tet-color__purple--hover:hover,
+.dark .tet-color__purple--focus:focus {
+  color: var(--tc-violet-40-dark);
+}
+
+.dark .tet-color__purple--border,
+.dark .tet-color__purple--border-hover:hover,
+.dark .tet-color__purple--border-focus:focus {
+  border-color: var(--tc-violet-40-dark);
+}
+
+.dark .tet-color__purple--background,
+.dark .tet-color__purple--background-hover:hover,
+.dark .tet-color__purple--background-focus:focus {
+  background-color: var(--tc-violet-40-dark);
+}
+
+.dark .tet-color__black,
+.dark .tet-color__black--hover:hover,
+.dark .tet-color__black--focus:focus {
+  color: var(--tc-foundation-black-dark);
+}
+
+.dark .tet-color__black--border,
+.dark .tet-color__black--border-hover:hover,
+.dark .tet-color__black--border-focus:focus {
+  border-color: var(--tc-foundation-black-dark);
+}
+
+.dark .tet-color__black--background,
+.dark .tet-color__black--background-hover:hover,
+.dark .tet-color__black--background-focus:focus {
+  background-color: var(--tc-foundation-black-dark);
+}
+
+.dark .tet-color__white,
+.dark .tet-color__white--hover:hover,
+.dark .tet-color__white--focus:focus {
+  color: var(--tc-foundation-white-dark);
+}
+
+.dark .tet-color__white--border,
+.dark .tet-color__white--border-hover:hover,
+.dark .tet-color__white--border-focus:focus {
+  border-color: var(--tc-foundation-white-dark);
+}
+
+.dark .tet-color__white--background,
+.dark .tet-color__white--background-hover:hover,
+.dark .tet-color__white--background-focus:focus {
+  background-color: var(--tc-foundation-white-dark);
+}
+
+.container.show-variables .container-section .section .section-color {
+  padding: 0.5rem 0.25rem 1.5rem 0.75rem;
+}
+.container.show-variables .container-section .section .section-color .color-name {
+  display: initial;
+}
+
+.d-none {
+  display: none;
+}
+
+.variable-container .container-section {
+  justify-content: center;
+}
+.variable-container .container-section .variable-wrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+.variable-container .container-section .variable-wrapper .variable-name {
+  align-self: center;
+  padding: 3.5rem 0;
+}
+.variable-container .container-section .variable-part {
+  position: relative;
+  font-size: 1.75rem;
+  align-self: center;
+}
+.variable-container .container-section .variable-part:after {
+  content: "";
+  position: absolute;
+}
+.variable-container .container-section .variable-part.variable:after {
+  text-align: center;
+  width: 90%;
+  height: 1.25rem;
+  bottom: -1.5625rem;
+  left: 5%;
+  font-size: 1rem;
+}
+.variable-container .container-section .variable-part.variable.variable-color:after {
+  border-top: 0.125rem solid var(--tc-blue-30);
+  content: "krāsa";
+}
+.variable-container .container-section .variable-part.variable.variable-type:after {
+  border-top: 0.125rem solid var(--tc-blue-30);
+  content: "tips";
+}
+.variable-container .container-section .variable-part.variable.variable-state:after {
+  border-top: 0.125rem solid var(--tc-blue-30);
+  content: "statuss";
+}
+
+.container .container-title {
+  background: var(--tc-layer-tertiary);
+  padding: 1rem 0;
+  margin: 0.25rem 0;
+  text-align: center;
+  font-size: 1.5rem;
+  border-radius: 1.5rem;
+}
+.container .container-title.main {
+  font-weight: 600;
+}
+.container .container-section {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  border: 0.0625rem solid var(--tc-border-tertiary);
+  border-radius: 2rem;
+  padding: 1rem;
+}
+.container .container-section.container-example {
+  flex-direction: column;
+}
+.container .container-section.container-example .subsection-title {
+  font-weight: 500;
+  font-size: 1rem;
+  margin: 1rem 0;
+}
+.container .container-section.container-example .example-element {
+  display: inline-flex;
+  font-weight: 500;
+}
+.container .container-section.container-example .example-element--hover {
+  cursor: pointer;
+}
+.container .container-section.container-example .example-element:focus-visible {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.125rem;
+  border-radius: 0.125rem;
+}
+.container .container-section.container-example .border-example {
+  border-width: 0.0625rem;
+  border-style: solid;
+  padding: 0.125rem;
+}
+.container .container-section.container-example .variable-example {
+  font-size: 0.88rem;
+  line-height: 1.5em;
+  padding: 0.5rem;
+  background-color: var(--tc-blue-00);
+}
+.container .container-section.container-example > span {
+  margin-bottom: 1rem;
+}
+.container .container-section .section {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  flex-grow: 1;
+  position: relative;
+  padding-top: 1.5rem;
+  padding-bottom: 1rem;
+  max-width: 18rem;
+}
+.container .container-section .section__title {
+  width: 100%;
+  text-align: center;
+  font-weight: 500;
+  border-left: 0.125rem solid var(--tc-border-primary);
+  background: var(--tc-layer-tertiary);
+}
+.container .container-section .section .section-title {
+  text-align: center;
+  font-weight: bold;
+}
+.container .container-section .section .section-color {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  width: 12rem;
+  line-height: 3rem;
+  padding: 0.5rem;
+  gap: 1rem;
+  white-space: nowrap;
+}
+.container .container-section .section .section-color .color-name {
+  display: none;
+  white-space: nowrap;
+  position: absolute;
+  bottom: 0;
+  line-height: 0.875rem;
+  color: var(--tc-text-secondary);
+}
+.container .container-section .section .section-color .color {
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  border: 0.0625rem dashed var(--tc-border-quaternary);
 }