@troennes/minium 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/LICENSE ADDED
@@ -0,0 +1,9 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Kim Trønnes
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6
+
7
+ The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8
+
9
+ THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,162 @@
1
+ # Minium CSS
2
+
3
+ **The minimum CSS and HTML to build anything.**
4
+
5
+ Minium is a semantic-first CSS library that makes ordinary HTML look good, then adds class-light layouts and components for building real interfaces.
6
+
7
+ [See what it looks like](https://minium.style/examples/dashboard.html) | [Read the documentation](https://minium.style/docs/index.html)
8
+
9
+ ## Why Minium?
10
+
11
+ Writing semantic HTML should get you further than an unstyled page.
12
+
13
+ With Minium, elements such as headings, links, tables, forms, buttons, `details`, and `dialog` work as the baseline. When the interface needs more structure, one meaningful class can add a layout or component. Utilities are there to adjust the result, not construct it one declaration at a time.
14
+
15
+ ```html
16
+ <main class="container flow">
17
+ <h1>Latest articles</h1>
18
+
19
+ <section class="grid thirds">
20
+ <article class="card">
21
+ <h2>Write the HTML you mean</h2>
22
+ <p>Semantic elements provide the foundation. Minium does the styling.</p>
23
+ <a href="/articles/semantic-html" role="button">Read article</a>
24
+ </article>
25
+ </section>
26
+ </main>
27
+ ```
28
+
29
+ The library takes on more CSS when it lets users write meaningfully less HTML. Features that do not pay back their bundle cost through real use do not belong.
30
+
31
+ ## Quick start
32
+
33
+ ### Use the CDN
34
+
35
+ Load the minified stylesheet from jsDelivr without installing anything:
36
+
37
+ ```html
38
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@troennes/minium@0.1.0/dist/minium.min.css">
39
+ ```
40
+
41
+ ### Install with npm
42
+
43
+ ```bash
44
+ npm install @troennes/minium
45
+ ```
46
+
47
+ Import the core stylesheet from your application's entry point:
48
+
49
+ ```js
50
+ import "@troennes/minium";
51
+ ```
52
+
53
+ To use the minified build explicitly, import its package subpath:
54
+
55
+ ```js
56
+ import "@troennes/minium/min";
57
+ ```
58
+
59
+ If your tools cannot import CSS from a package, copy the complete `node_modules/@troennes/minium/dist/` directory into your project's public assets. Then link the copied stylesheet:
60
+
61
+ ```html
62
+ <link rel="stylesheet" href="/styles/minium/minium.min.css">
63
+ ```
64
+
65
+ Keep the included `fonts/` directory beside the stylesheet so its relative font URLs continue to work.
66
+
67
+ ### Start with semantic HTML
68
+
69
+ ```html
70
+ <!doctype html>
71
+ <html lang="en">
72
+ <head>
73
+ <meta charset="utf-8">
74
+ <meta name="viewport" content="width=device-width, initial-scale=1">
75
+ <title>Hello, world</title>
76
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@troennes/minium@0.1.0/dist/minium.min.css">
77
+ </head>
78
+ <body>
79
+ <main class="container flow">
80
+ <h1>Hello, world</h1>
81
+ <p>Your HTML already has a design system.</p>
82
+ <button>Continue</button>
83
+ </main>
84
+ </body>
85
+ </html>
86
+ ```
87
+
88
+ Explore the [quick-start documentation](https://minium.style/docs/index.html) when you are ready to add layouts and components.
89
+
90
+ ## Customize the theme
91
+
92
+ Minium exposes custom properties for colors, type, spacing, radii, shadows, and component density. Override them in your project layer without specificity tricks. See the [customization guide](https://minium.style/docs/customization.html) for details.
93
+
94
+ ## Features
95
+
96
+ - **Semantic HTML first.** Common document, typography, table, form, and interactive elements look good without classes
97
+ - **Composable layout primitives.** Use `.container`, `.flow`, `.cluster`, `.grid`, `.sidebar`, `.switcher`, `.repel`, and `.frame` to express common compositions with one class
98
+ - **Common components.** Minium includes cards, alerts, modals, dropdowns, accordions, navigation, tabs, pagination, badges, avatars, skeletons, loading and progress states, and tooltips
99
+ - **Class-light by design.** Components own their structure and appearance, so meaningful classes replace wrapper stacks and utility chains
100
+ - **Accessible defaults.** Minium favors native elements and browser behavior, preserves visible focus states, styles semantic and ARIA states, and respects reduced-motion preferences
101
+ - **Customization.** Custom properties in `theme.css` control color, type, spacing, radii, shadows, and density
102
+ - **Pure modern CSS.** There is no Sass, preprocessor, build-time configuration, or JavaScript dependency
103
+ - **MIT licensed.** Use Minium in personal, commercial, and open-source projects
104
+ - **RTL support.** Logical properties and targeted RTL rules let layouts and components follow the document direction
105
+ - **A 396-color palette.** Minium supports 31 twelve-step Radix Color scales plus black and white overlays, matching alpha colors, and Display P3 values for capable displays. The prebuilt library includes only colors referenced by the default theme
106
+ - **Light and dark modes.** Theme colors follow the system preference by default and can be explicitly set to light or dark
107
+ - **Responsive layouts.** Fluid type and spacing, intrinsic layouts, wrapping, and constrained components adapt to available space without a large breakpoint system
108
+ - **Small fixed bundle.** The current minified core is ~13.5 KiB gzipped, so its cost is predictable before you write any HTML
109
+ - **Token-bounded utilities.** Adjust spacing, gaps, radii, surfaces, and other common values without opening an unlimited utility API or reaching for inline styles
110
+ - **Cascade layers.** Library styles remain predictable, and project overrides stay straightforward
111
+ - **Opt-in integrations.** CSS for third-party markup ships separately from the core library
112
+ - **AI-readable reference.** [`llms.txt`](llms.txt) documents Minium's API and usage constraints in one place (~11k tokens)
113
+
114
+ ## Documentation
115
+
116
+ - [Quick start](https://minium.style/docs/index.html)
117
+ - [Layouts](https://minium.style/docs/layout.html)
118
+ - [Components](https://minium.style/docs/component-accordion.html)
119
+ - [Forms](https://minium.style/docs/forms.html)
120
+ - [Utilities](https://minium.style/docs/utility.html)
121
+ - [Customization](https://minium.style/docs/customization.html)
122
+ - [Integrations](https://minium.style/docs/integrations.html)
123
+ - [Color palette](https://minium.style/docs/colors.html)
124
+ - [Complete AI-readable reference](https://minium.style/llms.txt)
125
+
126
+ The [dashboard example](https://minium.style/examples/dashboard.html) uses semantic HTML and Minium classes to build an application shell.
127
+
128
+ ## Background
129
+
130
+ I built Minium because I was tired of bloated CSS frameworks, extra dependencies, and constant churn. I wanted modern CSS that makes semantic HTML look good, avoids short-lived design trends, and needs little maintenance.
131
+
132
+ I have worked on Minium on and off since 2022 and rebuilt it from scratch three times as its fundamental ideas evolved. [Pico](https://picocss.com) remains the main inspiration, alongside [CUBE CSS](https://cube.fyi/) and [Every Layout](https://every-layout.dev/).
133
+
134
+ After three rebuilds, Minium’s core ideas feel settled. It works well for the sites and interfaces I build. Broader use will help reveal what still needs work before version 1.0.
135
+
136
+ ## Project status: 0.1
137
+
138
+ Minium 0.1.0 is the first public release. The library is ready to use, but it has not yet been tested across a wide range of websites, applications, and browsers.
139
+
140
+ Please [open an issue](https://github.com/troennes/minium/issues) if you find rendering or accessibility problems, unclear documentation, awkward component boundaries, or APIs that require unnecessary HTML. Include a small reproduction and browser details when relevant.
141
+
142
+ ## Browser support
143
+
144
+ Minium targets the current stable releases of Chrome, Firefox, and Safari. Other Chromium-based browsers (such as Edge) should also work, but are not tested directly.
145
+
146
+ ## Development
147
+
148
+ Development requires Node.js 22 or later.
149
+
150
+ ```bash
151
+ npm install
152
+ npm test # lint + gzip size budget
153
+ npm run build # build core CSS, minified CSS and fonts
154
+ ```
155
+
156
+ ## License
157
+
158
+ Minium is available under the [MIT License](https://github.com/troennes/minium/blob/main/LICENSE).
159
+
160
+ ## About the name
161
+
162
+ Minium is the historical name for red lead, an orange-red pigment. An unrelated CSS project also used the same name in 2018; this is a separate project.
@@ -0,0 +1,93 @@
1
+ Copyright 2006 The Inconsolata Project Authors
2
+
3
+ This Font Software is licensed under the SIL Open Font License, Version 1.1.
4
+ This license is copied below, and is also available with a FAQ at:
5
+ https://openfontlicense.org
6
+
7
+
8
+ -----------------------------------------------------------
9
+ SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
10
+ -----------------------------------------------------------
11
+
12
+ PREAMBLE
13
+ The goals of the Open Font License (OFL) are to stimulate worldwide
14
+ development of collaborative font projects, to support the font creation
15
+ efforts of academic and linguistic communities, and to provide a free and
16
+ open framework in which fonts may be shared and improved in partnership
17
+ with others.
18
+
19
+ The OFL allows the licensed fonts to be used, studied, modified and
20
+ redistributed freely as long as they are not sold by themselves. The
21
+ fonts, including any derivative works, can be bundled, embedded,
22
+ redistributed and/or sold with any software provided that any reserved
23
+ names are not used by derivative works. The fonts and derivatives,
24
+ however, cannot be released under any other type of license. The
25
+ requirement for fonts to remain under this license does not apply
26
+ to any document created using the fonts or their derivatives.
27
+
28
+ DEFINITIONS
29
+ "Font Software" refers to the set of files released by the Copyright
30
+ Holder(s) under this license and clearly marked as such. This may
31
+ include source files, build scripts and documentation.
32
+
33
+ "Reserved Font Name" refers to any names specified as such after the
34
+ copyright statement(s).
35
+
36
+ "Original Version" refers to the collection of Font Software components as
37
+ distributed by the Copyright Holder(s).
38
+
39
+ "Modified Version" refers to any derivative made by adding to, deleting,
40
+ or substituting -- in part or in whole -- any of the components of the
41
+ Original Version, by changing formats or by porting the Font Software to a
42
+ new environment.
43
+
44
+ "Author" refers to any designer, engineer, programmer, technical
45
+ writer or other person who contributed to the Font Software.
46
+
47
+ PERMISSION & CONDITIONS
48
+ Permission is hereby granted, free of charge, to any person obtaining
49
+ a copy of the Font Software, to use, study, copy, merge, embed, modify,
50
+ redistribute, and sell modified and unmodified copies of the Font
51
+ Software, subject to the following conditions:
52
+
53
+ 1) Neither the Font Software nor any of its individual components,
54
+ in Original or Modified Versions, may be sold by itself.
55
+
56
+ 2) Original or Modified Versions of the Font Software may be bundled,
57
+ redistributed and/or sold with any software, provided that each copy
58
+ contains the above copyright notice and this license. These can be
59
+ included either as stand-alone text files, human-readable headers or
60
+ in the appropriate machine-readable metadata fields within text or
61
+ binary files as long as those fields can be easily viewed by the user.
62
+
63
+ 3) No Modified Version of the Font Software may use the Reserved Font
64
+ Name(s) unless explicit written permission is granted by the corresponding
65
+ Copyright Holder. This restriction only applies to the primary font name as
66
+ presented to the users.
67
+
68
+ 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
69
+ Software shall not be used to promote, endorse or advertise any
70
+ Modified Version, except to acknowledge the contribution(s) of the
71
+ Copyright Holder(s) and the Author(s) or with their explicit written
72
+ permission.
73
+
74
+ 5) The Font Software, modified or unmodified, in part or in whole,
75
+ must be distributed entirely under this license, and must not be
76
+ distributed under any other license. The requirement for fonts to
77
+ remain under this license does not apply to any document created
78
+ using the Font Software.
79
+
80
+ TERMINATION
81
+ This license becomes null and void if any of the above conditions are
82
+ not met.
83
+
84
+ DISCLAIMER
85
+ THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
86
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
87
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
88
+ OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
89
+ COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
90
+ INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
91
+ DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
92
+ FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
93
+ OTHER DEALINGS IN THE FONT SOFTWARE.
@@ -0,0 +1,94 @@
1
+ Copyright (c) 2010, ParaType Ltd. (http://www.paratype.com/public),
2
+ with Reserved Font Names "PT Sans" and "ParaType".
3
+
4
+ This Font Software is licensed under the SIL Open Font License, Version 1.1.
5
+ This license is copied below, and is also available with a FAQ at:
6
+ https://openfontlicense.org
7
+
8
+
9
+ -----------------------------------------------------------
10
+ SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
11
+ -----------------------------------------------------------
12
+
13
+ PREAMBLE
14
+ The goals of the Open Font License (OFL) are to stimulate worldwide
15
+ development of collaborative font projects, to support the font creation
16
+ efforts of academic and linguistic communities, and to provide a free and
17
+ open framework in which fonts may be shared and improved in partnership
18
+ with others.
19
+
20
+ The OFL allows the licensed fonts to be used, studied, modified and
21
+ redistributed freely as long as they are not sold by themselves. The
22
+ fonts, including any derivative works, can be bundled, embedded,
23
+ redistributed and/or sold with any software provided that any reserved
24
+ names are not used by derivative works. The fonts and derivatives,
25
+ however, cannot be released under any other type of license. The
26
+ requirement for fonts to remain under this license does not apply
27
+ to any document created using the fonts or their derivatives.
28
+
29
+ DEFINITIONS
30
+ "Font Software" refers to the set of files released by the Copyright
31
+ Holder(s) under this license and clearly marked as such. This may
32
+ include source files, build scripts and documentation.
33
+
34
+ "Reserved Font Name" refers to any names specified as such after the
35
+ copyright statement(s).
36
+
37
+ "Original Version" refers to the collection of Font Software components as
38
+ distributed by the Copyright Holder(s).
39
+
40
+ "Modified Version" refers to any derivative made by adding to, deleting,
41
+ or substituting -- in part or in whole -- any of the components of the
42
+ Original Version, by changing formats or by porting the Font Software to a
43
+ new environment.
44
+
45
+ "Author" refers to any designer, engineer, programmer, technical
46
+ writer or other person who contributed to the Font Software.
47
+
48
+ PERMISSION & CONDITIONS
49
+ Permission is hereby granted, free of charge, to any person obtaining
50
+ a copy of the Font Software, to use, study, copy, merge, embed, modify,
51
+ redistribute, and sell modified and unmodified copies of the Font
52
+ Software, subject to the following conditions:
53
+
54
+ 1) Neither the Font Software nor any of its individual components,
55
+ in Original or Modified Versions, may be sold by itself.
56
+
57
+ 2) Original or Modified Versions of the Font Software may be bundled,
58
+ redistributed and/or sold with any software, provided that each copy
59
+ contains the above copyright notice and this license. These can be
60
+ included either as stand-alone text files, human-readable headers or
61
+ in the appropriate machine-readable metadata fields within text or
62
+ binary files as long as those fields can be easily viewed by the user.
63
+
64
+ 3) No Modified Version of the Font Software may use the Reserved Font
65
+ Name(s) unless explicit written permission is granted by the corresponding
66
+ Copyright Holder. This restriction only applies to the primary font name as
67
+ presented to the users.
68
+
69
+ 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
70
+ Software shall not be used to promote, endorse or advertise any
71
+ Modified Version, except to acknowledge the contribution(s) of the
72
+ Copyright Holder(s) and the Author(s) or with their explicit written
73
+ permission.
74
+
75
+ 5) The Font Software, modified or unmodified, in part or in whole,
76
+ must be distributed entirely under this license, and must not be
77
+ distributed under any other license. The requirement for fonts to
78
+ remain under this license does not apply to any document created
79
+ using the Font Software.
80
+
81
+ TERMINATION
82
+ This license becomes null and void if any of the above conditions are
83
+ not met.
84
+
85
+ DISCLAIMER
86
+ THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
87
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
88
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
89
+ OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
90
+ COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
91
+ INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
92
+ DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
93
+ FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
94
+ OTHER DEALINGS IN THE FONT SOFTWARE.
Binary file
Binary file
Binary file
@@ -0,0 +1,37 @@
1
+ @layer base {
2
+
3
+
4
+ .helptext {
5
+ color: var(--color-text-muted);
6
+ line-height: 1.25;
7
+ font-size: var(--size-small);
8
+ display: block;
9
+
10
+ ul {
11
+ list-style-type: none;
12
+ padding: 0;
13
+
14
+ li {
15
+ color: var(--color-text-muted);
16
+ font-size: var(--size-small);
17
+ }
18
+ }
19
+ }
20
+
21
+ .errorlist {
22
+ list-style-type: none;
23
+ color: var(--color-danger-text);
24
+ font-size: var(--size-small);
25
+ line-height: 1.25;
26
+ padding: 0;
27
+ }
28
+
29
+ form > div:not([class]) > * + * {
30
+ margin-block-start: var(--flow-space-glue);
31
+ }
32
+
33
+ ul.messages {
34
+ list-style-type: none;
35
+ padding: 0;
36
+ }
37
+ }
@@ -0,0 +1,182 @@
1
+ @layer theme {
2
+ :root {
3
+ --syntax-comment: light-dark(#7d8b99, #999);
4
+ --syntax-punctuation: light-dark(#5f6364, #ccc);
5
+ --syntax-tag: light-dark(#c92c2c, #e2777a);
6
+ --syntax-function: light-dark(#c92c2c, #6196cc);
7
+ --syntax-number: light-dark(#c92c2c, #f08d49);
8
+ --syntax-constant: light-dark(#c92c2c, #f8c555);
9
+ --syntax-string: light-dark(#2f9c0a, #7ec699);
10
+ --syntax-operator: light-dark(#a67f59, #67cdcc);
11
+ --syntax-keyword: light-dark(#1990b8, #cc99cd);
12
+ }
13
+ }
14
+
15
+ @layer components {
16
+
17
+
18
+ code[class*="language-"],
19
+ pre[class*="language-"] {
20
+ white-space: pre;
21
+ word-wrap: normal;
22
+ }
23
+
24
+ code[class*="language-"] ::selection,
25
+ code[class*="language-"]::selection,
26
+ pre[class*="language-"] ::selection,
27
+ pre[class*="language-"]::selection {
28
+ text-shadow: none;
29
+ }
30
+
31
+ @media print {
32
+ code[class*="language-"],
33
+ pre[class*="language-"] {
34
+ text-shadow: none;
35
+ }
36
+ }
37
+
38
+ .token.block-comment,
39
+ .token.cdata,
40
+ .token.comment,
41
+ .token.doctype,
42
+ .token.prolog {
43
+ color: var(--syntax-comment);
44
+ }
45
+
46
+ .token.punctuation {
47
+ color: var(--syntax-punctuation);
48
+ }
49
+
50
+ .token.attr-name,
51
+ .token.namespace,
52
+ .token.tag {
53
+ color: var(--syntax-tag);
54
+ }
55
+
56
+ .token.function-name {
57
+ color: var(--syntax-function);
58
+ }
59
+
60
+ .token.boolean,
61
+ .token.function,
62
+ .token.number {
63
+ color: var(--syntax-number);
64
+ }
65
+
66
+ .token.class-name,
67
+ .token.constant,
68
+ .token.property,
69
+ .token.symbol {
70
+ color: var(--syntax-constant);
71
+ }
72
+
73
+ .token.atrule,
74
+ .token.builtin,
75
+ .token.important,
76
+ .token.keyword,
77
+ .token.selector {
78
+ color: var(--syntax-keyword);
79
+ }
80
+
81
+ .token.attr-value,
82
+ .token.char,
83
+ .token.regex,
84
+ .token.string,
85
+ .token.variable {
86
+ color: var(--syntax-string);
87
+ }
88
+
89
+ .token.entity,
90
+ .token.operator,
91
+ .token.url {
92
+ color: var(--syntax-operator);
93
+ }
94
+
95
+ .token.bold,
96
+ .token.important {
97
+ font-weight: var(--font-weight-bold, bold);
98
+ }
99
+
100
+ .token.italic {
101
+ font-style: italic;
102
+ }
103
+
104
+ .token.entity {
105
+ cursor: help;
106
+ }
107
+
108
+ .token.inserted {
109
+ color: var(--color-success);
110
+ }
111
+
112
+ .token.deleted {
113
+ color: var(--color-danger);
114
+ }
115
+
116
+ div.code-toolbar {
117
+ position: relative;
118
+ }
119
+
120
+ div.code-toolbar>.toolbar {
121
+ display: flex;
122
+ gap: var(--space-2xs);
123
+ position: absolute;
124
+ z-index: 10;
125
+ top: var(--space-3xs);
126
+ right: var(--space-2xs);
127
+ transition: opacity .3s ease-in-out;
128
+ opacity: 0;
129
+ }
130
+
131
+ div.code-toolbar:hover>.toolbar,
132
+ div.code-toolbar:focus-within>.toolbar {
133
+ opacity: 1;
134
+ }
135
+
136
+ div.code-toolbar>.toolbar>.toolbar-item {
137
+ display: inline-block;
138
+ }
139
+
140
+ div.code-toolbar>.toolbar>.toolbar-item>button {
141
+ background: none;
142
+ border: 0;
143
+ color: inherit;
144
+ font: inherit;
145
+ line-height: normal;
146
+ overflow: visible;
147
+ padding: 0;
148
+ user-select: none;
149
+ }
150
+
151
+ div.code-toolbar>.toolbar>.toolbar-item>a,
152
+ div.code-toolbar>.toolbar>.toolbar-item>button,
153
+ div.code-toolbar>.toolbar>.toolbar-item>span {
154
+ display: inline-flex;
155
+ align-items: center;
156
+ gap: var(--space-3xs);
157
+ line-height: 1;
158
+ font-size: max(0.75em, var(--size-tiny));
159
+ font-weight: var(--font-weight-bold);
160
+ background-color: var(--color-fill);
161
+ color: var(--color-text);
162
+ padding: var(--space-3xs) var(--space-2xs);
163
+ border: var(--border-width) solid var(--color-border-weak);
164
+ box-shadow: var(--shadow-small);
165
+ border-radius: var(--border-radius-s);
166
+ }
167
+
168
+ div.code-toolbar>.toolbar>.toolbar-item>a,
169
+ div.code-toolbar>.toolbar>.toolbar-item>button {
170
+ cursor: pointer;
171
+ text-decoration: none;
172
+
173
+ &:is(:focus, :hover) {
174
+ background-color: var(--color-fill-hover);
175
+ color: var(--color-text);
176
+ }
177
+
178
+ &:active {
179
+ background-color: var(--color-fill-active);
180
+ }
181
+ }
182
+ }