You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* add new tokens as css vars
* theme toggle and more updates
* fix docsearch background blur
* more margin
* replace all cdn dependencies, move toggle back to header
* rework theme mechanism so toggle buttons are styled right away, add docs for lucide icons
* fix build
* try fixing docsearch styles
* setTheme in head scripts improved
* move docsearch styles to vendor folder
* preserve css vars in build
* Trigger Build
* small docsearch styles
* fix some styles for the icons macro
* update doc
* fix secondary nav background
* increase icon class size
* Update preview source for images and icons
* update the docs
* Small docs update
* more text color styles, better icon class
* don't show ext link icon on images or svg
---------
Co-authored-by: Eric Schneider <[email protected]>
image::../img/screenshot.png[Screenshot of Astra Portal Home]
11
+
image::../img/screenshot.png[alt="Screenshot of Astra Portal Home"]
12
12
13
13
=== Sizing and alignment
14
14
15
-
.400px width, align="left"
16
-
image::../img/screenshot.png[Screenshot of Astra Portal Home,400,align="left"]
15
+
.width=400,align=left
16
+
image::../img/screenshot.png[alt="Screenshot of Astra Portal Home",width=400,align=left]
17
17
18
-
.400px width,align="right"
19
-
image::../img/screenshot.png[Screenshot of Astra Portal Home,400,align="right"]
18
+
.width=400 width,align=right
19
+
image::../img/screenshot.png[alt="Screenshot of Astra Portal Home",width=400,align=right]
20
20
21
-
.400px width,align="center"
22
-
image::../img/screenshot.png[Screenshot of Astra Portal Home,400,align="center"]
21
+
.width=400 width,align=center
22
+
image::../img/screenshot.png[alt="Screenshot of Astra Portal Home",width=400,align=center]
23
23
24
24
=== Float
25
25
26
26
[.float-group]
27
27
--
28
-
image:../img/screenshot.png[Screenshot of Astra Portal Home,300,float=right,role=float-gap]
28
+
image:../img/screenshot.png[alt="Screenshot of Astra Portal Home",300,float=right,role=float-gap]
29
29
In AsciiDoc, creating paragraphs is a straightforward process that does not require any special markup. A paragraph can be defined as one or more lines of consecutive text that are logically grouped together. To differentiate between paragraphs, you simply need to insert at least one blank line between them.
In AsciiDoc, creating paragraphs is a straightforward process that does not require any special markup. A paragraph can be defined as one or more lines of consecutive text that are logically grouped together. To differentiate between paragraphs, you simply need to insert at least one blank line between them.
36
36
--
37
37
38
-
== Inline images
39
-
40
-
Click image:../img/play_circle_FILL0_wght400_GRAD0_opsz24.svg[title=Play] to get the party started.
38
+
=== Light and dark mode images
41
39
42
-
Click image:../img/pause_circle_FILL0_wght400_GRAD0_opsz24.svg[title=Pause] when you need a break.
40
+
You can make an image appear differently in light mode vs. dark mode.
43
41
44
-
== Image theming (light/dark mode)
42
+
==== Two separate images
45
43
46
44
[NOTE]
47
-
======
48
-
You can define an image such that it appears differently in light mode vs. dark mode.
49
-
There are methods for doing this.
45
+
====
46
+
Define two images: one that looks good in light mode, and one that looks good in dark mode.
47
+
Then, assign the corresponding `for-light` and `for-dark` roles to each image.
48
+
49
+
* All non-SVG images, such as screenshot PNG files, must use this method.
50
+
* All SVG images that do not use <<svg-images-css,CSS variables>> must use this method.
50
51
51
-
Method 1: Two separate images::
52
-
Define two images, one that looks good in light mode and one that looks good in dark mode.
53
-
Assign the corresponding roles -- `for-light` and `for-dark` -- to each image.
54
-
+
55
-
All non-SVG images, such as screenshot PNG files, must use this method.
56
-
All SVG images that do not use CSS variables must also use this method.
Click the Astra Vector icon image:../img/astra-vector-light.svg[title="Astra Vector",role=for-light] image:../img/astra-vector-dark.svg[title="Astra Vector",role=for-dark].
98
+
You can add icons in line with text and other elements.
110
99
111
-
== Icons
100
+
[#font-icons]
101
+
=== Font icons
112
102
113
103
[NOTE]
114
104
======
115
-
You can define icons from https://fonts.google.com/icons?icon.set=Material+Icons&icon.style=Outlined[Material Icons,window=_blank] and https://lucide.dev/icons/[Lucide Icons,window=_blank]. You can also apply an svg file using the customized `icon` macro.
105
+
Use the `icon` macro to invoke font icons from https://lucide.dev/icons/[Lucide Icons] and https://fonts.google.com/icons[Material Icons].
106
+
The `icon` macro follows https://developers.google.com/style/ui-elements#buttons[accessibility standards] and provides built-in support for light and dark mode.
116
107
117
-
Method 1: Inline icon macro with an svg file::
118
-
The customized inline icon macro accepts a file path as it's target source. The file must be an svg file.
119
-
+
120
-
This methods supports using CSS variables within the svg.
121
-
+
122
-
[source]
108
+
Lucide is the default icon set.
109
+
You can invoke a Lucide icon with either `\icon:ICON-NAME[]` or `\icon:lucide:ICON-NAME[]`:
110
+
111
+
.Lucide
112
+
[source,asciidoc]
123
113
----
124
-
icon:ROOT:ui/icons/vector.svg[]
114
+
Click icon:settings[name="Settings"] to configure your settings. // <.>
115
+
116
+
icon:moon[alt="That's no moon"] // <.>
117
+
118
+
icon:sun[ariaLabel="Day time"] // <.>
119
+
120
+
icon:atom[title="Split the atom"] // <.>
121
+
122
+
icon:star[role="text-failure text-2xl"] // <.>
123
+
124
+
icon:star[size="60"] or icon:star[60] // <.>
125
125
----
126
126
127
-
Method 2: Inline icon macro with a material-icons target::
128
-
The customized inline icon macro supports material icon names as it's target source prefixed with `material-icons:`. Ensure the name is lower case with underscores instead of spaces.
127
+
<.> Use the `name` attribute to add visible text to the right of the icon.
128
+
129
+
<.> Use the `alt` attribute to define an `aria-label` for the icon.
130
+
The text is invisible but is read by screen readers.
129
131
+
130
-
This macro does not yet support Lucide icons.
132
+
_Do not use `alt` if `name` or `ariaLabel` is already defined._
133
+
134
+
<.> Identical to the `alt` attribute.
131
135
+
132
-
This method supports light and dark mode automatically.
136
+
_Do not use `ariaLabel` if `name` or `alt` is already defined._
137
+
138
+
<.> The `title` attribute provides a visible tooltip on hover for pointer devices (not visible on touch devices).
133
139
+
134
-
[source]
140
+
_The `title` attribute is not read by most screen readers, and therefore its use is discouraged._
141
+
_If used, make sure to also define `alt` or `ariaLabel` to ensure accessibility._
142
+
143
+
<.> Use the `role` attribute to apply Tailwind CSS classes to the icon.
144
+
145
+
<.> Use the `size` attribute to define the size of the icon in pixels.
146
+
Alternatively, you can define the size in the first https://docs.asciidoctor.org/asciidoc/latest/attributes/positional-and-named-attributes/#positional[positional attribute] (shorthand for the `size` attribute).
147
+
148
+
You can invoke a Material icon with `\icon:material:icon-name[]`.
149
+
All of the same attributes apply:
150
+
151
+
.Material
152
+
[source,asciidoc]
135
153
----
136
-
icon:material-icons:thumb_up[]
154
+
Click icon:material:settings[name="Settings"] to configure your settings.
Use the custom role `material-icons` on block or inline content. The content must be a material icon name in lower case. If there are spaces in the name, use underscores instead.
165
+
.Legacy font icon methods
166
+
[%collapsible]
167
+
=====
168
+
[WARNING]
169
+
====
170
+
These methods were previously used to invoke font icons and should no longer be used.
171
+
====
172
+
173
+
Block or inline span with material-icons role::
141
174
+
175
+
--
176
+
Use the custom role `material-icons` on block or inline content. The content must be a material icon name in lower case. If there are spaces in the name, use underscores instead.
177
+
142
178
This method supports light and dark mode automatically.
0 commit comments