Skip to content

Instantly share code, notes, and snippets.

@sergiu-radu
Last active May 8, 2024 12:13
Show Gist options
  • Save sergiu-radu/e0c8fe3791ec69b6890f0f651ae83c24 to your computer and use it in GitHub Desktop.
Save sergiu-radu/e0c8fe3791ec69b6890f0f651ae83c24 to your computer and use it in GitHub Desktop.
Blocksy CSS Variables
--paletteColor1 -----> --theme-palette-color-1
--paletteColor2 -----> --theme-palette-color-2
--paletteColor3 -----> --theme-palette-color-3
--paletteColor4 -----> --theme-palette-color-4
--paletteColor5 -----> --theme-palette-color-5
--paletteColor6 -----> --theme-palette-color-6
--paletteColor7 -----> --theme-palette-color-7
--paletteColor8 -----> --theme-palette-color-8
--fontFamily -----> --theme-font-family
--fontSize -----> --theme-font-size
--fontWeight -----> --theme-font-weight
--fontStyle -----> --theme-font-style
--lineHeight -----> --theme-line-height
--letterSpacing -----> --theme-letter-spacing
--textTransform -----> --theme-text-transform
--textDecoration -----> --theme-text-decoration
--buttonFontFamily -----> --theme-button-font-family
--buttonFontSize -----> --theme-button-font-size
--buttonFontWeight -----> --theme-button-font-weight
--buttonFontStyle -----> --theme-button-font-style
--buttonLineHeight -----> --theme-button-line-height
--buttonLetterSpacing -----> --theme-button-letter-spacing
--buttonTextTransform -----> --theme-button-text-transform
--buttonTextDecoration -----> --theme-button-text-decoration
--color -----> --theme-text-color
--linkInitialColor -----> --theme-link-initial-color
--linkHoverColor -----> --theme-link-hover-color
--linkActiveColor -----> --theme-link-active-color
--selectionTextColor -----> --theme-selection-text-color
--selectionBackgroundColor -----> --theme-selection-background-color
--buttonMinHeight -----> --theme-button-min-height
--button-width -----> --theme-button-max-width
--buttonShadow -----> --theme-button-shadow
--buttonTransform -----> --theme-button-transform
--buttonTextInitialColor -----> --theme-button-text-initial-color
--buttonTextHoverColor -----> --theme-button-text-hover-color
--buttonInitialColor -----> --theme-button-background-initial-color
--buttonHoverColor -----> --theme-button-background-hover-color
--button-border -----> --theme-button-border
--button-border-hover-color -----> --theme-button-border-hover-color
--buttonBorderRadius -----> --theme-button-border-radius
--button-padding -----> --theme-button-padding
--form-font-size -----> --theme-form-font-size
--form-field-width -----> --theme-form-field-width
--form-field-height -----> --theme-form-field-height
--form-field-padding -----> --theme-form-field-padding
--form-field-border-width -----> --theme-form-field-border-width
--form-field-border-style -----> --theme-form-field-border-style
--form-text-initial-color -----> --theme-form-text-initial-color
--form-text-focus-color -----> --theme-form-text-focus-color
--form-field-border-initial-color -----> --theme-form-field-border-initial-color
--form-field-border-focus-color -----> --theme-form-field-border-focus-color
--form-field-border-radius -----> --theme-form-field-border-radius
--form-field-initial-background -----> --theme-form-field-background-initial-color
--form-field-focus-background -----> --theme-form-field-background-focus-color
--form-field-select-initial-background -----> --theme-form-select-background-initial-color
--form-field-select-active-background -----> --theme-form-select-background-active-color
--form-checkbox-border-radius -----> --theme-form-checkbox-border-radius
--form-selection-control-initial-color -----> --theme-form-selection-field-initial-color
--form-selection-control-accent-color -----> --theme-form-selection-field-active-color
--headings-color -----> --theme-headings-color
--heading-color -----> --theme-heading-color
--heading-1-color -----> --theme-heading-1-color
--heading-2-color -----> --theme-heading-2-color
--heading-3-color -----> --theme-heading-3-color
--heading-4-color -----> --theme-heading-4-color
--heading-5-color -----> --theme-heading-5-color
--heading-6-color -----> --theme-heading-6-color
--box-shadow -----> --theme-box-shadow
--border-color -----> --theme-border-color
--borderRadius -----> --theme-border-radius
--border -----> --theme-border
--borderTop -----> --theme-border-top
--borderBottom -----> --theme-border-bottom
--wide-offset -----> --theme-wide-offset
--content-spacing -----> --theme-content-spacing
--has-content-spacing -----> --has-theme-content-spacing
--boxed-content-spacing -----> --theme-boxed-content-spacing
--content-vertical-spacing -----> --theme-content-vertical-spacing
--container-edge-spacing -----> --theme-container-edge-spacing
--container-width -----> --theme-container-width
--container-width-base -----> --theme-container-width-base
--normal-container-max-width -----> --theme-normal-container-max-width
--narrow-container-max-width -----> --theme-narrow-container-max-width
--frame-size -----> --theme-frame-size
--frame-color -----> --theme-frame-color
--block-width -----> --theme-block-width
--block-max-width -----> --theme-block-max-width
--block-wide-max-width -----> --theme-block-wide-max-width
--boxed-content-max-width -----> --theme-boxed-content-max-width
--listIndent -----> --theme-list-indent
--listStyleType -----> --theme-list-style-type
--listItemSpacing -----> --theme-list-items-spacing
--descListIndent -----> --theme-description-list-indent
--descListSpacing -----> --theme-description-list-spacing
--table-font-size -----> --theme-table-font-size
--table-border-width -----> --theme-table-border-width
--table-border-style -----> --theme-table-border-style
--table-border-color -----> --theme-table-border-color
--table-padding -----> --theme-table-padding
--transition -----> --theme-transition
--default-editor -----> --theme-default-editor
--icon-size -----> --theme-icon-size
--icon-color -----> --theme-icon-color
--icon-hover-color -----> --theme-icon-hover-color
--icon-focus-color -----> --theme-icon-focus-color
--icon-active-color -----> --theme-icon-active-color
--icon-transition -----> --theme-icon-transition
--object-fit -----> --theme-object-fit
--object-position -----> --theme-object-position
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment