Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@blockle/blocks-builder
Advanced tools
@blockle/blocks-builder - npm Package Compare versions
Comparing version 0.0.2-alpha.0 to 0.0.2-alpha.1
| "use strict"; | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| exports.createTheme = void 0; | ||
| const utils_1 = require("./utils"); | ||
| exports.createTheme = ({ breakpoints, spacing, typography, colors, }) => { | ||
@@ -156,154 +157,9 @@ return { | ||
| }, | ||
| padding: { | ||
| gutter: { | ||
| padding: spacing.gutter, | ||
| }, | ||
| xsmall: { | ||
| padding: spacing.xsmall, | ||
| }, | ||
| small: { | ||
| padding: spacing.small, | ||
| }, | ||
| medium: { | ||
| padding: spacing.medium, | ||
| }, | ||
| large: { | ||
| padding: spacing.large, | ||
| }, | ||
| xlarge: { | ||
| padding: spacing.xlarge, | ||
| }, | ||
| }, | ||
| paddingBottom: { | ||
| gutter: { | ||
| 'padding-bottom': spacing.gutter, | ||
| }, | ||
| xsmall: { | ||
| 'padding-bottom': spacing.xsmall, | ||
| }, | ||
| small: { | ||
| 'padding-bottom': spacing.small, | ||
| }, | ||
| medium: { | ||
| 'padding-bottom': spacing.medium, | ||
| }, | ||
| large: { | ||
| 'padding-bottom': spacing.large, | ||
| }, | ||
| xlarge: { | ||
| 'padding-bottom': spacing.xlarge, | ||
| }, | ||
| }, | ||
| paddingLeft: { | ||
| gutter: { | ||
| 'padding-left': spacing.gutter, | ||
| }, | ||
| xsmall: { | ||
| 'padding-left': spacing.xsmall, | ||
| }, | ||
| small: { | ||
| 'padding-left': spacing.small, | ||
| }, | ||
| medium: { | ||
| 'padding-left': spacing.medium, | ||
| }, | ||
| large: { | ||
| 'padding-left': spacing.large, | ||
| }, | ||
| xlarge: { | ||
| 'padding-left': spacing.xlarge, | ||
| }, | ||
| }, | ||
| paddingRight: { | ||
| gutter: { | ||
| 'padding-right': spacing.gutter, | ||
| }, | ||
| xsmall: { | ||
| 'padding-right': spacing.xsmall, | ||
| }, | ||
| small: { | ||
| 'padding-right': spacing.small, | ||
| }, | ||
| medium: { | ||
| 'padding-right': spacing.medium, | ||
| }, | ||
| large: { | ||
| 'padding-right': spacing.large, | ||
| }, | ||
| xlarge: { | ||
| 'padding-right': spacing.xlarge, | ||
| }, | ||
| }, | ||
| paddingTop: { | ||
| gutter: { | ||
| 'padding-top': spacing.gutter, | ||
| }, | ||
| xsmall: { | ||
| 'padding-top': spacing.xsmall, | ||
| }, | ||
| small: { | ||
| 'padding-top': spacing.small, | ||
| }, | ||
| medium: { | ||
| 'padding-top': spacing.medium, | ||
| }, | ||
| large: { | ||
| 'padding-top': spacing.large, | ||
| }, | ||
| xlarge: { | ||
| 'padding-top': spacing.xlarge, | ||
| }, | ||
| }, | ||
| paddingX: { | ||
| gutter: { | ||
| 'padding-left': spacing.gutter, | ||
| 'padding-right': spacing.gutter, | ||
| }, | ||
| xsmall: { | ||
| 'padding-left': spacing.xsmall, | ||
| 'padding-right': spacing.xsmall, | ||
| }, | ||
| small: { | ||
| 'padding-left': spacing.small, | ||
| 'padding-right': spacing.small, | ||
| }, | ||
| medium: { | ||
| 'padding-left': spacing.medium, | ||
| 'padding-right': spacing.medium, | ||
| }, | ||
| large: { | ||
| 'padding-left': spacing.large, | ||
| 'padding-right': spacing.large, | ||
| }, | ||
| xlarge: { | ||
| 'padding-left': spacing.xlarge, | ||
| 'padding-right': spacing.xlarge, | ||
| }, | ||
| }, | ||
| paddingY: { | ||
| gutter: { | ||
| 'padding-top': spacing.gutter, | ||
| 'padding-bottom': spacing.gutter, | ||
| }, | ||
| xsmall: { | ||
| 'padding-top': spacing.xsmall, | ||
| 'padding-bottom': spacing.xsmall, | ||
| }, | ||
| small: { | ||
| 'padding-top': spacing.small, | ||
| 'padding-bottom': spacing.small, | ||
| }, | ||
| medium: { | ||
| 'padding-top': spacing.medium, | ||
| 'padding-bottom': spacing.medium, | ||
| }, | ||
| large: { | ||
| 'padding-top': spacing.large, | ||
| 'padding-bottom': spacing.large, | ||
| }, | ||
| xlarge: { | ||
| 'padding-top': spacing.xlarge, | ||
| 'padding-bottom': spacing.xlarge, | ||
| }, | ||
| }, | ||
| padding: utils_1.createProp(spacing, (value) => ({ padding: value })), | ||
| paddingBottom: utils_1.createProp(spacing, (value) => ({ 'padding-bottom': value })), | ||
| paddingLeft: utils_1.createProp(spacing, (value) => ({ 'padding-left': value })), | ||
| paddingRight: utils_1.createProp(spacing, (value) => ({ 'padding-right': value })), | ||
| paddingTop: utils_1.createProp(spacing, (value) => ({ 'padding-top': value })), | ||
| paddingX: utils_1.createProp(spacing, (value) => ({ 'padding-left': value, 'padding-right': value })), | ||
| paddingY: utils_1.createProp(spacing, (value) => ({ 'padding-top': value, 'padding-bottom': value })), | ||
| position: { | ||
@@ -367,111 +223,7 @@ relative: { | ||
| }, | ||
| color: { | ||
| primary: { | ||
| color: colors.primary, | ||
| }, | ||
| secondary: { | ||
| color: colors.secondary, | ||
| }, | ||
| success: { | ||
| color: colors.success, | ||
| }, | ||
| warning: { | ||
| color: colors.warning, | ||
| }, | ||
| black: { | ||
| color: colors.black, | ||
| }, | ||
| white: { | ||
| color: colors.white, | ||
| }, | ||
| gray: { | ||
| color: colors.gray, | ||
| }, | ||
| }, | ||
| backgroundColor: { | ||
| card: { | ||
| 'background-color': 'var(--background-card, #fff)', | ||
| }, | ||
| primary: { | ||
| 'background-color': colors.primary, | ||
| }, | ||
| secondary: { | ||
| 'background-color': colors.secondary, | ||
| }, | ||
| success: { | ||
| 'background-color': colors.success, | ||
| }, | ||
| warning: { | ||
| 'background-color': colors.warning, | ||
| }, | ||
| black: { | ||
| 'background-color': colors.black, | ||
| }, | ||
| white: { | ||
| 'background-color': colors.white, | ||
| }, | ||
| gray: { | ||
| 'background-color': colors.gray, | ||
| }, | ||
| }, | ||
| gridGap: { | ||
| gutter: { | ||
| 'grid-gap': spacing.gutter, | ||
| }, | ||
| xsmall: { | ||
| 'grid-gap': spacing.xsmall, | ||
| }, | ||
| small: { | ||
| 'grid-gap': spacing.small, | ||
| }, | ||
| medium: { | ||
| 'grid-gap': spacing.medium, | ||
| }, | ||
| large: { | ||
| 'grid-gap': spacing.large, | ||
| }, | ||
| xlarge: { | ||
| 'grid-gap': spacing.xlarge, | ||
| }, | ||
| }, | ||
| negativeMarginTop: { | ||
| gutter: { | ||
| 'margin-top': `calc(${spacing.gutter} * -1)`, | ||
| }, | ||
| xsmall: { | ||
| 'margin-top': `calc(${spacing.xsmall} * -1)`, | ||
| }, | ||
| small: { | ||
| 'margin-top': `calc(${spacing.small} * -1)`, | ||
| }, | ||
| medium: { | ||
| 'margin-top': `calc(${spacing.medium} * -1)`, | ||
| }, | ||
| large: { | ||
| 'margin-top': `calc(${spacing.large} * -1)`, | ||
| }, | ||
| xlarge: { | ||
| 'margin-top': `calc(${spacing.xlarge} * -1)`, | ||
| }, | ||
| }, | ||
| negativeMarginLeft: { | ||
| gutter: { | ||
| 'margin-left': `calc(${spacing.gutter} * -1)`, | ||
| }, | ||
| xsmall: { | ||
| 'margin-left': `calc(${spacing.xsmall} * -1)`, | ||
| }, | ||
| small: { | ||
| 'margin-left': `calc(${spacing.small} * -1)`, | ||
| }, | ||
| medium: { | ||
| 'margin-left': `calc(${spacing.medium} * -1)`, | ||
| }, | ||
| large: { | ||
| 'margin-left': `calc(${spacing.large} * -1)`, | ||
| }, | ||
| xlarge: { | ||
| 'margin-left': `calc(${spacing.xlarge} * -1)`, | ||
| }, | ||
| }, | ||
| color: utils_1.createProp(colors, (value) => ({ color: value })), | ||
| backgroundColor: utils_1.createProp(colors, (value) => ({ 'background-color': value })), | ||
| gridGap: utils_1.createProp(spacing, (value) => ({ 'grid-gap': value })), | ||
| negativeMarginTop: utils_1.createProp(spacing, (value) => ({ 'margin-top': `calc(${value} * -1)` })), | ||
| negativeMarginLeft: utils_1.createProp(spacing, (value) => ({ 'margin-left': `calc(${value} * -1)` })), | ||
| }, | ||
@@ -478,0 +230,0 @@ }; |
@@ -1,2 +0,2 @@ | ||
| export interface BlockleSpacing { | ||
| export interface Spacing { | ||
| gutter: string | number; | ||
@@ -17,9 +17,3 @@ xsmall: string | number; | ||
| export interface Colors { | ||
| primary: string; | ||
| secondary: string; | ||
| success: string; | ||
| warning: string; | ||
| black: string; | ||
| white: string; | ||
| gray: string; | ||
| [key: string]: string; | ||
| } | ||
@@ -36,3 +30,3 @@ export interface BlockleStyle { | ||
| colors: Colors; | ||
| spacing: BlockleSpacing; | ||
| spacing: Spacing; | ||
| typography: Typography; | ||
@@ -39,0 +33,0 @@ } |
| { | ||
| "name": "@blockle/blocks-builder", | ||
| "version": "0.0.2-alpha.0", | ||
| "version": "0.0.2-alpha.1", | ||
| "main": "dist/index.js", | ||
@@ -5,0 +5,0 @@ "types": "dist/index.d.ts", |
@@ -7,2 +7,40 @@ # @blockle/blocks-builder | ||
| yarn add --dev @blockle/blocks-builder | ||
| ``` | ||
| ``` | ||
| ## Usage | ||
| ```ts | ||
| import { createTheme, writeCSS, writeTS } from '@blockle/blocks/builder'; | ||
| const theme = createTheme({ | ||
| breakpoints: [0, 500, 800], | ||
| spacing: { | ||
| gutter: 'var(--space-gutter)', | ||
| xsmall: 'var(--space-xsmall)', | ||
| small: 'var(--space-small)', | ||
| medium: 'var(--space-medium)', | ||
| large: 'var(--space-large)', | ||
| xlarge: 'var(--space-xlarge)', | ||
| }, | ||
| typography: { | ||
| xsmall: 'var(--font-xsmall)', | ||
| small: 'var(--font-small)', | ||
| medium: 'var(--font-medium)', | ||
| large: 'var(--font-large)', | ||
| xlarge: 'var(--font-xlarge)', | ||
| }, | ||
| colors: { | ||
| danger: 'var(--color-danger)', | ||
| dark: 'var(--color-dark)', | ||
| info: 'var(--color-info)', | ||
| light: 'var(--color-light)', | ||
| primary: 'var(--color-primary)', | ||
| secondary: 'var(--color-secondary)', | ||
| success: 'var(--color-success)', | ||
| warning: 'var(--color-warning)', | ||
| }, | ||
| }); | ||
| writeCSS('./src/useStyles/blockle-blocks.css', theme); | ||
| writeTS('./src/useStyles/blocks.ts', theme); | ||
| ``` |
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
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
Improved metrics
- Number of package files
- increased by16.67%
21
- Number of lines in readme file
- increased by557.14%
46
Worsened metrics
- Total package byte prevSize
- decreased by-26.67%
24627
- Lines of code
- decreased by-38.93%
378
No dependency changes