Theme CSS variables

tenman

,

Updated :

emulsion theme theme.jsonで定義されているデフォルト値 一覧
emulsion 2.7.6 +

color

global style name

この名前がある場合、グローバルスタイルパレットの編集で、ヘッダーやサイドバーの色を変更する事ができるようになりました　emulsion 3.0.5～

パレットカラーの変更は、ブロックテンプレート　クラッシックテンプレートすべてのテンプレートに変更が反映します。

ブロックテンプレートを使用して、サイトエディタテンプレート編集サイドバーの色変更を行った場合は、テンプレートで指定した色が優先します。

--wp--custom--color--banner-bgrgba(0,0,0,.1)
--wp--custom--color--banner-text#000000
emulsion 3.0.5　廃止
CSS variablevalueglobal style name
--wp--preset--color--base-banner#f5f5f5Banner Background
--wp--preset--color--contrast-banner#000000Banner Text
emulsion 3.0.5 以降

Sidebar

CSS variablevalueglobal style name
--wp--preset--color--base-sidebar#f5f5f5Sidebar Background
--wp--preset--color--contrast-sidebar#000000Sidebar Text
emulsion 3.0.5 以降

primary menu

CSS variablevalueglobal style name
--wp--preset--color--base-menu-primary#fafafaPrimary Menu Background
--wp--preset--color--contrast-menu-primary#000000Primary Menu Text
emulsion 3.0.5 以降

border color

CSS variablevalueglobal style name
--wp--preset--color--border-color#ccccccBorder Color
emulsion 3.0.5 以降

Comments

--wp--custom--color--comments-bgrgba(0,0,0,.1)

relate post

--wp--custom--color--relate-posts-bgrgba(0,0,0,.15)

Unknown Background Color

--wp--custom--color--unknown-bg#f8f8ff
別のテーマなどで設定した色をテーマ内で適用できない場合に代替として使用される色

Dark Mode background color

--wp--custom--color--dark-mode-bg#1b262c
ダークモードが有効な場合の背景色　dark mode – Emulsion Theme

Width

emulsion 2.7.6 Units have been unified to rem except for some properties such as borders

--wp--custom--width--aligncenter32.5rem (520px)
--wp--custom--width--floatcalc(50% – 1.5rem)
--wp--custom--width--thumbnail-floatcalc(50% – 1.5rem – 182px)
--wp--custom--width--content45rem (720px)
--wp--custom--width--wide57.5rem (920px)
--wp--custom--width--full100%
--wp--custom--width--sidebar25rem (400px)
--wp--custom--width--limit100rem (1600px)

fonts

Font size

You can make simple adjustments by changing the root font size without having to fine-tune each one individually.

Example

:root{
	font-size:20px;
}

ver 3.0.7

--wp--preset--font-size--small0.8125rem (13px)
--wp--preset--font-size--normal1rem (16px)
--wp--preset--font-size--medium1.25rem (20px)
--wp--preset--font-size--large1.5rem (24px)
--wp--preset--font-size--extra-large2rem (32px)
--wp--preset--font-size--x-large2.625rem(42px)
--wp--preset--font-size--huge3rem (48px)

ver 3.0.8-

--wp--preset--font-size--small0.8125rem (13px)
calc( var(–wp–custom–font–sccale–small) * 1rem)
--wp--preset--font-size--normal1rem (16px)
calc( var(–wp–custom–font–sccale–normal) * 1rem)
--wp--preset--font-size--medium1.25rem (20px)
calc( var(–wp–custom–font–sccale–medium) * 1rem)
--wp--preset--font-size--large1.5rem (24px)
calc( var(–wp–custom–font–sccale–large) * 1rem)
--wp--preset--font-size--extra-large2rem (32px)
calc( var(–wp–custom–font–sccale–extra-large) * 1rem)
--wp--preset--font-size--x-large2.625rem(42px)
calc( var(–wp–custom–font–sccale–x-large) * 1rem)
--wp--preset--font-size--huge3rem (48px)
calc( var(–wp–custom–font–sccale–huge) * 1rem)

Font family

--wp--preset--font-family--system-font-apple-system,BlinkMacSystemFont,”Segoe
 UI”,Roboto,Oxygen-Sans,Ubuntu,Cantarell,”Helvetica Neue”,sans-serif;
--wp--preset--font-family--heading“Hoefler Text”,”Baskerville Old Face”,Garamond,”Times New Roman”,serif;
--wp--preset--font-family--serif“Hoefler Text”,”Baskerville Old Face”,Garamond,”Times New Roman”,serif
--wp--preset--font-family--monospaceMenlo, Consolas, “DejaVu Sans Mono”, monospace
--wp--preset--font-family--dancing-script“Dancing Script”,”Comic Sans MS”, cursive
--wp--preset--font-family--yu-gothic“Segoe UI”,”Yu Gothic Medium”,”YuGothic”,”Hiragino Kaku Gothic Pro”,”San Francisco”,Roboto, sans-serif
--wp--preset--font-family--ryeRye,sans-serif
--wp--preset--font-family--yomogiyomogi,”Comic Sans MS”, cursive

