Class: Metanorma::Html::Theme

Inherits:
Object
  • Object
show all
Defined in:
lib/metanorma/html/theme.rb

Instance Attribute Summary collapse

Instance Method Summary collapse

Constructor Details

#initialize ⇒ Theme

Returns a new instance of Theme.



48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
 
# File 'lib/metanorma/html/theme.rb', line 48

def initialize
  @primary        = "#28388A"
  @accent         = "#9C60C1"
  @gradient       = "linear-gradient(135deg, #28388A 0%, #3a4ba0 50%, #9C60C1 100%)"
  @primary_light  = "#eef0f8"
  @accent_light   = "#f5eef9"
  @primary_dark   = "#1c2660"
  @accent_deep    = nil
  @warm           = nil
  @warm_light     = nil
  @text_color     = "#1a1a2e"
  @text_light     = "#4a4a6a"
  @text_muted     = "#8888a0"
  @bg             = "#fff"
  @bg_light       = "#fafbff"
  @border         = "#e0e2ee"
  @sidebar_bg     = "#f7f7fc"
  @font_body      = '"Source Serif 4", "Noto Serif", Georgia, "Times New Roman", serif'
  @font_sans      = '"DM Sans", "Helvetica Neue", Arial, sans-serif'
  @font_mono      = '"JetBrains Mono", "Fira Code", "Courier New", monospace'
  @font_url       = "https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..700&family=JetBrains+Mono:wght@400;500&display=swap"
  @content_max_width = "50em"
  @sidebar_width     = "260px"
  @header_height     = "52px"
  @radius_sm = "4px"
  @radius_md = "8px"
  @shadow_sm = "0 1px 3px rgba(40,56,138,0.08)"
  @shadow_md = "0 4px 12px rgba(40,56,138,0.12)"

  # Block element defaults
  @note_color      = "var(--mn-accent)"
  @note_bg         = "var(--mn-accent-light)"
  @note_border     = "var(--mn-accent)"
  @example_color   = "#0d9488"
  @example_bg      = "rgba(232, 248, 245, 0.6)"
  @example_border  = "#0d9488"
  @admonition_color = "#b8860b"
  @admonition_bg   = "rgba(255, 252, 245, 0.8)"
  @admonition_border = "#e8a820"
  @footer_border_color = nil
  @cover_separator_color = nil

  @header_background = nil
  @cover_background  = nil
  @cover_after_bg    = nil
  @cover_before_bg   = nil
  @progress_bar_color = nil
  @extra_css         = nil

  # Dark mode defaults
  @dark_bg          = "#0f1118"
  @dark_bg_light    = "#1a1d2a"
  @dark_border      = "#2e3248"
  @dark_sidebar     = "#141620"
  @dark_text        = "#e2e6f0"
  @dark_text_light  = "#c0c8dc"
  @dark_text_muted  = "#96a0b8"
  @dark_primary_light = "#1e2140"
  @dark_accent_light  = "#2a2040"
  @dark_note_bg     = nil
  @dark_example_bg  = nil
  @dark_admonition_bg = nil
  @dark_code_bg     = nil
  @dark_code_border = nil
end

Instance Attribute Details

#accent ⇒ Object

Primary palette



7
8
9
 
# File 'lib/metanorma/html/theme.rb', line 7

def accent
  @accent
end

#accent_deep ⇒ Object

Primary palette



7
8
9
 
# File 'lib/metanorma/html/theme.rb', line 7

def accent_deep
  @accent_deep
end

#accent_light ⇒ Object

Primary palette



7
8
9
 
# File 'lib/metanorma/html/theme.rb', line 7

def accent_light
  @accent_light
end

#admonition_bg ⇒ Object

Block element colors (driven via CSS variables, eliminates extra_css)



23
24
25
 
# File 'lib/metanorma/html/theme.rb', line 23

def admonition_bg
  @admonition_bg
end

#admonition_border ⇒ Object

Block element colors (driven via CSS variables, eliminates extra_css)



23
24
25
 
# File 'lib/metanorma/html/theme.rb', line 23

def admonition_border
  @admonition_border
end

#admonition_color ⇒ Object

Block element colors (driven via CSS variables, eliminates extra_css)



