fylgja/fylgja-tokens.css

The modular CSS framework. Powered via CSS components

:root{--ratio-box: 1;--ratio-landscape: 4/3;--ratio-portrait: 3/4;--ratio-widescreen: 16/9;--ratio-superwide: 21/9;--ratio-ultrawide: 18/5;--ratio-golden: 1.618/1}:root{--gray-0: #f8f9fa;--gray-1: #f1f3f5;--gray-2: #e9ecef;--gray-3: #dee2e6;--gray-4: #ced4da;--gray-5: #adb5bd;--gray-6: #868e96;--gray-7: #495057;--gray-8: #343a40;--gray-9: #212529;--blue-gray-0: #eceff1;--blue-gray-1: #cfd8dc;--blue-gray-2: #b0bec5;--blue-gray-3: #90a4ae;--blue-gray-4: #78909c;--blue-gray-5: #607d8b;--blue-gray-6: #546e7a;--blue-gray-7: #455a64;--blue-gray-8: #37474f;--blue-gray-9: #263238;--red-0: #fff5f5;--red-1: #ffe3e3;--red-2: #ffc9c9;--red-3: #ffa8a8;--red-4: #ff8787;--red-5: #ff6b6b;--red-6: #fa5252;--red-7: #f03e3e;--red-8: #e03131;--red-9: #c92a2a;--pink-0: #fff0f6;--pink-1: #ffdeeb;--pink-2: #fcc2d7;--pink-3: #faa2c1;--pink-4: #f783ac;--pink-5: #f06595;--pink-6: #e64980;--pink-7: #d6336c;--pink-8: #c2255c;--pink-9: #a61e4d;--purple-0: #f8f0fc;--purple-1: #f3d9fa;--purple-2: #eebefa;--purple-3: #e599f7;--purple-4: #da77f2;--purple-5: #cc5de8;--purple-6: #be4bdb;--purple-7: #ae3ec9;--purple-8: #9c36b5;--purple-9: #862e9c;--violet-0: #f3f0ff;--violet-1: #e5dbff;--violet-2: #d0bfff;--violet-3: #b197fc;--violet-4: #9775fa;--violet-5: #845ef7;--violet-6: #7950f2;--violet-7: #7048e8;--violet-8: #6741d9;--violet-9: #5f3dc4;--indigo-0: #edf2ff;--indigo-1: #dbe4ff;--indigo-2: #bac8ff;--indigo-3: #91a7ff;--indigo-4: #748ffc;--indigo-5: #5c7cfa;--indigo-6: #4c6ef5;--indigo-7: #4263eb;--indigo-8: #3b5bdb;--indigo-9: #364fc7;--blue-0: #e7f5ff;--blue-1: #d0ebff;--blue-2: #a5d8ff;--blue-3: #74c0fc;--blue-4: #4dabf7;--blue-5: #339af0;--blue-6: #228be6;--blue-7: #1c7ed6;--blue-8: #1971c2;--blue-9: #1864ab;--cyan-0: #e3fafc;--cyan-1: #c5f6fa;--cyan-2: #99e9f2;--cyan-3: #66d9e8;--cyan-4: #3bc9db;--cyan-5: #22b8cf;--cyan-6: #15aabf;--cyan-7: #1098ad;--cyan-8: #0c8599;--cyan-9: #0b7285;--teal-0: #e6fcf5;--teal-1: #c3fae8;--teal-2: #96f2d7;--teal-3: #63e6be;--teal-4: #38d9a9;--teal-5: #20c997;--teal-6: #12b886;--teal-7: #0ca678;--teal-8: #099268;--teal-9: #087f5b;--green-0: #ebfbee;--green-1: #d3f9d8;--green-2: #b2f2bb;--green-3: #8ce99a;--green-4: #69db7c;--green-5: #51cf66;--green-6: #40c057;--green-7: #37b24d;--green-8: #2f9e44;--green-9: #2b8a3e;--lime-0: #f4fce3;--lime-1: #e9fac8;--lime-2: #d8f5a2;--lime-3: #c0eb75;--lime-4: #a9e34b;--lime-5: #94d82d;--lime-6: #82c91e;--lime-7: #74b816;--lime-8: #66a80f;--lime-9: #5c940d;--yellow-0: #fff9db;--yellow-1: #fff3bf;--yellow-2: #ffec99;--yellow-3: #ffe066;--yellow-4: #ffd43b;--yellow-5: #fcc419;--yellow-6: #fab005;--yellow-7: #f59f00;--yellow-8: #f08c00;--yellow-9: #e67700;--orange-0: #fff4e6;--orange-1: #ffe8cc;--orange-2: #ffd8a8;--orange-3: #ffc078;--orange-4: #ffa94d;--orange-5: #ff922b;--orange-6: #fd7e14;--orange-7: #f76707;--orange-8: #e8590c;--orange-9: #d9480f}:root{--font-size-1: 0.875rem;--font-size-2: 1rem;--font-size-3: 1.125rem;--font-size-4: 1.25rem;--font-size-5: 1.5rem;--font-size-6: 1.875rem;--font-size-7: 2rem;--font-size-8: 2.25rem;--font-size-9: 3rem;--font-size-fluid-1: clamp(0.875rem, 1.5vw, 1rem);--font-size-fluid-2: clamp(1rem, 2vw, 1.125rem);--font-size-fluid-3: clamp(1.25rem, 2vw, 1.5rem);--font-size-fluid-4: clamp(1.5rem, 3vw, 1.875rem);--font-size-fluid-5: clamp(2rem, 4vw, 3rem);--line-height-1: 1.1;--line-height-2: 1.25;--line-height-3: 1.375;--line-height-4: 1.5;--line-height-5: 1.8}:root{--border-size-1: 0.125rem;--border-size-2: 0.25rem;--border-size-3: 0.375rem;--border-size-4: 0.5rem;--border-size-5: 0.75rem;--border-size-6: 1rem;--radius-1: 0.125rem;--radius-2: 0.25rem;--radius-3: 0.375rem;--radius-4: 0.5rem;--radius-5: 0.75rem;--radius-6: 1rem;--radius-full: 1e5px;--radius-fluid-1: clamp(0.125rem, 0.5rem, 0.5rem);--radius-fluid-2: clamp(0.25rem, 0.75rem, 0.75rem);--radius-fluid-3: clamp(0.375rem, 1rem, 1rem);--radius-fluid-4: clamp(2rem, 4vw, 4rem);--radius-fluid-5: clamp(3rem, 6vw, 5rem);--radius-fluid-6: clamp(4rem, 6vw, 6rem);--radius-blob-1: 30% 70% 70% 30% / 53% 30% 70% 47%;--radius-blob-2: 53% 47% 34% 66% / 63% 46% 54% 37%;--radius-blob-3: 37% 63% 56% 44% / 49% 56% 44% 51%;--radius-blob-4: 63% 37% 37% 63% / 43% 37% 63% 57%;--radius-blob-5: 49% 51% 48% 52% / 57% 44% 56% 43%;--radius-conditional-1: clamp(0px, calc(100vw - 100%) * 1e5, 0.125rem);--radius-conditional-2: clamp(0px, calc(100vw - 100%) * 1e5, 0.25rem);--radius-conditional-3: clamp(0px, calc(100vw - 100%) * 1e5, 0.375rem);--radius-conditional-4: clamp(0px, calc(100vw - 100%) * 1e5, 0.5rem);--radius-conditional-5: clamp(0px, calc(100vw - 100%) * 1e5, 0.75rem);--radius-conditional-6: clamp(0px, calc(100vw - 100%) * 1e5, 1rem)}:root{--ease-1: cubic-bezier(0.25, 0.1, 0.1, 1);--ease-2: cubic-bezier(0.25, 0.1, 0.2, 1);--ease-3: cubic-bezier(0.25, 0.1, 0.3, 1);--ease-4: cubic-bezier(0.25, 0.1, 0.4, 1);--ease-5: cubic-bezier(0.25, 0.1, 0.5, 1);--ease-in-1: cubic-bezier(0.3, 0, 1, 1);--ease-in-2: cubic-bezier(0.5, 0, 1, 1);--ease-in-3: cubic-bezier(0.7, 0, 1, 1);--ease-in-4: cubic-bezier(0.9, 0, 1, 1);--ease-in-5: cubic-bezier(1, 0, 1, 1);--ease-out-1: cubic-bezier(0, 0, 0.7, 1);--ease-out-2: cubic-bezier(0, 0, 0.5, 1);--ease-out-3: cubic-bezier(0, 0, 0.3, 1);--ease-out-4: cubic-bezier(0, 0, 0.1, 1);--ease-out-5: cubic-bezier(0, 0, 0, 1);--ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);--ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1);--ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);--ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1);--ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1);--ease-elastic-in-1: cubic-bezier(0.5, 0.25, 0.75, -0.25);--ease-elastic-in-2: cubic-bezier(0.5, 0, 0.75, -0.25);--ease-elastic-in-3: cubic-bezier(0.5, -0.25, 0.75, -0.25);--ease-elastic-in-4: cubic-bezier(0.5, -0.5, 0.75, -0.25);--ease-elastic-in-5: cubic-bezier(0.5, -0.75, 0.75, -0.25);--ease-elastic-out-1: cubic-bezier(0.5, 0.75, 0.75, 1.25);--ease-elastic-out-2: cubic-bezier(0.5, 1, 0.75, 1.25);--ease-elastic-out-3: cubic-bezier(0.5, 1.25, 0.75, 1.25);--ease-elastic-out-4: cubic-bezier(0.5, 1.5, 0.75, 1.25);--ease-elastic-out-5: cubic-bezier(0.5, 1.75, 0.75, 1.25);--ease-elastic-in-out-1: cubic-bezier(0.5, -0.1, 0.1, 1.5);--ease-elastic-in-out-2: cubic-bezier(0.5, -0.3, 0.1, 1.5);--ease-elastic-in-out-3: cubic-bezier(0.5, -0.5, 0.1, 1.5);--ease-elastic-in-out-4: cubic-bezier(0.5, -0.7, 0.1, 1.5);--ease-elastic-in-out-5: cubic-bezier(0.5, -0.9, 0.1, 1.5)}@custom-media --xs: (width >= 420px);@custom-media --xsMax: (width < 420px);@custom-media --sm: (width >= 640px);@custom-media --smMax: (width < 640px);@custom-media --md: (width >= 768px);@custom-media --mdMax: (width < 768px);@custom-media --lg: (width >= 1024px);@custom-media --lgMax: (width < 1024px);@custom-media --xl: (width >= 1440px);@custom-media --xlMax: (width < 1440px);@custom-media --xxl: (width >= 2200px);@custom-media --xxlMax: (width < 2200px);@custom-media --hdColor: (dynamic-range: high);@custom-media --touch: (hover: none) and (pointer: coarse);@custom-media --stylus: (hover: none) and (pointer: fine);@custom-media --pointer: (hover) and (pointer: coarse);@custom-media --mouse: (hover) and (pointer: fine);@custom-media --schemeDark: (prefers-color-scheme: dark);@custom-media --schemeLight: (prefers-color-scheme: light);@custom-media --motionSafe: (prefers-reduced-motion: no-preference);@custom-media --motionReduce: (prefers-reduced-motion: reduce);@custom-media --opacitySafe: (prefers-reduced-transparency: no-preference);@custom-media --opacityReduce: (prefers-reduced-transparency: reduce);@custom-media --dataSafe: (prefers-reduced-data: no-preference);@custom-media --dataReduce: (prefers-reduced-data: reduce);@custom-media --contrastMore: (prefers-contrast: more);@custom-media --contrastLess: (prefers-contrast: less);@custom-media --portrait: (orientation: portrait);@custom-media --landscape: (orientation: landscape);:root{--shadow-color: 0 0% 50%;--shadow-weight: 1%;--shadow-1: 0 2px 1px -1px hsl(var(--shadow-color) / calc(var(--shadow-weight) + 18%)),0 1px 1px hsl(var(--shadow-color) / calc(var(--shadow-weight) + 12%)),0 1px 3px hsl(var(--shadow-color) / calc(var(--shadow-weight) + 10%));--shadow-2: 0 3px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-weight) + 18%)),0 2px 2px hsl(var(--shadow-color) / calc(var(--shadow-weight) + 12%)),0 1px 5px hsl(var(--shadow-color) / calc(var(--shadow-weight) + 10%));--shadow-3: 0 2px 4px -1px hsl(var(--shadow-color) / calc(var(--shadow-weight) + 18%)),0 4px 5px hsl(var(--shadow-color) / calc(var(--shadow-weight) + 12%)),0 1px 10px hsl(var(--shadow-color) / calc(var(--shadow-weight) + 10%));--shadow-4: 0 3px 5px -1px hsl(var(--shadow-color) / calc(var(--shadow-weight) + 18%)),0 6px 10px hsl(var(--shadow-color) / calc(var(--shadow-weight) + 12%)),0 1px 18px hsl(var(--shadow-color) / calc(var(--shadow-weight) + 10%));--shadow-5: 0 5px 5px -3px hsl(var(--shadow-color) / calc(var(--shadow-weight) + 18%)),0 8px 10px 1px hsl(var(--shadow-color) / calc(var(--shadow-weight) + 12%)),0 3px 14px 2px hsl(var(--shadow-color) / calc(var(--shadow-weight) + 10%));--shadow-6: 0 7px 8px -4px hsl(var(--shadow-color) / calc(var(--shadow-weight) + 18%)),0 12px 17px 2px hsl(var(--shadow-color) / calc(var(--shadow-weight) + 12%)),0 5px 22px 4px hsl(var(--shadow-color) / calc(var(--shadow-weight) + 10%));--inset-shadow-0: inset 0 0 0 1px hsl(var(--shadow-color) / calc(var(--shadow-weight) + 9%));--inset-shadow-1: inset 0 1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-weight) + 9%));--inset-shadow-2: inset 0 1px 4px 0 hsl(var(--shadow-color) / calc(var(--shadow-weight) + 9%));--inset-shadow-3: inset 0 2px 8px 0 hsl(var(--shadow-color) / calc(var(--shadow-weight) + 9%));--inset-shadow-4: inset 0 2px 14px 0 hsl(var(--shadow-color) / calc(var(--shadow-weight) + 9%))}@media(prefers-color-scheme: dark){:root{--shadow-color: 220 40% 2%;--shadow-weight: 25%}}:root{--size-1: 0.25rem;--size-2: 0.5rem;--size-3: 0.625rem;--size-4: 0.75rem;--size-5: 0.875rem;--size-6: 1rem;--size-7: 1.25rem;--size-8: 1.5rem;--size-9: 1.75rem;--size-10: 2rem;--size-11: 2.25rem;--size-12: 2.5rem;--size-13: 2.75rem;--size-14: 3rem;--size-15: 4rem;--size-16: 5rem;--size-17: 7.5rem;--size-19: 10rem;--size-20: 15rem;--size-21: 20rem;--size-22: 30rem;--size-xxs: 240px;--size-xs: 420px;--size-sm: 640px;--size-md: 768px;--size-lg: 1024px;--size-xl: 1440px;--size-xxl: 2200px;--size-content-1: 25ch;--size-content-2: 45ch;--size-content-3: 65ch;--size-heading-1: 22ch;--size-heading-2: 28ch;--size-heading-3: 36ch}:root{--layer-1: 1;--layer-2: 2;--layer-3: 4;--layer-4: 6;--layer-5: 8}