Line height

--wp--custom--line-height--common1.5
--wp--custom--line-height--meta1.5
--wp--custom--line-height--heading1.15

Font weight

--wp--custom--font-weight--common400
--wp--custom--font-weight--meta400
--wp--custom--font-weight--heading700

Text transform

--wp--custom--text-transform--commonnone
--wp--custom--text-transform--metanone
--wp--custom--text-transform--headinguppercase

spacing

Margin

--wp--custom--margin--top1.5rem 1.5vw(v3.0.8)
Reason for change: Vertically responsive
--wp--custom--margin--rightauto
--wp--custom--margin--bottom1.5rem 1.5vw(v3.0.8)
Reason for change: Vertically responsive
--wp--custom--margin--leftauto
--wp--custom--margin--block1.5rem auto 1.5vw auto
--wp--custom--margin--container0 auto
--wp--custom--margin--alignleft.75rem .75rem .75rem .75rem
--wp--custom--margin--alignright.75rem .75rem .75rem .75rem
--wp--custom--margin--start-contentmax(1px, var(–wp–custom–margin–start-content));
--wp--custom--margin--start-widemax(1px, var(–wp–custom–margin–start-wide));
--wp--custom--margin--gap.75rem

Padding

--wp--custom--padding--top0
--wp--custom--padding--right0.75rem
--wp--custom--padding--bottom0
--wp--custom--padding--left0.75rem
--wp--custom--padding--content0.75rem
--wp--custom--padding--block0 1.5rem
--wp--custom--padding--container0
--wp--preset--spacing--400.75rem
--wp--preset--spacing--501.5rem
--wp--preset--spacing--602.25rem
--wp--preset--spacing--703rem

Border

--wp--custom--border--common-stylesolid
--wp--custom--border--common-color
emulsion 3.0.5　廃止
--wp--preset--color--border-color を使用してください
#ccc
--wp--custom--border--common-width1px
--wp--custom--border--radius5px
--wp--custom--border--commonvar(--wp--custom--border--common-width) var(--wp--custom--border--common-style) var(--wp--preset--color--border-color)

blocks

excerpt

--wp--custom--max-height--excerpt-lines4
概要文の表示行数
--wp--custom--color--featured-image-bgrgba(0,0,0,.05)

Button

--wp--custom--color--button-bg#32373c
--wp--custom--color--button-text#ffffff

Block code

--wp--custom--color--code-tag-bg#f8f8ff
--wp--custom--color--code-tag-text#000000
--wp--custom--tab-size--default2rem

Table

Mixed colors when stripes are specified in block style variations

--wp--custom--color--stripergba(0,0,0,.1)

pallets

Color pallets

Style variations rewrite this palette.

CSS variablevalueglobal style nameNote
--wp--preset--color--base#ffffffBasebackground color
--wp--preset--color--contrast#000000Contrasttext color
--wp--preset--color--primary#333333Primarylink color
--wp--preset--color--secondary#a22041Secondarylink hover
--wp--preset--color--tertiary#8ea729Tertiary
--wp--preset--color--complementary#160385Complementary

emulsion 3.0.5 で以下の設定を追加しました。

CSS variablevalueglobal style name
--wp--preset--color--base-banner#f5f5f5Banner Background
--wp--preset--color--contrast-banner#000000Banner Text
--wp--preset--color--base-sidebar#f5f5f5Sidebar Background
--wp--preset--color--contrast-sidebar#000000Sidebar Text
--wp--preset--color--base-menu-primary#fafafaPrimary Menu Background
--wp--preset--color--contrast-menu-primary#000000Primary Menu Text
--wp--preset--color--border-color#ccccccBorder Color
emulsion 3.0.5 以降

Color Palette
Heading,
Paragraph,
group,
button

--wp--preset--color--emulsion-black#000000
--wp--preset--color--emulsion-white#ffffff
--wp--preset--color--emulsion-muted#ecf0f1
--wp--preset--color--emulsion-alert#ED4F32
--wp--preset--color--emulsion-warning#EDE04D
--wp--preset--color--emulsion-notice#4bb1cf

height

Min height

--wp--custom--min-height--default0
--wp--custom--min-height--eighth12.5vh
--wp--custom--min-height--quarter25vh
--wp--custom--min-height--harf50vh
--wp--custom--min-height--3-quarters75vh
--wp--custom--min-height--full100vh

Max height

--wp--custom--max-height--default0
--wp--custom--max-height--eighth12.5vh
--wp--custom--max-height--quarter25vh
--wp--custom--max-height--harf50vh
--wp--custom--max-height--3-quarters75vh
--wp--custom--max-height--full100vh
--wp--custom--max-height--post-featured-image75vh
--wp--custom--max-height--excerpt-lines4

marker

Unordered list marker

--wp--custom--marker--ul-list-styledisc
--wp--custom--marker--ul-contentunset
--wp--custom--marker--colorvar(–wp–preset–color–contrast)
emulsion 2.8.8~

Additional CSS

body{
--wp--custom--marker--ul-content:"\2713";
}
[emulsion_relate_posts]