23
24
25
 
# File 'lib/metanorma/html/theme.rb', line 23

def admonition_color
  @admonition_color
end

#bg ⇒ Object

Text & backgrounds



12
13
14
 
# File 'lib/metanorma/html/theme.rb', line 12

def bg
  @bg
end

#bg_light ⇒ Object

Text & backgrounds



12
13
14
 
# File 'lib/metanorma/html/theme.rb', line 12

def bg_light
  @bg_light
end

#border ⇒ Object

Text & backgrounds



12
13
14
 
# File 'lib/metanorma/html/theme.rb', line 12

def border
  @border
end

#content_max_width ⇒ Object

Layout constants



19
20
21
 
# File 'lib/metanorma/html/theme.rb', line 19

def content_max_width
  @content_max_width
end

#cover_after_bg ⇒ Object

Computed CSS (gradients — cannot use CSS variables alone)



34
35
36
 
# File 'lib/metanorma/html/theme.rb', line 34

def cover_after_bg
  @cover_after_bg
end

#cover_background ⇒ Object

Computed CSS (gradients — cannot use CSS variables alone)



34
35
36
 
# File 'lib/metanorma/html/theme.rb', line 34

def cover_background
  @cover_background
end

#cover_before_bg ⇒ Object

Computed CSS (gradients — cannot use CSS variables alone)



34
35
36
 
# File 'lib/metanorma/html/theme.rb', line 34

def cover_before_bg
  @cover_before_bg
end

#cover_separator_color ⇒ Object

Cover separator



31
32
33
 
# File 'lib/metanorma/html/theme.rb', line 31

def cover_separator_color
  @cover_separator_color
end

#dark_accent_light ⇒ Object

Dark mode overrides



39
40
41
 
# File 'lib/metanorma/html/theme.rb', line 39

def dark_accent_light
  @dark_accent_light
end

#dark_admonition_bg ⇒ Object

Dark mode overrides



39
40
41
 
# File 'lib/metanorma/html/theme.rb', line 39

def dark_admonition_bg
  @dark_admonition_bg
end

#dark_bg ⇒ Object

Dark mode overrides



39
40
41
 
# File 'lib/metanorma/html/theme.rb', line 39

def dark_bg
  @dark_bg
end

#dark_bg_light ⇒ Object

Dark mode overrides



39
40
41
 
# File 'lib/metanorma/html/theme.rb', line 39

def dark_bg_light
  @dark_bg_light
end

#dark_border ⇒ Object

Dark mode overrides



39
40
41
 
# File 'lib/metanorma/html/theme.rb', line 39

def dark_border
  @dark_border
end

#dark_code_bg ⇒ Object

Dark mode overrides



39
40
41
 
# File 'lib/metanorma/html/theme.rb', line 39

def dark_code_bg
  @dark_code_bg
end

#dark_code_border ⇒ Object

Dark mode overrides



39
40
41
 
# File 'lib/metanorma/html/theme.rb', line 39

def dark_code_border
  @dark_code_border
end

#dark_example_bg ⇒ Object

Dark mode overrides



39
40
41
 
# File 'lib/metanorma/html/theme.rb', line 39

def dark_example_bg
  @dark_example_bg
end

#dark_note_bg ⇒ Object

Dark mode overrides



39
40
41
 
# File 'lib/metanorma/html/theme.rb', line 39

def dark_note_bg
  @dark_note_bg
end

#dark_primary_light ⇒ Object

Dark mode overrides



39
40
41
 
# File 'lib/metanorma/html/theme.rb', line 39

def dark_primary_light
  @dark_primary_light
end

#dark_sidebar ⇒ Object

Dark mode overrides



39
40
41
 
# File 'lib/metanorma/html/theme.rb', line 39

def dark_sidebar
  @dark_sidebar
end

#dark_text ⇒ Object

Dark mode overrides



39
40
41
 
# File 'lib/metanorma/html/theme.rb', line 39

def dark_text
  @dark_text
end

#dark_text_light ⇒ Object

Dark mode overrides



39
40
41
 
# File 'lib/metanorma/html/theme.rb', line 39

def dark_text_light
  @dark_text_light
end

#dark_text_muted ⇒ Object

Dark mode overrides



