System Initiative

// LESS VARIABLES // these are included automatically via vite's css preprocessor options, so no need to import // we will use less only in some very specific situations for a core reusable ui components // ** note about how these values relate to tailwind theme ** // unfortunately we cannot use tailwinds `theme()` function to pull in the values directly // so we'll just have to make sure things match, until we figure out something better // luckily they dont change often if ever... // TODO: sync breakpoints sizes (and names?!) with tailwind settings // TODO: maybe add these named spacing sizes to tw theme? @baseSizePx: 16px; // base size used for px -> rem conversion @spacing-px: { none: 0; // tw 0 2xs: 4px; // tw 1 xs: 8px; // tw 2 sm: 16px; // tw 4 md: 24px; // tw 6 lg: 36px; // tw 8 xl: 64px; // tw 16 2xl: 96px; // tw 24 } @spacing-rem: { none: unit((@spacing-px[none] / @baseSizePx), rem); 2xs: unit((@spacing-px[2xs] / @baseSizePx), rem); xs: unit((@spacing-px[xs] / @baseSizePx), rem); sm: unit((@spacing-px[sm] / @baseSizePx), rem); md: unit((@spacing-px[md] / @baseSizePx), rem); lg: unit((@spacing-px[lg] / @baseSizePx), rem); xl: unit((@spacing-px[xl] / @baseSizePx), rem); 2xl: unit((@spacing-px[2xl] / @baseSizePx), rem); } // COLORS // TODO: have these built from a single source of truth? @colors-destructive-900: #7F1D1D; @colors-destructive-800: #991B1B; @colors-destructive-700: #B91C1C; @colors-destructive-600: #DC2626; @colors-destructive-500: #EF4444; @colors-destructive-400: #F87171; @colors-destructive-300: #FCA5A5; @colors-destructive-200: #FECACA; @colors-destructive-100: #FEE2E2; @colors-destructive-50: #FEF2F2; @colors-warning-900: #78350F; @colors-warning-800: #92400E; @colors-warning-700: #B45309; @colors-warning-600: #D97706; @colors-warning-500: #F59E0B; @colors-warning-400: #FBBF24; @colors-warning-300: #FCD34D; @colors-warning-200: #FDE68A; @colors-warning-100: #FEF3C7; @colors-warning-50: #FFFBEB; @colors-success-900: #14532D; @colors-success-800: #166534; @colors-success-700: #15803D; @colors-success-600: #16A34A; @colors-success-500: #22C55E; @colors-success-400: #4ADE80; @colors-success-300: #86EFAC; @colors-success-200: #BBF7D0; @colors-success-100: #DCFCE7; @colors-success-50: #F0FDF4; @colors-action-900: #424F6B; @colors-action-800: #395080; @colors-action-700: #3B65A8; @colors-action-600: #1975DC; @colors-action-500: #2F80ED; @colors-action-400: #0E9BFF; @colors-action-300: #59B7FF; @colors-action-200: #B2E0FF; @colors-action-100: #E2F3FE; @colors-action-50: #EFF6FE; @colors-neutral-900: #262626; @colors-neutral-800: #333333; @colors-neutral-700: #404040; @colors-neutral-600: #525252; @colors-neutral-500: #737373; @colors-neutral-400: #A3A3A3; @colors-neutral-300: #D4D4D4; @colors-neutral-200: #E5E5E5; @colors-neutral-100: #F5F5F5; @colors-neutral-50: #FAFAFA; @colors-white: #FFFFFF; @colors-black: #000000; @colors-transparent: rgba(0, 0, 0, 0); // Responsive breakpoints ////////////////////////////////////////////////////////////////////////// // used in some loops @breakpoints: ~'mobile-only', ~'tablet', ~'desktop', ~'wide', ~'huge'; @breakpoints-without-smallest: ~'tablet', ~'desktop', ~'wide', ~'huge'; @breakpoints-without-largest: ~'mobile', ~'tablet', ~'desktop', ~'wide'; // @mobile-bp: 0px; // no mobile bp needed since it's everything from 0 to tablet @tablet-bp: 768px; @desktop-bp: 1366px; @wide-bp: 1920px; @huge-bp: 2560px; // DO NOT MODIFY /////////////////////////////////////////////////////////////////////////////////// // (these are based on the above) // media query vars @tablet-bp-minus-1: (@tablet-bp - 1); @desktop-bp-minus-1: (@desktop-bp - 1); @wide-bp-minus-1: (@wide-bp - 1); @huge-bp-minus-1: (@huge-bp - 1); @mq-landscape: ~"only screen and (orientation: landscape)"; @mq-portrait: ~"only screen and (orientation: portrait)"; @mq-screen: ~"only screen"; @mq-mobile: @mq-screen; @mq-tablet: ~"only screen and (min-width:@{tablet-bp})"; @mq-desktop: ~"only screen and (min-width:@{desktop-bp})"; @mq-wide: ~"only screen and (min-width:@{wide-bp})"; @mq-huge: ~"only screen and (min-width:@{huge-bp})"; // see options like "Card" roundedAbove, this just makes it a bit clearer @mq-above-mobile: @mq-tablet; @mq-above-tablet: @mq-desktop; @mq-above-desktop: @mq-wide; @mq-above-wide: @mq-huge; @mq-below-tablet: ~"only screen and (max-width:@{tablet-bp-minus-1})"; @mq-below-desktop: ~"only screen and (max-width:@{desktop-bp-minus-1})"; @mq-below-wide: ~"only screen and (max-width:@{wide-bp-minus-1})"; @mq-below-huge: ~"only screen and (max-width:@{huge-bp-minus-1})"; @mq-mobile-only: ~"only screen and (max-width:@{tablet-bp-minus-1})"; @mq-tablet-only: ~"only screen and (min-width:@{tablet-bp}) and (max-width:@{desktop-bp-minus-1})"; // Other values used in layout library @horizontal-align-options: { left: flex-start; center: center; right: flex-end; } @vertical-align-options: { top: flex-start; center: center; bottom: flex-end; }