Not yet updated for DMS 2

PageLines DMS References

DMS LESS Documentation includes similar information as demonstrated below (and also lists non-color LESS variables), but you can use the code below on your own site to test all the dynamic color variables.

Test on Your Own Site

  1. Install the TablePress WordPress plugin and the PageLines DMS theme
  2. Import a new TablePress table (in JSON format) from this URL: 
  3. Copy this LESS code into your PageLines custom code area: https://gist.github.com/cliffordp/6116154#file-pagelines-less-color-variables-demo
  4. Create a new page
  5. Use the TablePress shortcode to display this table on your new page
  6. Change your PageLines global color/style colors for your testing purposes.
  7. Refresh your page that displays the table to see how the LESS dynamic colors change (make sure your browser’s cache doesn’t get in the way)

PageLines Color Variables, Demo

LESS VariableExample / DemoDefinition / DescriptionDuplicate of
@pl-base#FFFFFF@white
@pl-text#000000@black
@pl-link#225E9B
@pl-background#FFFFFF@white
@pl-headerRemoved from DMS 2
@pl-footerRemoved from DMS 2
@textColor@pl-text
@textColorAltfadeout(@textColor, 30%)
@textColorSubtlefadeout(@textColor, 40%)
@textColorLightfadeout(@textColor, 70%)
@headerColorDEPRECATEDtextColor
@headerHoverDEPRECATEDtextColorAlt
@linkColor@pl-link
@linkColorHoverfadeout(@linkColor, 30%)
@baseColor@pl-base
@baseLighterlighten(@baseColor, 5%)
@baseLighterMorelighten(@baseColor, 10%)
@baseLighterMostlighten(@baseColor, 15%)
@baseContrastSlightlighten(@baseColor, @invert-light*.4)
@baseDarkerdarken(@baseColor, 5%)@dark-base
@dark-basedarken( @baseColor, @invert-dark )@baseDarker
@baseDarkerMoredarken(@baseColor, 8%)
@light-baselighten( @baseColor, @invert-light ) @baseContrast
@baseContrastlighten(@baseColor, @invert-light)@light-base
@baseContrastDarkdarken(@baseContrast, @invert-dark)
@baseContrastMorelighten(@baseContrast, @invert-light)
@baseContrastDarkMoredarken(@baseContrastDark, @invert-dark)
@black#000
@grayDarker#222
@grayDark#333
@gray#555
@grayLight#999
@grayLighter#eee
@white#fff
@blue#049cdb
@blueDark#0064cd
@green#27Ae60
@red#f04831
@yellow#ffc40d
@orange#f1c844
@pink#c3325f
@purple#7a43b6
@btnBackground#FFFFFF@white
@btnBackgroundHighlightdarken(@btnBackground, 5%)
@btnBorderdarken(@btnBackground, 20%)
@btnPrimaryBackground#1780ff
@btnPrimaryBackgroundHighlightdarken( @btnPrimaryBackground, 8% )
@btnInfoBackground#25b9e7
@btnInfoBackgroundHighlightdarken( @btnInfoBackground, 5% )
@btnSuccessBackground#27ce60
@btnSuccessBackgroundHighlightdarken( @btnSuccessBackground, 8% )
@btnWarningBackground@orange
@btnWarningBackgroundHighlightspin( @btnWarningBackground, -5% )
@btnImportantBackground@red
@btnImportantBackgroundHighlightdarken( @btnImportantBackground, 5% )
@btnInverseBackground@gray
@btnInverseBackgroundHighlight@grayDarker
@HeroHeadingColorRemoved from DMS 2
@HeroLeadColorRemoved from DMS 2
@highlightSubHeadColorfadeout(@pl-text, 60%)
@inputBackground#FFFFFF@white
@inputBorder#CCCCCC
@inputDisabledBackground@grayLighter
@formActionsBackground#f5f5f5
@dropdownBackground@white
@dropdownBorderrgba(0,0,0,.2)
@dropdownDividerTop#e5e5e5
@dropdownDividerBottom@white
@dropdownLinkColor@grayDark
@dropdownLinkColorHover@white
@dropdownLinkColorActive@dropdownLinkColor
@dropdownLinkBackgroundActive@btnPrimaryBackground
@dropdownLinkBackgroundHover@dropdownLinkBackgroundActive
@placeholderTextrgba(0,0,0,.4)
@hrBorder@baseContrastDark
@warningText#453404
@warningBackground#fcf8e3
@warningBorderdarken(spin(@warningBackground, -10), 3%)
@errorText#b94a48
@errorBackground#f2dede
@errorBorderdarken(spin(@errorBackground, -10), 3%)
@successText#468847
@successBackground#dff0d8
@successBorderdarken(spin(@successBackground, -10), 5%)
@infoText#3a87ad
@infoBackground#d9edf7
@infoBorderdarken(spin(@infoBackground, -10), 7%)
@bodyBackground@pl-background
@headingsColorinherit (i.e. empty)@textColor
@tooltipColor#fff
@tooltipBackground#000@black
@tooltipArrowColor@tooltipBackground
@popoverBackground#fff
@popoverArrowColor#fff
@popoverTitleBackgrounddarken(@popoverBackground, 3%)
@popoverArrowOuterColorrgba(0,0,0,.25)

Examples

Here are screenshots of two examples — the default and an opposite of it. Notice how the dynamic color variables differ between the two color schemes.

FYI: TablePress is not LESS-ified, which is why the table header row doesn’t change colors between the two color schemes — an example of the disadvantages of using hard-coded color codes (#d8edf8 in the TablePress header row’s case) instead of dynamic LESS code.

base: #fff, text: #000, link: #225E9B

base: #fff, text: #000, link: #225E9B

base: #000, text: #fff, link: #7AC900

base: #000, text: #fff, link: #7AC900