Theme CSS variables

Updated :

global style name

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

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

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

Site header, Site footer

`--wp--custom--color--banner-bg`	~~rgba(0,0,0,.1)~~
`--wp--custom--color--banner-text`	~~#000000~~

emulsion 3.0.5　廃止

CSS variable	value	global style name
`--wp--preset--color--base-banner`	`#f5f5f5`	Banner Background
`--wp--preset--color--contrast-banner`	`#000000`	Banner Text

emulsion 3.0.5 以降

Sidebar

CSS variable	value	global style name
`--wp--preset--color--base-sidebar`	`#f5f5f5`	Sidebar Background
`--wp--preset--color--contrast-sidebar`	`#000000`	Sidebar Text

emulsion 3.0.5 以降

primary menu

CSS variable	value	global style name
`--wp--preset--color--base-menu-primary`	#fafafa	Primary Menu Background
`--wp--preset--color--contrast-menu-primary`	#000000	Primary Menu Text

emulsion 3.0.5 以降

border color

CSS variable	value	global style name
`--wp--preset--color--border-color`	#cccccc	Border Color

emulsion 3.0.5 以降

Comments

--wp--custom--color--comments-bg rgba(0,0,0,.1)

relate post

--wp--custom--color--relate-posts-bg rgba(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

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

`--wp--custom--width--aligncenter`	32.5rem (520px)
`--wp--custom--width--float`	calc(50% – 1.5rem)
`--wp--custom--width--thumbnail-float`	calc(50% – 1.5rem – 182px)
`--wp--custom--width--content`	45rem (720px)
`--wp--custom--width--wide`	57.5rem (920px)
`--wp--custom--width--full`	100%
`--wp--custom--width--sidebar`	25rem (400px)
`--wp--custom--width--limit`	100rem (1600px)

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--monospace`	Menlo, 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--rye`	Rye,sans-serif
`--wp--preset--font-family--yomogi`	yomogi,”Comic Sans MS”, cursive

Line height

`--wp--custom--line-height--common`	1.5
`--wp--custom--line-height--meta`	1.5
`--wp--custom--line-height--heading`	1.15

Font weight

`--wp--custom--font-weight--common`	400
`--wp--custom--font-weight--meta`	400
`--wp--custom--font-weight--heading`	700

Text transform

`--wp--custom--text-transform--common`	none
`--wp--custom--text-transform--meta`	none
`--wp--custom--text-transform--heading`	uppercase

Margin

`--wp--custom--margin--top`	~~1.5rem~~ 1.5vw(v3.0.8) Reason for change: Vertically responsive
`--wp--custom--margin--right`	auto
`--wp--custom--margin--bottom`	~~1.5rem~~ 1.5vw(v3.0.8) Reason for change: Vertically responsive
`--wp--custom--margin--left`	auto
`--wp--custom--margin--block`	~~1.5rem auto~~ 1.5vw auto
`--wp--custom--margin--container`	0 auto
`--wp--custom--margin--alignleft`	.75rem .75rem .75rem .75rem
`--wp--custom--margin--alignright`	.75rem .75rem .75rem .75rem
`--wp--custom--margin--start-content`	max(1px, var(–wp–custom–margin–start-content));
`--wp--custom--margin--start-wide`	max(1px, var(–wp–custom–margin–start-wide));
`--wp--custom--margin--gap`	.75rem

Padding

`--wp--custom--padding--top`	0
`--wp--custom--padding--right`	0.75rem
`--wp--custom--padding--bottom`	0
`--wp--custom--padding--left`	0.75rem
`--wp--custom--padding--content`	0.75rem
`--wp--custom--padding--block`	0 1.5rem
`--wp--custom--padding--container`	0
`--wp--preset--spacing--40`	0.75rem
`--wp--preset--spacing--50`	1.5rem
`--wp--preset--spacing--60`	2.25rem
`--wp--preset--spacing--70`	3rem

`--wp--custom--border--common-style`	solid
`--wp--custom--border--common-color` emulsion 3.0.5　廃止 `--wp--preset--color--border-color` を使用してください	~~#ccc~~
`--wp--custom--border--common-width`	1px
`--wp--custom--border--radius`	5px
`--wp--custom--border--common`	`var(--wp--custom--border--common-width) var(--wp--custom--border--common-style) var(--wp--preset--color--border-color)`

excerpt

--wp--custom--max-height--excerpt-lines 4

概要文の表示行数

Featured image

--wp--custom--color--featured-image-bg rgba(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--default`	2rem

Table

Mixed colors when stripes are specified in block style variations

--wp--custom--color--stripe rgba(0,0,0,.1)

Color pallets

Style variations rewrite this palette.

CSS variable	value	global style name	Note
`--wp--preset--color--base`	#ffffff	Base	background color
`--wp--preset--color--contrast`	#000000	Contrast	text color
`--wp--preset--color--primary`	#333333	Primary	link color
`--wp--preset--color--secondary`	#a22041	Secondary	link hover
`--wp--preset--color--tertiary`	#8ea729	Tertiary
`--wp--preset--color--complementary`	#160385	Complementary

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

CSS variable	value	global style name
`--wp--preset--color--base-banner`	#f5f5f5	Banner Background
`--wp--preset--color--contrast-banner`	#000000	Banner Text
`--wp--preset--color--base-sidebar`	#f5f5f5	Sidebar Background
`--wp--preset--color--contrast-sidebar`	#000000	Sidebar Text
`--wp--preset--color--base-menu-primary`	#fafafa	Primary Menu Background
`--wp--preset--color--contrast-menu-primary`	#000000	Primary Menu Text
`--wp--preset--color--border-color`	#cccccc	Border 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

Min height

`--wp--custom--min-height--default`	0
`--wp--custom--min-height--eighth`	12.5vh
`--wp--custom--min-height--quarter`	25vh
`--wp--custom--min-height--harf`	50vh
`--wp--custom--min-height--3-quarters`	75vh
`--wp--custom--min-height--full`	100vh

Max height

`--wp--custom--max-height--default`	0
`--wp--custom--max-height--eighth`	12.5vh
`--wp--custom--max-height--quarter`	25vh
`--wp--custom--max-height--harf`	50vh
`--wp--custom--max-height--3-quarters`	75vh
`--wp--custom--max-height--full`	100vh
`--wp--custom--max-height--post-featured-image`	75vh
`--wp--custom--max-height--excerpt-lines`	4

Unordered list marker

`--wp--custom--marker--ul-list-style`	disc
`--wp--custom--marker--ul-content`	unset
`--wp--custom--marker--color`	var(–wp–preset–color–contrast)

emulsion 2.8.8~

Additional CSS

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

`--wp--preset--font-size--small`	0.8125rem (13px)
`--wp--preset--font-size--normal`	1rem (16px)
`--wp--preset--font-size--medium`	1.25rem (20px)
`--wp--preset--font-size--large`	1.5rem (24px)
`--wp--preset--font-size--extra-large`	2rem (32px)
`--wp--preset--font-size--x-large`	2.625rem(42px)
`--wp--preset--font-size--huge`	3rem (48px)

`--wp--preset--font-size--small`	0.8125rem (13px) calc( var(–wp–custom–font–sccale–small) * 1rem)
`--wp--preset--font-size--normal`	1rem (16px) calc( var(–wp–custom–font–sccale–normal) * 1rem)
`--wp--preset--font-size--medium`	1.25rem (20px) calc( var(–wp–custom–font–sccale–medium) * 1rem)
`--wp--preset--font-size--large`	1.5rem (24px) calc( var(–wp–custom–font–sccale–large) * 1rem)
`--wp--preset--font-size--extra-large`	2rem (32px) calc( var(–wp–custom–font–sccale–extra-large) * 1rem)
`--wp--preset--font-size--x-large`	2.625rem(42px) calc( var(–wp–custom–font–sccale–x-large) * 1rem)
`--wp--preset--font-size--huge`	3rem (48px) calc( var(–wp–custom–font–sccale–huge) * 1rem)

color

global style name

Site header, Site footer

Sidebar

primary menu

border color

Comments

relate post

Unknown Background Color

Dark Mode background color

Width

fonts

Font size

Font family

Line height

Font weight

Text transform

spacing

Margin

Padding

Border

blocks

excerpt

Featured image

Button

Block code

Table

pallets

Color pallets

Color Palette
Heading,
Paragraph,
group,
button

height

Min height

Max height

marker

color

global style name

Site header, Site footer

Sidebar

primary menu

border color

Comments

relate post

Unknown Background Color

Dark Mode background color

Width

fonts

Font size

Font family

Line height

Font weight

Text transform

spacing

Margin

Padding

Border

blocks

excerpt

Featured image

Button

Block code

Table

pallets

Color pallets

Color PaletteHeading, Paragraph,group,button

height

Min height

Max height

marker

Color Palette
Heading,
Paragraph,
group,
button