An explanation of the CSS available in Tecton for customizing your application's theme.
Tecton gives you access to a bunch of CSS right out of the box. This includes:
However, often times you will want to customize these to your liking. This is where CSS Custom Properties (AKA CSS Variables) come in to play.
For example, here is the list of CSS Variables that make up the default theme:
:root {
--const-stoplight-info: #0079c1;
--const-stoplight-success: #0e8a00;
--const-stoplight-warning: #f0b400;
--const-stoplight-alert: #c30000;
--const-global-focus: 0 0 0 2px #33b4ff;
--app-white: #ffffff;
--app-black: #000000;
--app-font-size: 14px;
--app-font-size-small: 12px;
--app-scale-0x: 0px;
--app-scale-1x: 5px;
--app-scale-2x: 10px;
--app-scale-3x: 15px;
--app-scale-4x: 20px;
--app-scale-5x: 25px;
--app-scale-6x: 30px;
--app-scale-7x: 35px;
--app-scale-8x: 40px;
--app-scale-9x: 45px;
--app-scale-10x: 50px;
--app-scale-11x: 55px;
--app-scale-12x: 60px;
--app-shadow-1: 0 2px 4px rgba(0, 0, 0, 0.3);
--app-shadow-2: 0 3px 6px rgba(0, 0, 0, 0.3);
--app-shadow-3: 0 4px 12px rgba(0, 0, 0, 0.3);
--app-border-radius-1: 3px;
--app-border-radius-2: 6px;
--app-border-radius-3: 12px;
--app-tween-1: 0.2s ease;
--app-tween-2: 0.4s ease;
--app-tween-3: 0.8s ease;
--app-duration-1: 0.2s;
--app-duration-2: 0.4s;
--app-duration-3: 0.8s;
--app-disabled-opacity: 0.4;
--t-base: #ffffff;
--t-text: #4d4d4d;
--t-textA: rgba(77, 77, 77, 0.77);
--t-primary-text: #ffffff;
--t-secondary-text: #141414;
--t-tertiary-text: #141414;
--t-gray-1: #0d0d0d;
--t-gray-2: #1a1a1a;
--t-gray-3: #262626;
--t-gray-4: #333333;
--t-gray-5: #404040;
--t-gray-6: #4d4d4d;
--t-gray-7: #666666;
--t-gray-8: gray;
--t-gray-9: #999999;
--t-gray-10: #b3b3b3;
--t-gray-11: #cccccc;
--t-gray-12: #d9d9d9;
--t-gray-13: #e6e6e6;
--t-gray-14: #f2f2f2;
--t-base-a0: rgba(255, 255, 255, 0);
--t-base-a1: rgba(255, 255, 255, 0.25);
--t-base-a2: rgba(255, 255, 255, 0.5);
--t-base-a3: rgba(255, 255, 255, 0.75);
--t-top-a0: rgba(13, 13, 13, 0);
--t-top-a1: rgba(13, 13, 13, 0.35);
--t-top-a2: rgba(13, 13, 13, 0.6);
--t-top-a3: rgba(13, 13, 13, 0.85);
--t-primary: #0079c1;
--t-primary-l1: #008de1;
--t-primary-d1: #006dae;
--t-primary-l2: #01a0ff;
--t-primary-d2: #00619a;
--t-primary-l3: #21acff;
--t-primary-d3: #005587;
--t-primary-l4: #41b8ff;
--t-primary-d4: #004974;
--t-primary-l5: #61c4ff;
--t-primary-d5: #003d61;
--t-secondary: #b3c2cc;
--t-secondary-l1: #bac9d1;
--t-secondary-d1: #9cb0bd;
--t-secondary-l2: #c2cfd6;
--t-secondary-d2: #859ead;
--t-secondary-l3: #c9d5db;
--t-secondary-d3: #6e8c9e;
--t-secondary-l4: #d1dbe0;
--t-secondary-d4: #5c798a;
--t-secondary-l5: #d9e1e6;
--t-secondary-d5: #4d6473;
--t-tertiary: #e8f5fc;
--t-tertiary-l1: #ebf6fc;
--t-tertiary-d1: #bee1f6;
--t-tertiary-l2: #edf7fd;
--t-tertiary-d2: #93cef1;
--t-tertiary-l3: #eff8fd;
--t-tertiary-d3: #68baeb;
--t-tertiary-l4: #f1f9fd;
--t-tertiary-d4: #3da7e6;
--t-tertiary-l5: #f4fafe;
--t-tertiary-d5: #1c91d6;
--t-accent-1-l1: #e77474;
--t-accent-1: #e05252;
--t-accent-1-d1: #b62020;
--t-accent-2-l1: #e7ad74;
--t-accent-2: #e09952;
--t-accent-2-d1: #b66b20;
--t-accent-3-l1: #e7e774;
--t-accent-3: #e0e052;
--t-accent-3-d1: #b6b620;
--t-accent-4-l1: #ade774;
--t-accent-4: #99e052;
--t-accent-4-d1: #6bb620;
--t-accent-5-l1: #74e774;
--t-accent-5: #52e052;
--t-accent-5-d1: #20b620;
--t-accent-6-l1: #74e7ad;
--t-accent-6: #52e099;
--t-accent-6-d1: #20b66b;
--t-accent-7-l1: #74e7e7;
--t-accent-7: #52e0e0;
--t-accent-7-d1: #20b6b6;
--t-accent-8-l1: #74ade7;
--t-accent-8: #5299e0;
--t-accent-8-d1: #206bb6;
--t-accent-9-l1: #7474e7;
--t-accent-9: #5252e0;
--t-accent-9-d1: #2020b6;
--t-accent-10-l1: #ad74e7;
--t-accent-10: #9952e0;
--t-accent-10-d1: #6b20b6;
--t-accent-11-l1: #e774e7;
--t-accent-11: #e052e0;
--t-accent-11-d1: #b620b6;
--t-accent-12-l1: #e774ad;
--t-accent-12: #e05299;
--t-accent-12-d1: #b6206b;
}You can easily customize these by doing something like this:
body {
--t-primary: #990000;
}