Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@novalabsxyz/base-theme
Advanced tools
@novalabsxyz/base-theme - npm Package Compare versions
Comparing version 0.1.29 to 0.1.30-alpha.0
@@ -25,92 +25,51 @@ export { BaseThemeTypography, BaseThemePalette, BaseThemeBreakpoints, } from './baseThemeTypes'; | ||
| }; | ||
| export declare const negativeSpacing: { | ||
| n_xxxxl: number; | ||
| n_xxxl: number; | ||
| n_xxl: number; | ||
| n_xl: number; | ||
| n_lx: number; | ||
| n_l: number; | ||
| n_lm: number; | ||
| n_m: number; | ||
| n_ms: number; | ||
| n_s: number; | ||
| n_xs: number; | ||
| n_xxs: number; | ||
| n_xxxs: number; | ||
| export declare const negativeSpacing: {}; | ||
| export declare const breakpoints: { | ||
| xs: number; | ||
| sm: number; | ||
| md: number; | ||
| lg: number; | ||
| xl: number; | ||
| xxl: number; | ||
| }; | ||
| export declare const borderRadius: { | ||
| lx: number; | ||
| l: number; | ||
| lm: number; | ||
| m: number; | ||
| ms: number; | ||
| none: number; | ||
| round: number; | ||
| s: number; | ||
| xl: number; | ||
| xxxxl: number; | ||
| }; | ||
| declare const baseTheme: { | ||
| palette: { | ||
| black: string; | ||
| appBackground: string; | ||
| cardBackground: string; | ||
| slate: string; | ||
| mineshaft: string; | ||
| asphalt: string; | ||
| tundora: string; | ||
| doveGrey: string; | ||
| bodyGrey: string; | ||
| silver: string; | ||
| white: string; | ||
| black: string; | ||
| black200: string; | ||
| black300: string; | ||
| black350: string; | ||
| black400: string; | ||
| black500: string; | ||
| black600: string; | ||
| black650: string; | ||
| black700: string; | ||
| black800: string; | ||
| black900: string; | ||
| black1000: string; | ||
| grey100: string; | ||
| grey200: string; | ||
| grey300: string; | ||
| grey350: string; | ||
| grey400: string; | ||
| grey500: string; | ||
| grey550: string; | ||
| grey600: string; | ||
| grey700: string; | ||
| grey800: string; | ||
| grey900: string; | ||
| temp100: string; | ||
| temp200: string; | ||
| temp300: string; | ||
| temp400: string; | ||
| temp500: string; | ||
| secondaryText: string; | ||
| blueViolet: string; | ||
| california: string; | ||
| candyCorn: string; | ||
| cerulean: string; | ||
| cornflowerBlue: string; | ||
| flamePea: string; | ||
| mediumSpringGreen: string; | ||
| neonCarrot: string; | ||
| orangeRed: string; | ||
| purple500: string; | ||
| springGreen: string; | ||
| sunsetOrange: string; | ||
| superNova: string; | ||
| wildStrawberry: string; | ||
| dangerInput: string; | ||
| red100: string; | ||
| red200: string; | ||
| red300: string; | ||
| red400: string; | ||
| red500: string; | ||
| transparent: string; | ||
| transparent10: string; | ||
| magenta: string; | ||
| magentaLight: string; | ||
| pink: string; | ||
| red: string; | ||
| purple: string; | ||
| lightPurple: string; | ||
| subPink: string; | ||
| planMagenta: string; | ||
| blue: string; | ||
| green: string; | ||
| yellow: string; | ||
| orange: string; | ||
| orangeYellow: string; | ||
| passionFruitOrange: string; | ||
| subOrange: string; | ||
| yellow: string; | ||
| lightYellow: string; | ||
| sun: string; | ||
| betaYellow: string; | ||
| darkYellow: string; | ||
| blue: string; | ||
| lightBlue3: string; | ||
| lightBlue2: string; | ||
| lightBlue: string; | ||
| cyanBlue: string; | ||
| cyan: string; | ||
| lightCyan: string; | ||
| teal: string; | ||
| pink: string; | ||
| magenta: string; | ||
| lime: string; | ||
| darkBlue: string; | ||
| }; | ||
@@ -148,253 +107,30 @@ NovaFont: { | ||
| darkThemeColors: { | ||
| error: string; | ||
| primary: string; | ||
| primaryBackground: string; | ||
| primaryIcon: string; | ||
| primaryText: string; | ||
| secondary: string; | ||
| secondaryIcon: string; | ||
| secondaryText: string; | ||
| surface: string; | ||
| surfaceContrast: string; | ||
| surfaceContrastText: string; | ||
| surfaceSecondary: string; | ||
| surfaceSecondaryText: string; | ||
| surfaceText: string; | ||
| black: string; | ||
| appBackground: string; | ||
| cardBackground: string; | ||
| slate: string; | ||
| mineshaft: string; | ||
| asphalt: string; | ||
| tundora: string; | ||
| doveGrey: string; | ||
| bodyGrey: string; | ||
| silver: string; | ||
| white: string; | ||
| black: string; | ||
| black200: string; | ||
| black300: string; | ||
| black350: string; | ||
| black400: string; | ||
| black500: string; | ||
| black600: string; | ||
| black650: string; | ||
| black700: string; | ||
| black800: string; | ||
| black900: string; | ||
| black1000: string; | ||
| grey100: string; | ||
| grey200: string; | ||
| grey300: string; | ||
| grey350: string; | ||
| grey400: string; | ||
| grey500: string; | ||
| grey550: string; | ||
| grey600: string; | ||
| grey700: string; | ||
| grey800: string; | ||
| grey900: string; | ||
| temp100: string; | ||
| temp200: string; | ||
| temp300: string; | ||
| temp400: string; | ||
| temp500: string; | ||
| blueViolet: string; | ||
| california: string; | ||
| candyCorn: string; | ||
| cerulean: string; | ||
| cornflowerBlue: string; | ||
| flamePea: string; | ||
| mediumSpringGreen: string; | ||
| neonCarrot: string; | ||
| orangeRed: string; | ||
| purple500: string; | ||
| springGreen: string; | ||
| sunsetOrange: string; | ||
| superNova: string; | ||
| wildStrawberry: string; | ||
| dangerInput: string; | ||
| red100: string; | ||
| red200: string; | ||
| red300: string; | ||
| red400: string; | ||
| red500: string; | ||
| transparent: string; | ||
| transparent10: string; | ||
| magenta: string; | ||
| magentaLight: string; | ||
| pink: string; | ||
| red: string; | ||
| purple: string; | ||
| lightPurple: string; | ||
| subPink: string; | ||
| planMagenta: string; | ||
| blue: string; | ||
| green: string; | ||
| yellow: string; | ||
| orange: string; | ||
| orangeYellow: string; | ||
| passionFruitOrange: string; | ||
| subOrange: string; | ||
| yellow: string; | ||
| lightYellow: string; | ||
| sun: string; | ||
| betaYellow: string; | ||
| darkYellow: string; | ||
| blue: string; | ||
| lightBlue3: string; | ||
| lightBlue2: string; | ||
| lightBlue: string; | ||
| cyanBlue: string; | ||
| cyan: string; | ||
| lightCyan: string; | ||
| teal: string; | ||
| pink: string; | ||
| magenta: string; | ||
| lime: string; | ||
| darkBlue: string; | ||
| }; | ||
| textVariants: { | ||
| buttonLight: { | ||
| fontFamily: string; | ||
| color: string; | ||
| fontSize: number; | ||
| }; | ||
| buttonMedium: { | ||
| fontFamily: string; | ||
| color: string; | ||
| fontSize: number; | ||
| }; | ||
| buttonBold: { | ||
| fontFamily: string; | ||
| color: string; | ||
| fontSize: number; | ||
| }; | ||
| body0Light: { | ||
| fontFamily: string; | ||
| color: string; | ||
| fontSize: number; | ||
| }; | ||
| body0Medium: { | ||
| fontFamily: string; | ||
| color: string; | ||
| fontSize: number; | ||
| }; | ||
| body0Bold: { | ||
| fontFamily: string; | ||
| color: string; | ||
| fontSize: number; | ||
| }; | ||
| body1Light: { | ||
| fontFamily: string; | ||
| color: string; | ||
| fontSize: number; | ||
| }; | ||
| body1Medium: { | ||
| fontFamily: string; | ||
| color: string; | ||
| fontSize: number; | ||
| }; | ||
| body1Bold: { | ||
| fontFamily: string; | ||
| color: string; | ||
| fontSize: number; | ||
| }; | ||
| body2Light: { | ||
| fontFamily: string; | ||
| color: string; | ||
| fontSize: number; | ||
| }; | ||
| body2Medium: { | ||
| fontFamily: string; | ||
| color: string; | ||
| fontSize: number; | ||
| }; | ||
| body2Bold: { | ||
| fontFamily: string; | ||
| color: string; | ||
| fontSize: number; | ||
| }; | ||
| body3Light: { | ||
| fontFamily: string; | ||
| color: string; | ||
| fontSize: number; | ||
| }; | ||
| body3Medium: { | ||
| fontFamily: string; | ||
| color: string; | ||
| fontSize: number; | ||
| }; | ||
| body3Bold: { | ||
| fontFamily: string; | ||
| color: string; | ||
| fontSize: number; | ||
| }; | ||
| h1Light: { | ||
| fontFamily: string; | ||
| color: string; | ||
| fontSize: number; | ||
| }; | ||
| h1Medium: { | ||
| fontFamily: string; | ||
| color: string; | ||
| fontSize: number; | ||
| }; | ||
| h1Bold: { | ||
| fontFamily: string; | ||
| color: string; | ||
| fontSize: number; | ||
| }; | ||
| h2Light: { | ||
| fontFamily: string; | ||
| color: string; | ||
| fontSize: number; | ||
| }; | ||
| h2Medium: { | ||
| fontFamily: string; | ||
| color: string; | ||
| fontSize: number; | ||
| }; | ||
| h2Bold: { | ||
| fontFamily: string; | ||
| color: string; | ||
| fontSize: number; | ||
| }; | ||
| h3Light: { | ||
| fontFamily: string; | ||
| color: string; | ||
| fontSize: number; | ||
| }; | ||
| h3Medium: { | ||
| fontFamily: string; | ||
| color: string; | ||
| fontSize: number; | ||
| }; | ||
| h3Bold: { | ||
| fontFamily: string; | ||
| color: string; | ||
| fontSize: number; | ||
| }; | ||
| h4Light: { | ||
| fontFamily: string; | ||
| color: string; | ||
| fontSize: number; | ||
| }; | ||
| h4Medium: { | ||
| fontFamily: string; | ||
| color: string; | ||
| fontSize: number; | ||
| }; | ||
| h4Bold: { | ||
| fontFamily: string; | ||
| color: string; | ||
| fontSize: number; | ||
| }; | ||
| body0: { | ||
| color: string; | ||
| fontFamily: string; | ||
| fontSize: number; | ||
| }; | ||
| body1: { | ||
| color: string; | ||
| fontFamily: string; | ||
| fontSize: number; | ||
| }; | ||
| body2: { | ||
| color: string; | ||
| fontFamily: string; | ||
| fontSize: number; | ||
| }; | ||
| body3: { | ||
| color: string; | ||
| fontFamily: string; | ||
| fontSize: number; | ||
| }; | ||
| bold: { | ||
| fontFamily: string; | ||
| }; | ||
| h0: { | ||
| color: string; | ||
| fontFamily: string; | ||
| fontSize: number; | ||
| }; | ||
| h1: { | ||
@@ -404,2 +140,5 @@ color: string; | ||
| fontSize: number; | ||
| fontWeight: number; | ||
| textTransform: string; | ||
| letterSpacing: number; | ||
| }; | ||
@@ -410,2 +149,4 @@ h2: { | ||
| fontSize: number; | ||
| letterSpacing: number; | ||
| fontWeight: number; | ||
| }; | ||
@@ -416,2 +157,4 @@ h3: { | ||
| fontSize: number; | ||
| letterSpacing: number; | ||
| fontWeight: number; | ||
| }; | ||
@@ -422,46 +165,19 @@ h4: { | ||
| fontSize: number; | ||
| letterSpacing: number; | ||
| fontWeight: number; | ||
| }; | ||
| h5: { | ||
| body: { | ||
| color: string; | ||
| fontFamily: string; | ||
| fontSize: number; | ||
| letterSpacing: number; | ||
| fontWeight: number; | ||
| }; | ||
| light: { | ||
| fontFamily: string; | ||
| }; | ||
| medium: { | ||
| fontFamily: string; | ||
| }; | ||
| regular: { | ||
| fontFamily: string; | ||
| }; | ||
| subtitle1: { | ||
| legal: { | ||
| color: string; | ||
| fontFamily: string; | ||
| fontSize: number; | ||
| letterSpacing: number; | ||
| fontWeight: number; | ||
| }; | ||
| subtitle2: { | ||
| color: string; | ||
| fontFamily: string; | ||
| fontSize: number; | ||
| }; | ||
| subtitle3: { | ||
| color: string; | ||
| fontFamily: string; | ||
| fontSize: number; | ||
| }; | ||
| subtitle4: { | ||
| color: string; | ||
| fontFamily: string; | ||
| fontSize: number; | ||
| }; | ||
| button: { | ||
| color: string; | ||
| fontFamily: string; | ||
| fontSize: number; | ||
| }; | ||
| permanentMarker: { | ||
| color: string; | ||
| fontFamily: string; | ||
| }; | ||
| }; | ||
@@ -481,26 +197,43 @@ borderRadii: { | ||
| breakpoints: { | ||
| smallPhone: number; | ||
| mediumPhone: number; | ||
| phone: number; | ||
| tablet: number; | ||
| xs: number; | ||
| sm: number; | ||
| md: number; | ||
| lg: number; | ||
| xl: number; | ||
| xxl: number; | ||
| }; | ||
| spacing: { | ||
| none: number; | ||
| xxxs: number; | ||
| xxs: number; | ||
| xs: number; | ||
| sx: number; | ||
| s: number; | ||
| ms: number; | ||
| m: number; | ||
| lm: number; | ||
| l: number; | ||
| lx: number; | ||
| xl: number; | ||
| xxl: number; | ||
| xxxl: number; | ||
| xxxxl: number; | ||
| '0': number; | ||
| '0.25': number; | ||
| '0.5': number; | ||
| '1': number; | ||
| '2': number; | ||
| '2.5': number; | ||
| '3': number; | ||
| '4': number; | ||
| '5': number; | ||
| '6': number; | ||
| '7': number; | ||
| '8': number; | ||
| '9': number; | ||
| '10': number; | ||
| '11': number; | ||
| '12': number; | ||
| '14': number; | ||
| '16': number; | ||
| '20': number; | ||
| '24': number; | ||
| '28': number; | ||
| '30': number; | ||
| '32': number; | ||
| '36': number; | ||
| '40': number; | ||
| '48': number; | ||
| '52': number; | ||
| '56': number; | ||
| '60': number; | ||
| '64': number; | ||
| '72': number; | ||
| '80': number; | ||
| '96': number; | ||
| }; | ||
@@ -507,0 +240,0 @@ }; |
| "use strict"; | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| exports.PermanentMarkerFont = exports.HeliumFont = exports.NovaFont = exports.negativeSpacing = void 0; | ||
| exports.PermanentMarkerFont = exports.HeliumFont = exports.NovaFont = exports.borderRadius = exports.breakpoints = exports.negativeSpacing = void 0; | ||
| const NovaFont = { | ||
@@ -27,213 +27,152 @@ bold: 'DMSans-Bold', | ||
| const PermanentMarkerFont = { | ||
| regular: 'PermanentMarker-Regular', | ||
| regular: 'Permanent Marker', | ||
| }; | ||
| exports.PermanentMarkerFont = PermanentMarkerFont; | ||
| const palette = { | ||
| black: '#000000', | ||
| appBackground: '#0E0E0E', | ||
| cardBackground: '#171717', | ||
| slate: '#222222', | ||
| mineshaft: '#272727', | ||
| asphalt: '#333333', | ||
| tundora: '#474747', | ||
| doveGrey: '#737373', | ||
| bodyGrey: '#818181', | ||
| silver: '#BBBBBB', | ||
| white: '#FFFFFF', | ||
| black: '#000000', | ||
| black200: '#41434F', | ||
| black300: '#464646', | ||
| black350: '#474747', | ||
| black400: '#3D435B', | ||
| black500: '#2F2F2F', | ||
| black600: '#242424', | ||
| black650: '#191919', | ||
| black700: '#171717', | ||
| black800: '#1A1C22', | ||
| black900: '#0c0c0c', | ||
| black1000: '#0E0E0E', | ||
| grey100: '#F7F7F7', | ||
| grey200: '#EFEFF0', | ||
| grey300: '#AEAEAE', | ||
| grey350: '#828282', | ||
| grey400: '#7E8399', | ||
| grey500: '#7D7D7D', | ||
| grey550: '#646464', | ||
| grey600: '#565B6D', | ||
| grey700: '#5A5E6C', | ||
| grey800: '#5f5f5f', | ||
| grey900: '#272727', | ||
| // TEMP sub signup flow: //TODO will consolidate after design guideline | ||
| temp100: '#575757', | ||
| temp200: '#1D1D1D', | ||
| temp300: '#444444', | ||
| temp400: '#818181', | ||
| temp500: '#303030', | ||
| secondaryText: '#666666', | ||
| blueViolet: '#B250FF', | ||
| california: '#FFA217', | ||
| candyCorn: '#F9E553', | ||
| cerulean: '#35B2D9', | ||
| cornflowerBlue: '#009FF9', | ||
| flamePea: '#D95235', | ||
| mediumSpringGreen: '#53F98B', | ||
| neonCarrot: '#FF9431', | ||
| orangeRed: '#FF4016', | ||
| purple500: '#B556FF', | ||
| springGreen: '#36FA84', | ||
| sunsetOrange: '#F04E4E', | ||
| superNova: '#FFCC16', | ||
| wildStrawberry: '#FF43A3', | ||
| red200: '#F59CA2', | ||
| red300: '#F97570', | ||
| red400: '#FF6666', | ||
| red500: '#E43B70', | ||
| transparent: '#00000000', | ||
| transparent10: '#FFFFFF1A', | ||
| // Referral colors (//TODO needs to organize with pete) | ||
| magenta: '#FB1FFF', | ||
| magentaLight: '#FF66AF', | ||
| pink: '#FF66B0', | ||
| purple: '#DF1CFF', | ||
| lightPurple: '#E543FF', | ||
| subPink: '#FF43A3', | ||
| planMagenta: '#D71F7D', | ||
| orange: '#FF5B75', | ||
| orangeYellow: '#FF6D3F', | ||
| passionFruitOrange: '#FF6662', | ||
| subOrange: '#FF940A', | ||
| yellow: '#FFB823', | ||
| lightYellow: '#FFC13F', | ||
| sun: '#F7A313', | ||
| betaYellow: '#F4BC2B', | ||
| darkYellow: '#F39A10', | ||
| blue: '#0075FF', | ||
| lightBlue3: '#2B99FF', | ||
| lightBlue2: '#1A81F1', | ||
| lightBlue: '#1877F2', | ||
| cyanBlue: '#34AADF', | ||
| cyan: '#31FFDA', | ||
| lightCyan: '#31FFDB', | ||
| dangerInput: '#251511', | ||
| red100: '#351D17', | ||
| red200: '441F16', | ||
| red300: '5B2619', | ||
| red: '#EB502E', | ||
| // Gradients | ||
| purple: '#B250FF', | ||
| blue: '#52C1FF', | ||
| green: '#00E268', | ||
| yellow: '#FFD231', | ||
| orange: '#FF6B17', | ||
| teal: '#17FF90', | ||
| pink: '#FF4AA1', | ||
| magenta: '#DF1CFF', | ||
| lime: '#8CFA36', | ||
| darkBlue: '#2B99FF', | ||
| }; | ||
| // TODO: Do we need this? | ||
| // const light = { | ||
| // fontFamily: NovaFont.light, | ||
| // } | ||
| // const medium = { | ||
| // fontFamily: NovaFont.medium, | ||
| // } | ||
| // const bold = { | ||
| // fontFamily: NovaFont.bold, | ||
| // } | ||
| let baseTextVariants = { | ||
| body0: { | ||
| color: 'primaryText', | ||
| fontFamily: NovaFont.regular, | ||
| fontSize: 21, | ||
| }, | ||
| body1: { | ||
| color: 'primaryText', | ||
| fontFamily: NovaFont.regular, | ||
| fontSize: 17, | ||
| }, | ||
| body1Light: { | ||
| color: 'primaryText', | ||
| fontFamily: NovaFont.light, | ||
| fontSize: 17, | ||
| }, | ||
| body2: { | ||
| color: 'primaryText', | ||
| fontFamily: NovaFont.regular, | ||
| fontSize: 14, | ||
| }, | ||
| body3: { | ||
| color: 'primaryText', | ||
| fontFamily: NovaFont.regular, | ||
| fontSize: 12, | ||
| }, | ||
| bold: { | ||
| fontFamily: NovaFont.bold, | ||
| }, | ||
| h0: { | ||
| color: 'primaryText', | ||
| fontFamily: NovaFont.regular, | ||
| h1: { | ||
| color: palette.white, | ||
| fontFamily: PermanentMarkerFont.regular, | ||
| fontSize: 90, | ||
| fontWeight: 400, | ||
| textTransform: 'uppercase', | ||
| letterSpacing: -4.5, | ||
| // lineHeight: 79.65, | ||
| }, | ||
| h1: { | ||
| color: 'primaryText', | ||
| fontFamily: NovaFont.regular, | ||
| fontSize: 54, | ||
| }, | ||
| h2: { | ||
| color: 'primaryText', | ||
| color: palette.white, | ||
| fontFamily: NovaFont.regular, | ||
| fontSize: 48, | ||
| fontSize: 40, | ||
| // lineHeight: 35.4, | ||
| letterSpacing: -1.2, | ||
| fontWeight: 500, | ||
| }, | ||
| h3: { | ||
| color: 'primaryText', | ||
| color: palette.white, | ||
| fontFamily: NovaFont.regular, | ||
| fontSize: 44, | ||
| fontSize: 30, | ||
| // lineHeight: 26.55, | ||
| letterSpacing: -0.9, | ||
| fontWeight: 500, | ||
| }, | ||
| h4: { | ||
| color: 'primaryText', | ||
| color: palette.white, | ||
| fontFamily: NovaFont.regular, | ||
| fontSize: 36, | ||
| fontSize: 18, | ||
| // lineHeight: 21.6, | ||
| letterSpacing: -0.54, | ||
| fontWeight: 400, | ||
| }, | ||
| h5: { | ||
| color: 'primaryText', | ||
| body: { | ||
| color: palette.bodyGrey, | ||
| fontFamily: NovaFont.regular, | ||
| fontSize: 28, | ||
| }, | ||
| light: { | ||
| fontFamily: NovaFont.light, | ||
| }, | ||
| medium: { | ||
| fontFamily: NovaFont.medium, | ||
| }, | ||
| regular: { | ||
| fontFamily: NovaFont.regular, | ||
| }, | ||
| subtitle1: { | ||
| color: 'primaryText', | ||
| fontFamily: NovaFont.regular, | ||
| fontSize: 24, | ||
| }, | ||
| subtitle2: { | ||
| color: 'primaryText', | ||
| fontFamily: NovaFont.regular, | ||
| fontSize: 20, | ||
| }, | ||
| subtitle3: { | ||
| color: 'primaryText', | ||
| fontFamily: NovaFont.regular, | ||
| fontSize: 18, | ||
| // lineHeight: 21.6, | ||
| letterSpacing: -0.54, | ||
| fontWeight: 400, | ||
| }, | ||
| subtitle4: { | ||
| color: 'primaryText', | ||
| legal: { | ||
| color: palette.bodyGrey, | ||
| fontFamily: NovaFont.regular, | ||
| fontSize: 14, | ||
| // lineHeight: 16.8, | ||
| letterSpacing: -0.42, | ||
| fontWeight: 400, | ||
| }, | ||
| button: { | ||
| color: 'primaryText', | ||
| fontFamily: NovaFont.medium, | ||
| fontSize: 20, | ||
| }, | ||
| permanentMarker: { | ||
| color: 'primaryText', | ||
| fontFamily: PermanentMarkerFont.regular, | ||
| }, | ||
| }; | ||
| const textVariants = Object.assign(Object.assign({}, baseTextVariants), { buttonLight: Object.assign(Object.assign({}, baseTextVariants.button), baseTextVariants.light), buttonMedium: Object.assign(Object.assign({}, baseTextVariants.button), baseTextVariants.medium), buttonBold: Object.assign(Object.assign({}, baseTextVariants.button), baseTextVariants.bold), body0Light: Object.assign(Object.assign({}, baseTextVariants.body0), baseTextVariants.light), body0Medium: Object.assign(Object.assign({}, baseTextVariants.body0), baseTextVariants.medium), body0Bold: Object.assign(Object.assign({}, baseTextVariants.body0), baseTextVariants.bold), body1Light: Object.assign(Object.assign({}, baseTextVariants.body1), baseTextVariants.light), body1Medium: Object.assign(Object.assign({}, baseTextVariants.body1), baseTextVariants.medium), body1Bold: Object.assign(Object.assign({}, baseTextVariants.body1), baseTextVariants.bold), body2Light: Object.assign(Object.assign({}, baseTextVariants.body2), baseTextVariants.light), body2Medium: Object.assign(Object.assign({}, baseTextVariants.body2), baseTextVariants.medium), body2Bold: Object.assign(Object.assign({}, baseTextVariants.body2), baseTextVariants.bold), body3Light: Object.assign(Object.assign({}, baseTextVariants.body3), baseTextVariants.light), body3Medium: Object.assign(Object.assign({}, baseTextVariants.body3), baseTextVariants.medium), body3Bold: Object.assign(Object.assign({}, baseTextVariants.body3), baseTextVariants.bold), h1Light: Object.assign(Object.assign({}, baseTextVariants.h1), baseTextVariants.light), h1Medium: Object.assign(Object.assign({}, baseTextVariants.h1), baseTextVariants.medium), h1Bold: Object.assign(Object.assign({}, baseTextVariants.h1), baseTextVariants.bold), h2Light: Object.assign(Object.assign({}, baseTextVariants.h2), baseTextVariants.light), h2Medium: Object.assign(Object.assign({}, baseTextVariants.h2), baseTextVariants.medium), h2Bold: Object.assign(Object.assign({}, baseTextVariants.h2), baseTextVariants.bold), h3Light: Object.assign(Object.assign({}, baseTextVariants.h3), baseTextVariants.light), h3Medium: Object.assign(Object.assign({}, baseTextVariants.h3), baseTextVariants.medium), h3Bold: Object.assign(Object.assign({}, baseTextVariants.h3), baseTextVariants.bold), h4Light: Object.assign(Object.assign({}, baseTextVariants.h4), baseTextVariants.light), h4Medium: Object.assign(Object.assign({}, baseTextVariants.h4), baseTextVariants.medium), h4Bold: Object.assign(Object.assign({}, baseTextVariants.h4), baseTextVariants.bold) }); | ||
| const textVariants = Object.assign({}, baseTextVariants); | ||
| const baseSpacing = { | ||
| '0': 0, | ||
| '0.25': 1, | ||
| '0.5': 2, | ||
| '1': 4, | ||
| '2': 8, | ||
| '2.5': 10, | ||
| '3': 12, | ||
| '4': 16, | ||
| '5': 20, | ||
| '6': 24, | ||
| '7': 28, | ||
| '8': 32, | ||
| '9': 36, | ||
| '10': 40, | ||
| '11': 44, | ||
| '12': 48, | ||
| '14': 56, | ||
| '16': 64, | ||
| '20': 80, | ||
| '24': 96, | ||
| '28': 152, | ||
| '30': 120, | ||
| '32': 128, | ||
| '36': 144, | ||
| '40': 160, | ||
| '48': 192, | ||
| '52': 208, | ||
| '56': 224, | ||
| '60': 240, | ||
| '64': 256, | ||
| '72': 288, | ||
| '80': 320, | ||
| '96': 384, | ||
| }; | ||
| exports.negativeSpacing = Object.keys(baseSpacing).reduce((acc, key) => (Object.assign(Object.assign({}, acc), { [`-${key}`]: -baseSpacing[key] })), {}); | ||
| exports.breakpoints = { | ||
| xs: 300, | ||
| sm: 400, | ||
| md: 640, | ||
| lg: 960, | ||
| xl: 1200, | ||
| xxl: 1440, | ||
| }; | ||
| exports.borderRadius = { | ||
| lx: 16, | ||
| l: 12, | ||
| lm: 10, | ||
| m: 8, | ||
| ms: 6, | ||
| none: 0, | ||
| xxxs: 1, | ||
| xxs: 2, | ||
| xs: 4, | ||
| sx: 6, | ||
| s: 8, | ||
| ms: 12, | ||
| m: 16, | ||
| lm: 20, | ||
| l: 24, | ||
| lx: 28, | ||
| xl: 32, | ||
| xxl: 48, | ||
| xxxl: 60, | ||
| xxxxl: 240, | ||
| round: 1000, | ||
| s: 4, | ||
| xl: 20, | ||
| xxxxl: 48, | ||
| }; | ||
| exports.negativeSpacing = { | ||
| n_xxxxl: -240, | ||
| n_xxxl: -60, | ||
| n_xxl: -48, | ||
| n_xl: -32, | ||
| n_lx: -28, | ||
| n_l: -24, | ||
| n_lm: -20, | ||
| n_m: -16, | ||
| n_ms: -12, | ||
| n_s: -8, | ||
| n_xs: -4, | ||
| n_xxs: -2, | ||
| n_xxxs: -1, | ||
| }; | ||
| const baseTheme = { | ||
@@ -244,25 +183,6 @@ palette, | ||
| Font: NovaFont, | ||
| darkThemeColors: Object.assign(Object.assign({}, palette), { error: palette.red500, primary: palette.black, primaryBackground: palette.black1000, primaryIcon: palette.black600, primaryText: palette.white, secondary: palette.grey900, secondaryIcon: palette.black300, secondaryText: palette.secondaryText, surface: palette.grey900, surfaceContrast: palette.white, surfaceContrastText: palette.black, surfaceSecondary: palette.black700, surfaceSecondaryText: palette.grey300, surfaceText: palette.white }), | ||
| darkThemeColors: Object.assign({}, palette), | ||
| textVariants, | ||
| borderRadii: { | ||
| lx: 16, | ||
| l: 12, | ||
| lm: 10, | ||
| m: 8, | ||
| ms: 6, | ||
| none: 0, | ||
| round: 1000, | ||
| s: 4, | ||
| xl: 20, | ||
| xxxxl: 48, | ||
| }, | ||
| breakpoints: { | ||
| smallPhone: 0, | ||
| mediumPhone: 376, | ||
| phone: 400, | ||
| tablet: 768, | ||
| md: 900, | ||
| lg: 1100, | ||
| xl: 1536, // large screens | ||
| }, | ||
| borderRadii: exports.borderRadius, | ||
| breakpoints: exports.breakpoints, | ||
| spacing: baseSpacing, | ||
@@ -269,0 +189,0 @@ }; |
| { | ||
| "name": "@novalabsxyz/base-theme", | ||
| "version": "0.1.29", | ||
| "version": "0.1.30-alpha.0", | ||
| "description": "BaseTheme for Novalabs", | ||
@@ -19,3 +19,3 @@ "contributors": [ | ||
| }, | ||
| "gitHead": "34323b681a634daa2216fc5f3e1b9f36f5a42b77" | ||
| "gitHead": "eacc22c5551a4658948840ee80640595528aeb51" | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-31.12%
33452
- Lines of code
- decreased by-39.27%
552
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes