UNPKG

@atlrdsgn/kit

Version:

An ever–expanding library of React components, primitives, and tools

732 lines (731 loc) • 20.9 kB
import { ColorTypes } from './vars.css'; export declare const theme: { readonly media: { readonly breakpoints: { readonly small: "460px"; readonly medium: "768px"; readonly large: "1024px"; readonly xlarge: "1200px"; }; readonly colorModes: { readonly LIGHT: "(prefers-color-scheme: light)"; readonly DARK: "(prefers-color-scheme: dark)"; }; }; readonly font: { readonly family: { readonly system: "'Inter', '-apple-system', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif"; readonly mono: "'SF Mono', monospace"; readonly take: ""; }; readonly heading: { readonly H1: "2.25rem"; readonly H2: "1.875rem"; readonly H3: "1.5rem"; readonly H4: "1.25rem"; readonly H5: "1.125rem"; readonly H6: "1rem"; }; readonly size: { readonly MINI: "0.688rem"; readonly XS: "0.75rem"; readonly SM: "0.875rem"; readonly MD: "1rem"; readonly LG: "1.125rem"; readonly XL: "1.25rem"; readonly XXL: "1.5rem"; readonly "3XL": "1.875rem"; readonly "4XL": "2.25rem"; readonly "5XL": "3rem"; readonly "6XL": "3.75rem"; readonly "7XL": "4.5rem"; readonly "8XL": "6rem"; readonly "9XL": "8rem"; }; readonly lineheight: { /** * * these should have the exact same * tokens as font.size. * * (not values, but keys) * */ readonly MINI: "14px"; readonly XS: "16px"; readonly SM: "20px"; readonly MD: "24px"; readonly LG: "28px"; readonly XL: "28px"; readonly XXL: "32px"; readonly "3XL": "36px"; readonly "4XL": "40px"; readonly "5XL": "42px"; readonly "6XL": "44px"; readonly "7XL": "46px"; readonly "8XL": "48px"; readonly "9XL": "50px"; }; readonly weight: { readonly SUPRLITE: "100"; readonly ULTRALITE: "200"; readonly LITE: "300"; readonly REGULAR: "400"; readonly MEDIUM: "500"; readonly SEMIBOLD: "600"; readonly BOLD: "700"; readonly HEAVY: "800"; readonly BLACK: "900"; }; }; readonly radii: { readonly ZERO: "0px"; readonly NO: "0px"; readonly DF: "8px"; readonly XS: "10px"; readonly SM: "11px"; readonly MD: "13px"; readonly LG: "16px"; readonly XL: "18px"; readonly XXL: "20px"; readonly PILL: "1000px"; }; readonly space: { readonly ZERO: "0"; readonly NO: "0"; readonly DF: "16px"; readonly APX: "1px"; readonly BPX: "2px"; readonly CPX: "4px"; readonly DPX: "6px"; readonly EPX: "8px"; readonly FPX: "10px"; readonly GPX: "12px"; readonly HPX: "14px"; readonly IPX: "16px"; readonly JPX: "18px"; readonly KPX: "20px"; readonly LPX: "24px"; readonly MPX: "28px"; readonly NPX: "32px"; readonly OPX: "36px"; readonly PPX: "40px"; readonly QPX: "44px"; readonly RPX: "48px"; readonly SPX: "56px"; readonly TPX: "64px"; readonly UPX: "72px"; readonly VPX: "96px"; readonly WPX: "128px"; readonly XPX: "192px"; readonly YPX: "240px"; readonly ZPX: "320px"; }; readonly z: { readonly indice: { readonly ZERO: "0"; readonly DF: "1"; readonly LOW: "2"; readonly MED: "10"; readonly HIGH: "30"; readonly TOP: "100"; readonly MAX: "99999"; }; }; readonly shadow: { readonly NO: "none"; readonly DF: "0px 4px 8px rgba(0, 0, 0, 0.1)"; readonly LOW: "0px 4px 8px rgba(0, 0, 0, 0.1)"; readonly MED: "0px 8px 16px rgba(0, 0, 0, 0.1)"; readonly HIGH: "0px 12px 24px rgba(0, 0, 0, 0.1)"; readonly SM: "0px 1px 1px 0px rgba(0, 0, 0, 0.04), 0px 2px 5px 0px rgba(0, 0, 0, 0.08)"; }; }; declare const lightModeColors: ColorTypes; declare const darkModeColors: ColorTypes; export declare const BASE: { color: { transparent: string; current: string; white: string; black: string; jade0: string; jade1: string; jade2: string; jade3: string; jade4: string; jade5: string; jade6: string; jade7: string; jade8: string; jade9: string; jade10: string; jade11: string; jade12: string; sapphire0: string; sapphire1: string; sapphire2: string; sapphire3: string; sapphire4: string; sapphire5: string; sapphire6: string; sapphire7: string; sapphire8: string; sapphire9: string; sapphire10: string; sapphire11: string; sapphire12: string; orange0: string; orange1: string; orange2: string; orange3: string; orange4: string; orange5: string; orange6: string; orange7: string; orange8: string; orange9: string; orange10: string; orange11: string; orange12: string; mauve1: string; mauve2: string; mauve3: string; mauve4: string; mauve5: string; mauve6: string; mauve7: string; mauve8: string; mauve9: string; mauve10: string; mauve11: string; mauve12: string; whiteA0: string; whiteA1: string; whiteA2: string; whiteA3: string; whiteA4: string; whiteA5: string; whiteA6: string; whiteA7: string; whiteA8: string; whiteA9: string; whiteA10: string; whiteA11: string; whiteA12: string; blackA0: string; blackA1: string; blackA2: string; blackA3: string; blackA4: string; blackA5: string; blackA6: string; blackA7: string; blackA8: string; blackA9: string; blackA10: string; blackA11: string; blackA12: string; carbon0: string; carbon1: string; carbon2: string; carbon3: string; carbon4: string; carbon5: string; carbon6: string; carbon7: string; carbon8: string; carbon9: string; carbon10: string; carbon11: string; carbon12: string; slate0: string; slate1: string; slate2: string; slate3: string; slate4: string; slate5: string; slate6: string; slate7: string; slate8: string; slate9: string; slate10: string; slate11: string; slate12: string; azure0: string; azure1: string; azure2: string; azure3: string; azure4: string; azure5: string; azure6: string; azure7: string; azure8: string; azure9: string; azure10: string; azure11: string; azure12: string; lime0: string; lime1: string; lime2: string; lime3: string; lime4: string; lime5: string; lime6: string; lime7: string; lime8: string; lime9: string; lime10: string; lime11: string; lime12: string; hyper0: string; hyper1: string; hyper2: string; hyper3: string; hyper4: string; hyper5: string; hyper6: string; hyper7: string; hyper8: string; hyper9: string; hyper10: string; hyper11: string; hyper12: string; }; media: { readonly breakpoints: { readonly small: "460px"; readonly medium: "768px"; readonly large: "1024px"; readonly xlarge: "1200px"; }; readonly colorModes: { readonly LIGHT: "(prefers-color-scheme: light)"; readonly DARK: "(prefers-color-scheme: dark)"; }; }; font: { readonly family: { readonly system: "'Inter', '-apple-system', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif"; readonly mono: "'SF Mono', monospace"; readonly take: ""; }; readonly heading: { readonly H1: "2.25rem"; readonly H2: "1.875rem"; readonly H3: "1.5rem"; readonly H4: "1.25rem"; readonly H5: "1.125rem"; readonly H6: "1rem"; }; readonly size: { readonly MINI: "0.688rem"; readonly XS: "0.75rem"; readonly SM: "0.875rem"; readonly MD: "1rem"; readonly LG: "1.125rem"; readonly XL: "1.25rem"; readonly XXL: "1.5rem"; readonly "3XL": "1.875rem"; readonly "4XL": "2.25rem"; readonly "5XL": "3rem"; readonly "6XL": "3.75rem"; readonly "7XL": "4.5rem"; readonly "8XL": "6rem"; readonly "9XL": "8rem"; }; readonly lineheight: { /** * * these should have the exact same * tokens as font.size. * * (not values, but keys) * */ readonly MINI: "14px"; readonly XS: "16px"; readonly SM: "20px"; readonly MD: "24px"; readonly LG: "28px"; readonly XL: "28px"; readonly XXL: "32px"; readonly "3XL": "36px"; readonly "4XL": "40px"; readonly "5XL": "42px"; readonly "6XL": "44px"; readonly "7XL": "46px"; readonly "8XL": "48px"; readonly "9XL": "50px"; }; readonly weight: { readonly SUPRLITE: "100"; readonly ULTRALITE: "200"; readonly LITE: "300"; readonly REGULAR: "400"; readonly MEDIUM: "500"; readonly SEMIBOLD: "600"; readonly BOLD: "700"; readonly HEAVY: "800"; readonly BLACK: "900"; }; }; radii: { readonly ZERO: "0px"; readonly NO: "0px"; readonly DF: "8px"; readonly XS: "10px"; readonly SM: "11px"; readonly MD: "13px"; readonly LG: "16px"; readonly XL: "18px"; readonly XXL: "20px"; readonly PILL: "1000px"; }; space: { readonly ZERO: "0"; readonly NO: "0"; readonly DF: "16px"; readonly APX: "1px"; readonly BPX: "2px"; readonly CPX: "4px"; readonly DPX: "6px"; readonly EPX: "8px"; readonly FPX: "10px"; readonly GPX: "12px"; readonly HPX: "14px"; readonly IPX: "16px"; readonly JPX: "18px"; readonly KPX: "20px"; readonly LPX: "24px"; readonly MPX: "28px"; readonly NPX: "32px"; readonly OPX: "36px"; readonly PPX: "40px"; readonly QPX: "44px"; readonly RPX: "48px"; readonly SPX: "56px"; readonly TPX: "64px"; readonly UPX: "72px"; readonly VPX: "96px"; readonly WPX: "128px"; readonly XPX: "192px"; readonly YPX: "240px"; readonly ZPX: "320px"; }; z: { readonly indice: { readonly ZERO: "0"; readonly DF: "1"; readonly LOW: "2"; readonly MED: "10"; readonly HIGH: "30"; readonly TOP: "100"; readonly MAX: "99999"; }; }; shadow: { readonly NO: "none"; readonly DF: "0px 4px 8px rgba(0, 0, 0, 0.1)"; readonly LOW: "0px 4px 8px rgba(0, 0, 0, 0.1)"; readonly MED: "0px 8px 16px rgba(0, 0, 0, 0.1)"; readonly HIGH: "0px 12px 24px rgba(0, 0, 0, 0.1)"; readonly SM: "0px 1px 1px 0px rgba(0, 0, 0, 0.04), 0px 2px 5px 0px rgba(0, 0, 0, 0.08)"; }; }; export declare const DARK: { color: { transparent: string; current: string; white: string; black: string; jade0: string; jade1: string; jade2: string; jade3: string; jade4: string; jade5: string; jade6: string; jade7: string; jade8: string; jade9: string; jade10: string; jade11: string; jade12: string; sapphire0: string; sapphire1: string; sapphire2: string; sapphire3: string; sapphire4: string; sapphire5: string; sapphire6: string; sapphire7: string; sapphire8: string; sapphire9: string; sapphire10: string; sapphire11: string; sapphire12: string; orange0: string; orange1: string; orange2: string; orange3: string; orange4: string; orange5: string; orange6: string; orange7: string; orange8: string; orange9: string; orange10: string; orange11: string; orange12: string; mauve1: string; mauve2: string; mauve3: string; mauve4: string; mauve5: string; mauve6: string; mauve7: string; mauve8: string; mauve9: string; mauve10: string; mauve11: string; mauve12: string; whiteA0: string; whiteA1: string; whiteA2: string; whiteA3: string; whiteA4: string; whiteA5: string; whiteA6: string; whiteA7: string; whiteA8: string; whiteA9: string; whiteA10: string; whiteA11: string; whiteA12: string; blackA0: string; blackA1: string; blackA2: string; blackA3: string; blackA4: string; blackA5: string; blackA6: string; blackA7: string; blackA8: string; blackA9: string; blackA10: string; blackA11: string; blackA12: string; carbon0: string; carbon1: string; carbon2: string; carbon3: string; carbon4: string; carbon5: string; carbon6: string; carbon7: string; carbon8: string; carbon9: string; carbon10: string; carbon11: string; carbon12: string; slate0: string; slate1: string; slate2: string; slate3: string; slate4: string; slate5: string; slate6: string; slate7: string; slate8: string; slate9: string; slate10: string; slate11: string; slate12: string; azure0: string; azure1: string; azure2: string; azure3: string; azure4: string; azure5: string; azure6: string; azure7: string; azure8: string; azure9: string; azure10: string; azure11: string; azure12: string; lime0: string; lime1: string; lime2: string; lime3: string; lime4: string; lime5: string; lime6: string; lime7: string; lime8: string; lime9: string; lime10: string; lime11: string; lime12: string; hyper0: string; hyper1: string; hyper2: string; hyper3: string; hyper4: string; hyper5: string; hyper6: string; hyper7: string; hyper8: string; hyper9: string; hyper10: string; hyper11: string; hyper12: string; }; media: { readonly breakpoints: { readonly small: "460px"; readonly medium: "768px"; readonly large: "1024px"; readonly xlarge: "1200px"; }; readonly colorModes: { readonly LIGHT: "(prefers-color-scheme: light)"; readonly DARK: "(prefers-color-scheme: dark)"; }; }; font: { readonly family: { readonly system: "'Inter', '-apple-system', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif"; readonly mono: "'SF Mono', monospace"; readonly take: ""; }; readonly heading: { readonly H1: "2.25rem"; readonly H2: "1.875rem"; readonly H3: "1.5rem"; readonly H4: "1.25rem"; readonly H5: "1.125rem"; readonly H6: "1rem"; }; readonly size: { readonly MINI: "0.688rem"; readonly XS: "0.75rem"; readonly SM: "0.875rem"; readonly MD: "1rem"; readonly LG: "1.125rem"; readonly XL: "1.25rem"; readonly XXL: "1.5rem"; readonly "3XL": "1.875rem"; readonly "4XL": "2.25rem"; readonly "5XL": "3rem"; readonly "6XL": "3.75rem"; readonly "7XL": "4.5rem"; readonly "8XL": "6rem"; readonly "9XL": "8rem"; }; readonly lineheight: { /** * * these should have the exact same * tokens as font.size. * * (not values, but keys) * */ readonly MINI: "14px"; readonly XS: "16px"; readonly SM: "20px"; readonly MD: "24px"; readonly LG: "28px"; readonly XL: "28px"; readonly XXL: "32px"; readonly "3XL": "36px"; readonly "4XL": "40px"; readonly "5XL": "42px"; readonly "6XL": "44px"; readonly "7XL": "46px"; readonly "8XL": "48px"; readonly "9XL": "50px"; }; readonly weight: { readonly SUPRLITE: "100"; readonly ULTRALITE: "200"; readonly LITE: "300"; readonly REGULAR: "400"; readonly MEDIUM: "500"; readonly SEMIBOLD: "600"; readonly BOLD: "700"; readonly HEAVY: "800"; readonly BLACK: "900"; }; }; radii: { readonly ZERO: "0px"; readonly NO: "0px"; readonly DF: "8px"; readonly XS: "10px"; readonly SM: "11px"; readonly MD: "13px"; readonly LG: "16px"; readonly XL: "18px"; readonly XXL: "20px"; readonly PILL: "1000px"; }; space: { readonly ZERO: "0"; readonly NO: "0"; readonly DF: "16px"; readonly APX: "1px"; readonly BPX: "2px"; readonly CPX: "4px"; readonly DPX: "6px"; readonly EPX: "8px"; readonly FPX: "10px"; readonly GPX: "12px"; readonly HPX: "14px"; readonly IPX: "16px"; readonly JPX: "18px"; readonly KPX: "20px"; readonly LPX: "24px"; readonly MPX: "28px"; readonly NPX: "32px"; readonly OPX: "36px"; readonly PPX: "40px"; readonly QPX: "44px"; readonly RPX: "48px"; readonly SPX: "56px"; readonly TPX: "64px"; readonly UPX: "72px"; readonly VPX: "96px"; readonly WPX: "128px"; readonly XPX: "192px"; readonly YPX: "240px"; readonly ZPX: "320px"; }; z: { readonly indice: { readonly ZERO: "0"; readonly DF: "1"; readonly LOW: "2"; readonly MED: "10"; readonly HIGH: "30"; readonly TOP: "100"; readonly MAX: "99999"; }; }; shadow: { readonly NO: "none"; readonly DF: "0px 4px 8px rgba(0, 0, 0, 0.1)"; readonly LOW: "0px 4px 8px rgba(0, 0, 0, 0.1)"; readonly MED: "0px 8px 16px rgba(0, 0, 0, 0.1)"; readonly HIGH: "0px 12px 24px rgba(0, 0, 0, 0.1)"; readonly SM: "0px 1px 1px 0px rgba(0, 0, 0, 0.04), 0px 2px 5px 0px rgba(0, 0, 0, 0.08)"; }; }; export type Theme = typeof BASE; export type BaseThemeColour = keyof typeof lightModeColors; export type DarkThemeColour = keyof typeof darkModeColors; export type ThemeColour = BaseThemeColour | DarkThemeColour; export {}; //# sourceMappingURL=theme.css.d.ts.map