openguessr-ui 0.5.0 → 0.5.2
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.md +166 -0
- package/README.md +3 -3
- package/base.css +1 -0
- package/classes.css +21 -1
- package/components/Chip.svelte +2 -0
- package/components/Popup.svelte +1 -0
- package/components/Tabs.svelte +1 -0
- package/package.json +1 -1
- package/variables.css +1 -0
package/LICENSE.md
ADDED
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
Required Notice: Copyright PaulPlay GmbH (https://paulplay.studio)
|
|
2
|
+
|
|
3
|
+
# PolyForm Shield License 1.0.0
|
|
4
|
+
|
|
5
|
+
<https://polyformproject.org/licenses/shield/1.0.0>
|
|
6
|
+
|
|
7
|
+
## Acceptance
|
|
8
|
+
|
|
9
|
+
In order to get any license under these terms, you must agree
|
|
10
|
+
to them as both strict obligations and conditions to all
|
|
11
|
+
your licenses.
|
|
12
|
+
|
|
13
|
+
## Copyright License
|
|
14
|
+
|
|
15
|
+
The licensor grants you a copyright license for the
|
|
16
|
+
software to do everything you might do with the software
|
|
17
|
+
that would otherwise infringe the licensor's copyright
|
|
18
|
+
in it for any permitted purpose. However, you may
|
|
19
|
+
only distribute the software according to [Distribution
|
|
20
|
+
License](#distribution-license) and make changes or new works
|
|
21
|
+
based on the software according to [Changes and New Works
|
|
22
|
+
License](#changes-and-new-works-license).
|
|
23
|
+
|
|
24
|
+
## Distribution License
|
|
25
|
+
|
|
26
|
+
The licensor grants you an additional copyright license
|
|
27
|
+
to distribute copies of the software. Your license
|
|
28
|
+
to distribute covers distributing the software with
|
|
29
|
+
changes and new works permitted by [Changes and New Works
|
|
30
|
+
License](#changes-and-new-works-license).
|
|
31
|
+
|
|
32
|
+
## Notices
|
|
33
|
+
|
|
34
|
+
You must ensure that anyone who gets a copy of any part of
|
|
35
|
+
the software from you also gets a copy of these terms or the
|
|
36
|
+
URL for them above, as well as copies of any plain-text lines
|
|
37
|
+
beginning with `Required Notice:` that the licensor provided
|
|
38
|
+
with the software. For example:
|
|
39
|
+
|
|
40
|
+
> Required Notice: Copyright Yoyodyne, Inc. (http://example.com)
|
|
41
|
+
|
|
42
|
+
## Changes and New Works License
|
|
43
|
+
|
|
44
|
+
The licensor grants you an additional copyright license to
|
|
45
|
+
make changes and new works based on the software for any
|
|
46
|
+
permitted purpose.
|
|
47
|
+
|
|
48
|
+
## Patent License
|
|
49
|
+
|
|
50
|
+
The licensor grants you a patent license for the software that
|
|
51
|
+
covers patent claims the licensor can license, or becomes able
|
|
52
|
+
to license, that you would infringe by using the software.
|
|
53
|
+
|
|
54
|
+
## Noncompete
|
|
55
|
+
|
|
56
|
+
Any purpose is a permitted purpose, except for providing any
|
|
57
|
+
product that competes with the software or any product the
|
|
58
|
+
licensor or any of its affiliates provides using the software.
|
|
59
|
+
|
|
60
|
+
## Competition
|
|
61
|
+
|
|
62
|
+
Goods and services compete even when they provide functionality
|
|
63
|
+
through different kinds of interfaces or for different technical
|
|
64
|
+
platforms. Applications can compete with services, libraries
|
|
65
|
+
with plugins, frameworks with development tools, and so on,
|
|
66
|
+
even if they're written in different programming languages
|
|
67
|
+
or for different computer architectures. Goods and services
|
|
68
|
+
compete even when provided free of charge. If you market a
|
|
69
|
+
product as a practical substitute for the software or another
|
|
70
|
+
product, it definitely competes.
|
|
71
|
+
|
|
72
|
+
## New Products
|
|
73
|
+
|
|
74
|
+
If you are using the software to provide a product that does
|
|
75
|
+
not compete, but the licensor or any of its affiliates brings
|
|
76
|
+
your product into competition by providing a new version of
|
|
77
|
+
the software or another product using the software, you may
|
|
78
|
+
continue using versions of the software available under these
|
|
79
|
+
terms beforehand to provide your competing product, but not
|
|
80
|
+
any later versions.
|
|
81
|
+
|
|
82
|
+
## Discontinued Products
|
|
83
|
+
|
|
84
|
+
You may begin using the software to compete with a product
|
|
85
|
+
or service that the licensor or any of its affiliates has
|
|
86
|
+
stopped providing, unless the licensor includes a plain-text
|
|
87
|
+
line beginning with `Licensor Line of Business:` with the
|
|
88
|
+
software that mentions that line of business. For example:
|
|
89
|
+
|
|
90
|
+
> Licensor Line of Business: YoyodyneCMS Content Management
|
|
91
|
+
System (http://example.com/cms)
|
|
92
|
+
|
|
93
|
+
## Sales of Business
|
|
94
|
+
|
|
95
|
+
If the licensor or any of its affiliates sells a line of
|
|
96
|
+
business developing the software or using the software
|
|
97
|
+
to provide a product, the buyer can also enforce
|
|
98
|
+
[Noncompete](#noncompete) for that product.
|
|
99
|
+
|
|
100
|
+
## Fair Use
|
|
101
|
+
|
|
102
|
+
You may have "fair use" rights for the software under the
|
|
103
|
+
law. These terms do not limit them.
|
|
104
|
+
|
|
105
|
+
## No Other Rights
|
|
106
|
+
|
|
107
|
+
These terms do not allow you to sublicense or transfer any of
|
|
108
|
+
your licenses to anyone else, or prevent the licensor from
|
|
109
|
+
granting licenses to anyone else. These terms do not imply
|
|
110
|
+
any other licenses.
|
|
111
|
+
|
|
112
|
+
## Patent Defense
|
|
113
|
+
|
|
114
|
+
If you make any written claim that the software infringes or
|
|
115
|
+
contributes to infringement of any patent, your patent license
|
|
116
|
+
for the software granted under these terms ends immediately. If
|
|
117
|
+
your company makes such a claim, your patent license ends
|
|
118
|
+
immediately for work on behalf of your company.
|
|
119
|
+
|
|
120
|
+
## Violations
|
|
121
|
+
|
|
122
|
+
The first time you are notified in writing that you have
|
|
123
|
+
violated any of these terms, or done anything with the software
|
|
124
|
+
not covered by your licenses, your licenses can nonetheless
|
|
125
|
+
continue if you come into full compliance with these terms,
|
|
126
|
+
and take practical steps to correct past violations, within
|
|
127
|
+
32 days of receiving notice. Otherwise, all your licenses
|
|
128
|
+
end immediately.
|
|
129
|
+
|
|
130
|
+
## No Liability
|
|
131
|
+
|
|
132
|
+
***As far as the law allows, the software comes as is, without
|
|
133
|
+
any warranty or condition, and the licensor will not be liable
|
|
134
|
+
to you for any damages arising out of these terms or the use
|
|
135
|
+
or nature of the software, under any kind of legal claim.***
|
|
136
|
+
|
|
137
|
+
## Definitions
|
|
138
|
+
|
|
139
|
+
The **licensor** is the individual or entity offering these
|
|
140
|
+
terms, and the **software** is the software the licensor makes
|
|
141
|
+
available under these terms.
|
|
142
|
+
|
|
143
|
+
A **product** can be a good or service, or a combination
|
|
144
|
+
of them.
|
|
145
|
+
|
|
146
|
+
**You** refers to the individual or entity agreeing to these
|
|
147
|
+
terms.
|
|
148
|
+
|
|
149
|
+
**Your company** is any legal entity, sole proprietorship,
|
|
150
|
+
or other kind of organization that you work for, plus all
|
|
151
|
+
its affiliates.
|
|
152
|
+
|
|
153
|
+
**Affiliates** means the other organizations than an
|
|
154
|
+
organization has control over, is under the control of, or is
|
|
155
|
+
under common control with.
|
|
156
|
+
|
|
157
|
+
**Control** means ownership of substantially all the assets of
|
|
158
|
+
an entity, or the power to direct its management and policies
|
|
159
|
+
by vote, contract, or otherwise. Control can be direct or
|
|
160
|
+
indirect.
|
|
161
|
+
|
|
162
|
+
**Your licenses** are all the licenses granted to you for the
|
|
163
|
+
software under these terms.
|
|
164
|
+
|
|
165
|
+
**Use** means anything you do with the software requiring one
|
|
166
|
+
of your licenses.
|
package/README.md
CHANGED
|
@@ -4,9 +4,6 @@ The user interface design system for OpenGuessr. Install via `npm install opengu
|
|
|
4
4
|
|
|
5
5
|
Made to be used with [Svelte](https://svelte.dev).
|
|
6
6
|
|
|
7
|
-
> [!IMPORTANT]
|
|
8
|
-
> While this library is publicly available, commercial use is not permitted.
|
|
9
|
-
|
|
10
7
|
## Structure
|
|
11
8
|
|
|
12
9
|
These core concepts define how UI should be structured.
|
|
@@ -56,6 +53,7 @@ These variables are used for colors:
|
|
|
56
53
|
| Variable | Explanation |
|
|
57
54
|
| -------- | ------- |
|
|
58
55
|
| --brand-color | Primary red |
|
|
56
|
+
| --brand-color-shadow | Shadow for text on red |
|
|
59
57
|
| --panel-color | Blue-ish, for panels |
|
|
60
58
|
| --box-color | Bright transparent for boxes |
|
|
61
59
|
| --line-color | For strokes and separators |
|
|
@@ -180,6 +178,8 @@ There is a tertiary button, and it's created by applying `dark`, but it's not us
|
|
|
180
178
|
|
|
181
179
|
Large buttons with short text inside often look unnaturally slim when placed as the only button inside a panel, bumping the padding by adding `wide` resolves this.
|
|
182
180
|
|
|
181
|
+
Primary buttons add a shadow in `--brand-color-shadow` to text and icons inside them. Buttons with a custom solid background should set `--content-shadow-color` to a darker shade of it. Apply the `content-shadow` class to other non-standard-button elements to mirror this behavior.
|
|
182
|
+
|
|
183
183
|
### Icons in buttons
|
|
184
184
|
|
|
185
185
|
Regular buttons typically have the icon placed on the left side.
|
package/base.css
CHANGED
package/classes.css
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
height: 40px;
|
|
8
8
|
text-align: center;
|
|
9
9
|
white-space: nowrap;
|
|
10
|
-
transition: filter 250ms ease, box-shadow 250ms ease, transform 150ms ease, color 250ms ease, background-color 250ms ease, opacity 250ms ease;
|
|
10
|
+
transition: filter 250ms ease, box-shadow 250ms ease, transform 150ms ease, color 250ms ease, background-color 250ms ease, opacity 250ms ease, --content-shadow-color 250ms ease;
|
|
11
11
|
border-radius: var(--content-margin);
|
|
12
12
|
user-select: none;
|
|
13
13
|
background-color: var(--brand-color);
|
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
border-top: 3px solid rgba(255, 255, 255, 0.2);
|
|
16
16
|
color: white;
|
|
17
17
|
box-shadow: var(--button-shadow);
|
|
18
|
+
--content-shadow-color: var(--brand-color-shadow);
|
|
18
19
|
}
|
|
19
20
|
|
|
20
21
|
.standard-button:hover {
|
|
@@ -37,10 +38,12 @@
|
|
|
37
38
|
|
|
38
39
|
.bright {
|
|
39
40
|
background-color: rgba(255, 255, 255, 0.175);
|
|
41
|
+
--content-shadow-color: transparent;
|
|
40
42
|
}
|
|
41
43
|
|
|
42
44
|
.bright-soft {
|
|
43
45
|
background-color: rgba(255, 255, 255, 0.1);
|
|
46
|
+
--content-shadow-color: transparent;
|
|
44
47
|
}
|
|
45
48
|
|
|
46
49
|
.dark {
|
|
@@ -48,6 +51,7 @@
|
|
|
48
51
|
border: 3px solid rgba(160, 160, 170, 0.2);
|
|
49
52
|
border-top: 3px solid rgba(200, 200, 210, 0.2);
|
|
50
53
|
box-shadow: var(--button-shadow-dark);
|
|
54
|
+
--content-shadow-color: transparent;
|
|
51
55
|
}
|
|
52
56
|
|
|
53
57
|
.popup-bottom-button {
|
|
@@ -64,6 +68,22 @@
|
|
|
64
68
|
padding-inline: calc(var(--layout-margin) * 2);
|
|
65
69
|
}
|
|
66
70
|
|
|
71
|
+
/* Content shadow on brand-colored backgrounds */
|
|
72
|
+
@property --content-shadow-color {
|
|
73
|
+
syntax: "<color>";
|
|
74
|
+
inherits: true;
|
|
75
|
+
initial-value: transparent;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.standard-button,
|
|
79
|
+
.content-shadow {
|
|
80
|
+
text-shadow: 0 0 3px var(--content-shadow-color), 0 0 3px var(--content-shadow-color), 0 0 3px var(--content-shadow-color), 0 0 3px var(--content-shadow-color);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
:is(.standard-button, .content-shadow) svg {
|
|
84
|
+
filter: drop-shadow(0 0 1.5px var(--content-shadow-color)) drop-shadow(0 0 1.5px var(--content-shadow-color)) drop-shadow(0 0 1.5px var(--content-shadow-color));
|
|
85
|
+
}
|
|
86
|
+
|
|
67
87
|
/* Popup title */
|
|
68
88
|
.popup-title {
|
|
69
89
|
margin-bottom: var(--layout-margin);
|
package/components/Chip.svelte
CHANGED
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
{onclick}
|
|
18
18
|
role={onclick ? "button" : ""}
|
|
19
19
|
class:chip-red={red}
|
|
20
|
+
class:content-shadow={red}
|
|
20
21
|
class:chip-italic={italic}
|
|
21
22
|
class:muted-opacity={mutedOpacity}
|
|
22
23
|
{style}
|
|
@@ -70,6 +71,7 @@
|
|
|
70
71
|
.chip-red {
|
|
71
72
|
background-color: var(--brand-color);
|
|
72
73
|
color: white;
|
|
74
|
+
--content-shadow-color: var(--brand-color-shadow);
|
|
73
75
|
}
|
|
74
76
|
|
|
75
77
|
.chip-italic {
|
package/components/Popup.svelte
CHANGED
package/components/Tabs.svelte
CHANGED
package/package.json
CHANGED