39
40
41
 
# File 'lib/metanorma/html/theme.rb', line 39

def dark_text_muted
  @dark_text_muted
end

#example_bg ⇒ Object

Block element colors (driven via CSS variables, eliminates extra_css)



23
24
25
 
# File 'lib/metanorma/html/theme.rb', line 23

def example_bg
  @example_bg
end

#example_border ⇒ Object

Block element colors (driven via CSS variables, eliminates extra_css)



23
24
25
 
# File 'lib/metanorma/html/theme.rb', line 23

def example_border
  @example_border
end

#example_color ⇒ Object

Block element colors (driven via CSS variables, eliminates extra_css)



23
24
25
 
# File 'lib/metanorma/html/theme.rb', line 23

def example_color
  @example_color
end

#extra_css ⇒ Object

Arbitrary per-element CSS overrides (search, sourcecode, etc.)



46
47
48
 
# File 'lib/metanorma/html/theme.rb', line 46

def extra_css
  @extra_css
end

#font_body ⇒ Object

Typography



16
17
18
 
# File 'lib/metanorma/html/theme.rb', line 16

def font_body
  @font_body
end

#font_mono ⇒ Object

Typography



16
17
18
 
# File 'lib/metanorma/html/theme.rb', line 16

def font_mono
  @font_mono
end

#font_sans ⇒ Object

Typography



16
17
18
 
# File 'lib/metanorma/html/theme.rb', line 16

def font_sans
  @font_sans
end

#font_url ⇒ Object

Typography



16
17
18
 
# File 'lib/metanorma/html/theme.rb', line 16

def font_url
  @font_url
end

#footer_border_color ⇒ Object

Footer accent



28
29
30
 
# File 'lib/metanorma/html/theme.rb', line 28

def footer_border_color
  @footer_border_color
end

#gradient ⇒ Object

Primary palette



7
8
9
 
# File 'lib/metanorma/html/theme.rb', line 7

def gradient
  @gradient
end

#header_background ⇒ Object

Computed CSS (gradients — cannot use CSS variables alone)



34
35
36
 
# File 'lib/metanorma/html/theme.rb', line 34

def header_background
  @header_background
end

#header_height ⇒ Object

Layout constants



19
20
21
 
# File 'lib/metanorma/html/theme.rb', line 19

def header_height
  @header_height
end

#note_bg ⇒ Object

Block element colors (driven via CSS variables, eliminates extra_css)



23
24
25
 
# File 'lib/metanorma/html/theme.rb', line 23

def note_bg
  @note_bg
end

#note_border ⇒ Object

Block element colors (driven via CSS variables, eliminates extra_css)



23
24
25
 
# File 'lib/metanorma/html/theme.rb', line 23

def note_border
  @note_border
end

#note_color ⇒ Object

Block element colors (driven via CSS variables, eliminates extra_css)



23
24
25
 
# File 'lib/metanorma/html/theme.rb', line 23

def note_color
  @note_color
end

#primary ⇒ Object

Primary palette



7
8
9
 
# File 'lib/metanorma/html/theme.rb', line 7

def primary
  @primary
end

#primary_dark ⇒ Object

Primary palette



7
8
9
 
# File 'lib/metanorma/html/theme.rb', line 7

def primary_dark
  @primary_dark
end

#primary_light ⇒ Object

Primary palette



7
8
9
 
# File 'lib/metanorma/html/theme.rb', line 7

def primary_light
  @primary_light
end

#progress_bar_color ⇒ Object

Computed CSS (gradients — cannot use CSS variables alone)



34
35
36
 
# File 'lib/metanorma/html/theme.rb', line 34

def progress_bar_color
  @progress_bar_color
end

#radius_md ⇒ Object

Layout constants



19
20
21
 
# File 'lib/metanorma/html/theme.rb', line 19

def radius_md
  @radius_md
end

#radius_sm ⇒ Object

Layout constants



19
20
21
 
# File 'lib/metanorma/html/theme.rb', line 19

def radius_sm
  @radius_sm
end

#shadow_md ⇒ Object

Layout constants



19
20
21
 
# File 'lib/metanorma/html/theme.rb', line 19

def shadow_md
  @shadow_md
end

#shadow_sm ⇒ Object

Layout constants



19
20
21
 
# File 'lib/metanorma/html/theme.rb', line 19

def shadow_sm
  @shadow_sm
end

#sidebar_bg ⇒ Object

Text & backgrounds



12
13
14
 
# File 'lib/metanorma/html/theme.rb', line 12

def sidebar_bg
  @sidebar_bg
end

#sidebar_width ⇒ Object

Layout constants



19
20
21
 
# File 'lib/metanorma/html/theme.rb', line 19

def sidebar_width
  @sidebar_width
end

#text_color ⇒ Object

Text & backgrounds



12
13
14
 
# File 'lib/metanorma/html/theme.rb', line 12

def text_color
  @text_color
end

#text_light ⇒ Object

Text & backgrounds



12
13
14
 
# File 'lib/metanorma/html/theme.rb', line 12

def text_light
  @text_light
end

#text_muted ⇒ Object

Text & backgrounds



12
13
14
 
# File 'lib/metanorma/html/theme.rb', line 12

def text_muted
  @text_muted
end

#warm ⇒ Object

Primary palette



7
8
9
 
# File 'lib/metanorma/html/theme.rb', line 7

def warm
  @warm
end

#warm_light ⇒ Object

Primary palette



7
8
9
 
# File 'lib/metanorma/html/theme.rb', line 7

def warm_light
  @warm_light
end

Instance Method Details

#to_css ⇒ Object 



171
172
173
 
# File 'lib/metanorma/html/theme.rb', line 171

def to_css
  to_css_root + to_css_extras
end

#to_css_extras ⇒ Object 



163
164
165
166
167
168
169
 
# File 'lib/metanorma/html/theme.rb', line 163

def to_css_extras
  css = ""
  css += ".title-section::before { content: \"\"; position: absolute; inset: 0; pointer-events: none; #{cover_before_bg} }\n" if cover_before_bg
  css += ".title-section::after { #{cover_after_bg} }\n" if cover_after_bg
  css += extra_css.to_s if extra_css
  css
end

#to_css_root ⇒ Object 



114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
 
# File 'lib/metanorma/html/theme.rb', line 114

def to_css_root
  root = <<~CSS
    :root {
      --mn-primary: #{primary};
      --mn-accent: #{accent};
      --mn-gradient: #{gradient};
      --mn-primary-light: #{primary_light};
      --mn-accent-light: #{accent_light};
      --mn-primary-dark: #{primary_dark};
      --color-text: #{text_color};
      --color-text-light: #{text_light};
      --color-text-muted: #{text_muted};
      --color-bg: #{bg};
      --color-bg-light: #{bg_light};
      --color-border: #{border};
      --color-sidebar-bg: #{sidebar_bg};
      --font-body: #{font_body};
      --font-sans: #{font_sans};
      --font-mono: #{font_mono};
      --content-max-width: #{content_max_width};
      --sidebar-width: #{sidebar_width};
      --header-height: #{header_height};
      --radius-sm: #{radius_sm};
      --radius-md: #{radius_md};
      --shadow-sm: #{shadow_sm};
      --shadow-md: #{shadow_md};
      --note-bg: #{note_bg};
      --note-border: #{note_border};
      --note-color: #{note_color};
      --example-bg: #{example_bg};
      --example-border: #{example_border};
      --example-color: #{example_color};
      --admonition-bg: #{admonition_bg};
      --admonition-border: #{admonition_border};
      --admonition-color: #{admonition_color};
  CSS
  root += "    --mn-accent-deep: #{accent_deep};\n" if accent_deep
  root += "    --mn-warm: #{warm};\n" if warm
  root += "    --mn-warm-light: #{warm_light};\n" if warm_light
  root += "    --mn-header-bg: #{header_background};\n" if header_background
  root += "    --mn-cover-bg: #{cover_background};\n" if cover_background
  root += "    --mn-progress-color: #{progress_bar_color};\n" if progress_bar_color
  root += "    --mn-footer-border: #{footer_border_color};\n" if footer_border_color
  root += "    --mn-cover-separator: #{cover_separator_color};\n" if cover_separator_color
  root += "  }\n"
  root += generate_dark_mode_block if dark_bg
  root
end