ada-ui 0.0.0-beta-v5-20240723124838 → 0.0.0-beta-v5-20240723181534
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/CHANGELOG.md +6 -1
- package/css/ada.css +1 -1
- package/index.html +167 -94
- package/package.json +1 -1
- package/scss/_command.scss +35 -32
- package/scss/_global.scss +10 -4
- package/scss/_input.scss +5 -5
- package/scss/_panel.scss +39 -16
- package/scss/_spinner.scss +2 -2
- package/scss/_typography.scss +4 -26
- package/scss/{_commands.scss → deprecated/_commands.scss} +5 -5
- package/css/ada.blue-old.css +0 -1
- package/css/ada.green-old.css +0 -1
- package/scss/_corner.scss +0 -47
- package/todo +0 -6
- /package/scss/{ada.blue-old.scss → deprecated/_ada.blue-old.scss} +0 -0
- /package/scss/{ada.green-old.scss → deprecated/_ada.green-old.scss} +0 -0
- /package/scss/{_button.scss → deprecated/_button.scss} +0 -0
- /package/scss/{_spinner-lab.scss → deprecated/_spinner-lab.scss} +0 -0
- /package/scss/{_tile.scss → deprecated/_tile.scss} +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,14 @@
|
|
|
1
1
|
# ada-ui
|
|
2
2
|
|
|
3
|
-
## 0.0.0-beta-v5-
|
|
3
|
+
## 0.0.0-beta-v5-20240723181534
|
|
4
4
|
|
|
5
5
|
### Major Changes
|
|
6
6
|
|
|
7
|
+
- 327604d: Remove margins
|
|
8
|
+
- 327604d: Improve demo page
|
|
9
|
+
- 327604d: Use the same disabled style for all color variants
|
|
10
|
+
- 327604d: Remove small border width and light corner
|
|
11
|
+
- 327604d: Add typography and spacing tokens
|
|
7
12
|
- 33e84ac: Simplified colors and using lch instead of hsl
|
|
8
13
|
- 33e84ac: Add reset style
|
|
9
14
|
- 33e84ac: Deprecate Button in favor of Command
|
package/css/ada.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{margin:0}h1,h2,h3,h4,h5,h6,p,pre{font-size:inherit;font-weight:inherit;margin:0}a{color:inherit;text-decoration:inherit}button,input,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}button,[role=button]{cursor:pointer}:disabled{cursor:default}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}ol,ul,menu{list-style:none;margin:0;padding:0}:root{--font-family: "Open Sans", sans-serif;--font-size: 16px;--box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);--
|
|
1
|
+
*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{margin:0}h1,h2,h3,h4,h5,h6,p,pre{font-size:inherit;font-weight:inherit;margin:0}a{color:inherit;text-decoration:inherit}button,input,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}button,[role=button]{cursor:pointer}:disabled{cursor:default}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}ol,ul,menu{list-style:none;margin:0;padding:0}:root{--font-family: "Open Sans", sans-serif;--font-size: 16px;--scale-sm: 0.85rem;--scale-base: 1rem;--scale-lg: 1.2rem;--scale-xl: 1.4rem;--scale-2xl: 1.6rem;--scale-3xl: 1.8rem;--box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);--spacing-xs: 2px;--spacing-sm: 6px;--spacing: 10px;--border-width: 0.15rem;--focus-border-width: 0.15rem;--border-radius: 0.3rem}@media screen and (min-width: 768px){:root{--font-size: 14px}}html{font-family:var(--font-family);font-weight:400}html,body{font-size:var(--font-size);height:100%;min-height:100%}body{padding:var(--spacing);background:var(--bg-body);color:var(--fg100)}h1,h2,h3,h4,.panel>header{font-weight:300;text-shadow:0 0 4px var(--bg700);color:var(--fg100)}h1{font-size:var(--scale-3xl)}h2{font-size:var(--scale-2xl)}h3{font-size:var(--scale-xl)}h4{font-size:var(--scale-lg)}.command{background-color:var(--bg900);box-shadow:var(--box-shadow);display:grid;align-items:end;justify-items:end;text-align:end;border-style:solid;border-color:transparent;border-width:0 0 0 var(--focus-border-width);padding:var(--spacing-xs) var(--spacing-sm);min-height:3rem;min-width:3rem;border-radius:var(--border-radius);overflow:hidden;outline:none;color:var(--fg100);font-family:inherit;font-size:var(--scale-base);cursor:pointer;user-select:none;vertical-align:middle;transition:border-color .15s ease-in-out,background-color .15s ease-in-out}.command.flash{animation:flash-background 1s ease-in-out infinite}.command:disabled{opacity:.7;cursor:default;pointer-events:none;background:#6d6d6d;color:#ededed}.command.outline{background-color:transparent;border-color:var(--bg800);border-width:var(--border-width)}.command.outline.flash{animation-name:flash-border}.command.outline:disabled{background:transparent;border-color:#6d6d6d}.command:focus{border-left-color:var(--bg600)}.command:active{border-color:var(--bg600);background-color:var(--bg600);animation-play-state:paused}.compound-commands{display:inline-grid;grid-auto-flow:column;gap:var(--spacing-sm)}.compound-commands>.spacer{background-color:var(--bg900);box-shadow:var(--box-shadow);min-width:1rem;min-height:1rem}.compound-commands>.spacer.outline{background-color:transparent;border:var(--border-width) solid var(--bg800)}.compound-commands>.text{font-size:var(--scale-3xl);line-height:var(--scale-3xl);align-self:center;padding:var(--spacing-xs)}.compound-commands>.command:first-child,.compound-commands .spacer:first-child{border-radius:var(--border-radius) 0 0 var(--border-radius)}.compound-commands>.command:not(:first-child):not(:last-child),.compound-commands .spacer:not(:first-child):not(:last-child){border-radius:0}.compound-commands>.command:last-child,.compound-commands .spacer:last-child{border-radius:0 var(--border-radius) var(--border-radius) 0}.compound-commands.vertical{grid-auto-flow:row}.compound-commands.vertical>.text{justify-self:center}.compound-commands.vertical>.command:first-child,.compound-commands.vertical .spacer:first-child{border-radius:var(--border-radius) var(--border-radius) 0 0}.compound-commands.vertical>.command:last-child,.compound-commands.vertical .spacer:last-child{border-radius:0 0 var(--border-radius) var(--border-radius)}@keyframes flash-background{50%{background-color:var(--bg700)}}@keyframes flash-border{50%{border-color:var(--bg600)}}.input{border-radius:var(--border-radius);box-shadow:var(--box-shadow);outline:none;border:var(--border-width) solid var(--bg700);color:var(--fg100);font-family:inherit;background-color:transparent;transition:border-color .15s ease-in-out;padding:var(--spacing-sm);font-size:var(--scale-base)}.input:focus{border:var(--border-width) solid var(--bg600)}.input:disabled{opacity:.4;filter:saturate(0.6);cursor:default;pointer-events:none}.panel>footer::after,.panel>footer::before,.panel>header::after,.panel>header::before{content:"";border-style:solid;border-color:var(--bg800);position:absolute;height:1rem;width:1rem;z-index:2}.panel{background:var(--panel-background);box-shadow:var(--box-shadow);border-radius:var(--border-radius);display:grid;grid-template-rows:auto 1fr auto;overflow:auto}.panel>header{position:relative;font-size:var(--scale-xl);padding:var(--spacing-sm) var(--spacing)}.panel>header::before{border-width:var(--border-width) 0 0 var(--border-width);border-radius:var(--border-radius) 0 0 0;left:0;top:0}.panel>header::after{border-width:var(--border-width) var(--border-width) 0 0;border-radius:0 var(--border-radius) 0 0;right:0;top:0}.panel>article{z-index:1;padding:0 var(--spacing);overflow:auto}.panel>article::-webkit-scrollbar{width:var(--border-width);background:transparent}.panel>article::-webkit-scrollbar-thumb{min-width:1rem;border-style:solid;border-color:transparent;border-width:var(--border-width);background:var(--bg800);box-sizing:border-box;background-clip:border-box}.panel>footer{position:relative;color:var(--fg200);padding:var(--spacing-sm) var(--spacing);font-size:var(--scale-sm);text-align:right}.panel>footer::before{border-width:0 0 var(--border-width) var(--border-width);border-radius:0 0 0 var(--border-radius);left:0;bottom:0}.panel>footer::after{border-width:0 var(--border-width) var(--border-width) 0;border-radius:0 0 var(--border-radius) 0;right:0;bottom:0}.spinner{display:inline-grid;justify-items:center;align-items:center;width:1em;height:1em;position:relative;box-sizing:border-box;animation:6s .5s rotate ease-in-out alternate infinite}.spinner::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-style:solid;border-width:.05em;border-radius:50%;border-color:var(--bg800) transparent;animation:4s .5s inset1 ease-in-out infinite;box-shadow:0px 12px 10px -12px #000a,0px -12px 10px -12px #000a}.spinner::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-style:solid;border-width:.05em;border-radius:50%;border-color:transparent var(--bg600);animation:4s .5s inset2 ease-in-out infinite;box-shadow:12px 0px 10px -12px #000a,-12px 0px 10px -12px #000a}@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes inset1{0%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}12.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(0)}37.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(180deg)}50%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}100%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}}@keyframes inset2{0%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}50%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}62.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(0)}87.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(180deg)}100%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}}
|
package/index.html
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
name="viewport"
|
|
11
11
|
content="user-scalable=yes, initial-scale=1.0, maximum-scale=10.0, width=device-width"
|
|
12
12
|
/>
|
|
13
|
-
<link rel="stylesheet" href="css/ada.blue
|
|
13
|
+
<link rel="stylesheet" href="css/ada.blue.css" />
|
|
14
14
|
<link rel="stylesheet" href="css/ada.css" />
|
|
15
15
|
<link
|
|
16
16
|
href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600"
|
|
@@ -56,6 +56,22 @@
|
|
|
56
56
|
background: var(--fg100);
|
|
57
57
|
color: var(--bg900);
|
|
58
58
|
}
|
|
59
|
+
|
|
60
|
+
.typography {
|
|
61
|
+
display: grid;
|
|
62
|
+
grid-template-columns: auto auto;
|
|
63
|
+
gap: var(--spacing);
|
|
64
|
+
justify-content: start;
|
|
65
|
+
}
|
|
66
|
+
.typography > p {
|
|
67
|
+
grid-column: span 2;
|
|
68
|
+
display: grid;
|
|
69
|
+
grid-template-columns: subgrid;
|
|
70
|
+
gap: var(--spacing);
|
|
71
|
+
}
|
|
72
|
+
.typography > p > code {
|
|
73
|
+
color: var(--fg200);
|
|
74
|
+
}
|
|
59
75
|
</style>
|
|
60
76
|
</head>
|
|
61
77
|
|
|
@@ -64,34 +80,64 @@
|
|
|
64
80
|
display: grid;
|
|
65
81
|
grid-template-columns: auto 1fr;
|
|
66
82
|
grid-template-rows: 1fr auto;
|
|
67
|
-
gap:
|
|
83
|
+
column-gap: var(--spacing);
|
|
68
84
|
"
|
|
69
85
|
>
|
|
70
86
|
<div
|
|
71
87
|
class="compound-commands vertical"
|
|
72
|
-
style="
|
|
88
|
+
style="display: flex; flex-direction: column"
|
|
73
89
|
>
|
|
74
|
-
<
|
|
75
|
-
<
|
|
76
|
-
<
|
|
77
|
-
<
|
|
78
|
-
<
|
|
90
|
+
<div class="spacer"></div>
|
|
91
|
+
<a href="#typography" class="command primary-alt">Typography</a>
|
|
92
|
+
<a href="#colors" class="command primary-alt">Colors</a>
|
|
93
|
+
<a href="#spacing" class="command primary-alt">Spacing</a>
|
|
94
|
+
<a href="#commands" class="command">Commands</a>
|
|
95
|
+
<a href="#panels" class="command">Panels</a>
|
|
96
|
+
<a href="#input" class="command">Input</a>
|
|
97
|
+
<a href="#spinner" class="command">Spinner</a>
|
|
98
|
+
<div style="flex: 1" class="spacer"></div>
|
|
99
|
+
<div class="spacer"></div>
|
|
79
100
|
</div>
|
|
80
101
|
<div class="panel">
|
|
81
|
-
<header></header>
|
|
82
|
-
<article
|
|
102
|
+
<header><h1>Ada UI Design Guide</h1></header>
|
|
103
|
+
<article
|
|
104
|
+
style="display: grid; grid-auto-rows: max-content; gap: var(--spacing)"
|
|
105
|
+
>
|
|
83
106
|
<div class="panel">
|
|
84
|
-
<header>
|
|
85
|
-
<article
|
|
86
|
-
style="
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
107
|
+
<header><h2 id="typography">Typography</h2></header>
|
|
108
|
+
<article class="typography">
|
|
109
|
+
<p style="font-size: var(--scale-3xl)">
|
|
110
|
+
<code>scale-3xl</code>
|
|
111
|
+
<span>Headline 1, Text in Compound Commands</span>
|
|
112
|
+
</p>
|
|
113
|
+
<p style="font-size: var(--scale-2xl)">
|
|
114
|
+
<code>scale-2xl</code>
|
|
115
|
+
<span>Headline 2</span>
|
|
116
|
+
</p>
|
|
117
|
+
<p style="font-size: var(--scale-xl)">
|
|
118
|
+
<code>scale-xl</code>
|
|
119
|
+
<span>Headline 3</span>
|
|
120
|
+
</p>
|
|
121
|
+
<p style="font-size: var(--scale-lg)">
|
|
122
|
+
<code>scale-lg</code>
|
|
123
|
+
<span>Headline 4</span>
|
|
124
|
+
</p>
|
|
125
|
+
<p style="font-size: var(--scale-base)">
|
|
126
|
+
<code>scale-base</code>
|
|
127
|
+
<span>Normal Text, Command Label</span>
|
|
128
|
+
</p>
|
|
129
|
+
<p style="font-size: var(--scale-sm)">
|
|
130
|
+
<code>scale-sm</code>
|
|
131
|
+
<span>Small Text, Panel Footer</span>
|
|
132
|
+
</p>
|
|
133
|
+
</article>
|
|
134
|
+
<footer></footer>
|
|
135
|
+
</div>
|
|
136
|
+
<div class="panel">
|
|
137
|
+
<header><h2 id="colors">Colors</h2></header>
|
|
138
|
+
<article style="display: flex; gap: 3rem; flex-wrap: wrap">
|
|
93
139
|
<div class="color-shades">
|
|
94
|
-
<
|
|
140
|
+
<h3>Primary</h3>
|
|
95
141
|
<div class="fg100">FG 100</div>
|
|
96
142
|
<div class="fg200">FG 200</div>
|
|
97
143
|
<div class="bg600">BG 600</div>
|
|
@@ -100,7 +146,7 @@
|
|
|
100
146
|
<div class="bg900">BG 900</div>
|
|
101
147
|
</div>
|
|
102
148
|
<div class="color-shades">
|
|
103
|
-
<
|
|
149
|
+
<h3>Primary Alt</h3>
|
|
104
150
|
<div class="fg100 primary-alt">FG 100</div>
|
|
105
151
|
<div class="fg200 primary-alt">FG 200</div>
|
|
106
152
|
<div class="bg600 primary-alt">BG 600</div>
|
|
@@ -109,7 +155,7 @@
|
|
|
109
155
|
<div class="bg900 primary-alt">BG 900</div>
|
|
110
156
|
</div>
|
|
111
157
|
<div class="color-shades">
|
|
112
|
-
<
|
|
158
|
+
<h3>Accent</h3>
|
|
113
159
|
<div class="fg100 accent">FG 100</div>
|
|
114
160
|
<div class="fg200 accent">FG 200</div>
|
|
115
161
|
<div class="bg600 accent">BG 600</div>
|
|
@@ -118,7 +164,7 @@
|
|
|
118
164
|
<div class="bg900 accent">BG 900</div>
|
|
119
165
|
</div>
|
|
120
166
|
<div class="color-shades">
|
|
121
|
-
<
|
|
167
|
+
<h3>Accent Alt</h3>
|
|
122
168
|
<div class="fg100 accent-alt">FG 100</div>
|
|
123
169
|
<div class="fg200 accent-alt">FG 200</div>
|
|
124
170
|
<div class="bg600 accent-alt">BG 600</div>
|
|
@@ -127,7 +173,7 @@
|
|
|
127
173
|
<div class="bg900 accent-alt">BG 900</div>
|
|
128
174
|
</div>
|
|
129
175
|
<div class="color-shades">
|
|
130
|
-
<
|
|
176
|
+
<h3>Warn</h3>
|
|
131
177
|
<div class="fg100 warn">FG 100</div>
|
|
132
178
|
<div class="fg200 warn">FG 200</div>
|
|
133
179
|
<div class="bg600 warn">BG 600</div>
|
|
@@ -139,7 +185,12 @@
|
|
|
139
185
|
<footer></footer>
|
|
140
186
|
</div>
|
|
141
187
|
<div class="panel">
|
|
142
|
-
<header>
|
|
188
|
+
<header><h2 id="spacing">Spacing</h2></header>
|
|
189
|
+
<article>TODO</article>
|
|
190
|
+
<footer></footer>
|
|
191
|
+
</div>
|
|
192
|
+
<div class="panel">
|
|
193
|
+
<header><h2 id="commands">Commands</h2></header>
|
|
143
194
|
<article
|
|
144
195
|
style="
|
|
145
196
|
display: inline-grid;
|
|
@@ -148,23 +199,46 @@
|
|
|
148
199
|
gap: 1rem;
|
|
149
200
|
"
|
|
150
201
|
>
|
|
151
|
-
<
|
|
202
|
+
<h3 style="grid-column: span 5">Default</h3>
|
|
152
203
|
<button class="command">Command</button>
|
|
153
204
|
<button class="command primary-alt">Command</button>
|
|
154
205
|
<button class="command accent-alt">Command</button>
|
|
155
206
|
<button class="command accent">Command</button>
|
|
156
207
|
<button class="command warn">Command</button>
|
|
157
|
-
<
|
|
208
|
+
<h3 style="grid-column: span 5">Outline</h3>
|
|
209
|
+
<button class="command outline">Command</button>
|
|
210
|
+
<button class="command outline primary-alt">Command</button>
|
|
211
|
+
<button class="command outline accent-alt">Command</button>
|
|
212
|
+
<button class="command outline accent">Command</button>
|
|
213
|
+
<button class="command outline warn">Command</button>
|
|
214
|
+
<h3 style="grid-column: span 5">Flashing</h3>
|
|
215
|
+
<button class="command flash">Command</button>
|
|
216
|
+
<button class="command flash primary-alt">Command</button>
|
|
217
|
+
<button class="command flash accent-alt">Command</button>
|
|
218
|
+
<button class="command flash accent">Command</button>
|
|
219
|
+
<button class="command flash warn">Command</button>
|
|
220
|
+
<button class="command flash outline">Command</button>
|
|
221
|
+
<button class="command flash outline primary-alt">Command</button>
|
|
222
|
+
<button class="command flash outline accent-alt">Command</button>
|
|
223
|
+
<button class="command flash outline accent">Command</button>
|
|
224
|
+
<button class="command flash outline warn">Command</button>
|
|
225
|
+
<h3 style="grid-column: span 5">Disabled</h3>
|
|
226
|
+
<button disabled class="command">Command</button>
|
|
227
|
+
<button disabled class="command outline">Command</button>
|
|
228
|
+
<h3 style="grid-column: span 5">Wrapping</h3>
|
|
229
|
+
<p style="grid-column: span 5; max-width: 35rem">
|
|
230
|
+
The command's text is wrapped by default which increases the
|
|
231
|
+
height of the command.
|
|
232
|
+
</p>
|
|
158
233
|
<button
|
|
159
234
|
style="max-width: 20rem; grid-column: span 5"
|
|
160
235
|
class="command"
|
|
161
236
|
>
|
|
162
237
|
A command with a quite long description.
|
|
163
238
|
</button>
|
|
164
|
-
<h4 style="grid-column: span 5">Single line with ellipsis</h4>
|
|
165
239
|
<p style="grid-column: span 5; max-width: 35rem">
|
|
166
|
-
|
|
167
|
-
code for details.
|
|
240
|
+
If you want to use ellipsis and a single line of text, a wrapper
|
|
241
|
+
element is needed. See page's source code for details.
|
|
168
242
|
</p>
|
|
169
243
|
<p style="grid-column: span 5; max-width: 35rem">
|
|
170
244
|
Double check if ellipsis is really needed and if yes, that the
|
|
@@ -186,80 +260,100 @@
|
|
|
186
260
|
A command with a quite long description.
|
|
187
261
|
</span>
|
|
188
262
|
</button>
|
|
189
|
-
<
|
|
190
|
-
<button class="command outline">Command</button>
|
|
191
|
-
<button class="command outline primary-alt">Command</button>
|
|
192
|
-
<button class="command outline accent-alt">Command</button>
|
|
193
|
-
<button class="command outline accent">Command</button>
|
|
194
|
-
<button class="command outline warn">Command</button>
|
|
195
|
-
<h4 style="grid-column: span 5">Flashing</h4>
|
|
196
|
-
<button class="command flash">Command</button>
|
|
197
|
-
<button class="command flash primary-alt">Command</button>
|
|
198
|
-
<button class="command flash accent-alt">Command</button>
|
|
199
|
-
<button class="command flash accent">Command</button>
|
|
200
|
-
<button class="command flash warn">Command</button>
|
|
201
|
-
<button class="command flash outline">Command</button>
|
|
202
|
-
<button class="command flash outline primary-alt">Command</button>
|
|
203
|
-
<button class="command flash outline accent-alt">Command</button>
|
|
204
|
-
<button class="command flash outline accent">Command</button>
|
|
205
|
-
<button class="command flash outline warn">Command</button>
|
|
206
|
-
<h4 style="grid-column: span 5">Disabled</h4>
|
|
207
|
-
<button disabled class="command">Command</button>
|
|
208
|
-
<button disabled class="command primary-alt">Command</button>
|
|
209
|
-
<button disabled class="command accent-alt">Command</button>
|
|
210
|
-
<button disabled class="command accent">Command</button>
|
|
211
|
-
<button disabled class="command warn">Command</button>
|
|
212
|
-
<button disabled class="command outline">Command</button>
|
|
213
|
-
<button disabled class="command outline primary-alt">
|
|
214
|
-
Command
|
|
215
|
-
</button>
|
|
216
|
-
<button disabled class="command outline accent-alt">Command</button>
|
|
217
|
-
<button disabled class="command outline accent">Command</button>
|
|
218
|
-
<button disabled class="command outline warn">Command</button>
|
|
219
|
-
<h4 style="grid-column: span 5">Compound</h4>
|
|
263
|
+
<h3 style="grid-column: span 5">Compound</h3>
|
|
220
264
|
<div style="grid-column: span 5" class="compound-commands">
|
|
221
|
-
<button class="command
|
|
222
|
-
<button class="command
|
|
223
|
-
<div class="spacer
|
|
265
|
+
<button class="command">Command</button>
|
|
266
|
+
<button class="command"></button>
|
|
267
|
+
<div class="spacer"></div>
|
|
224
268
|
</div>
|
|
269
|
+
<h4 style="grid-column: span 5">With Text</h4>
|
|
225
270
|
<div style="grid-column: span 5" class="compound-commands">
|
|
226
271
|
<button class="command">Command</button>
|
|
227
272
|
<div class="text">47</div>
|
|
228
273
|
<div class="spacer"></div>
|
|
229
274
|
</div>
|
|
230
|
-
<h4 style="grid-column: span 5">
|
|
275
|
+
<h4 style="grid-column: span 5">Vertical</h4>
|
|
231
276
|
<div class="compound-commands vertical">
|
|
232
|
-
<button class="command">Command</button>
|
|
233
|
-
<div class="text">47</div>
|
|
234
277
|
<div class="spacer"></div>
|
|
278
|
+
<button class="command">Command</button>
|
|
279
|
+
<button class="command"></button>
|
|
235
280
|
</div>
|
|
236
281
|
</article>
|
|
237
282
|
<footer></footer>
|
|
238
283
|
</div>
|
|
239
284
|
<div class="panel">
|
|
240
|
-
<header>
|
|
241
|
-
<article>
|
|
285
|
+
<header><h2 id="panels">Panels</h2></header>
|
|
286
|
+
<article style="display: grid; gap: var(--spacing)">
|
|
287
|
+
<h3>Without Header and Footer</h3>
|
|
288
|
+
<div class="panel">
|
|
289
|
+
<header></header>
|
|
290
|
+
<article>Content</article>
|
|
291
|
+
<footer></footer>
|
|
292
|
+
</div>
|
|
293
|
+
<h3>With Header and Footer</h3>
|
|
294
|
+
<div class="panel">
|
|
295
|
+
<header>Header</header>
|
|
296
|
+
<article>Content</article>
|
|
297
|
+
<footer>Footer</footer>
|
|
298
|
+
</div>
|
|
299
|
+
<h3>With another color variant</h3>
|
|
300
|
+
<div class="panel accent">
|
|
301
|
+
<header>Header</header>
|
|
302
|
+
<article>Content</article>
|
|
303
|
+
<footer>Footer</footer>
|
|
304
|
+
</div>
|
|
305
|
+
<h3>Stacking</h3>
|
|
306
|
+
<p>
|
|
307
|
+
The panel has a translucent background, so when stacking multiple
|
|
308
|
+
panels the background changes slightly with each level.
|
|
309
|
+
</p>
|
|
310
|
+
<div class="panel" style="margin: var(--spacing)">
|
|
311
|
+
<header></header>
|
|
312
|
+
<article>
|
|
313
|
+
<div class="panel" style="margin: var(--spacing)">
|
|
314
|
+
<header></header>
|
|
315
|
+
<article>
|
|
316
|
+
<div class="panel" style="margin: var(--spacing)">
|
|
317
|
+
<header></header>
|
|
318
|
+
<article>Content</article>
|
|
319
|
+
<footer></footer>
|
|
320
|
+
</div>
|
|
321
|
+
</article>
|
|
322
|
+
<footer></footer>
|
|
323
|
+
</div>
|
|
324
|
+
</article>
|
|
325
|
+
<footer></footer>
|
|
326
|
+
</div>
|
|
327
|
+
</article>
|
|
328
|
+
<footer></footer>
|
|
329
|
+
</div>
|
|
330
|
+
<div class="panel">
|
|
331
|
+
<header><h2 id="input">Input</h2></header>
|
|
332
|
+
<article style="display: grid; gap: var(--spacing)">
|
|
333
|
+
<h3>Default</h3>
|
|
242
334
|
<input class="input" />
|
|
335
|
+
<h3>Disabled</h3>
|
|
336
|
+
<input disabled class="input" />
|
|
243
337
|
</article>
|
|
244
338
|
<footer></footer>
|
|
245
339
|
</div>
|
|
246
340
|
<div class="panel">
|
|
247
|
-
<header>Spinner</header>
|
|
341
|
+
<header><h2 id="spinner">Spinner</h2></header>
|
|
248
342
|
<article>
|
|
249
343
|
<div>
|
|
250
|
-
<
|
|
344
|
+
<h3>80px</h3>
|
|
251
345
|
<div class="spinner" style="font-size: 80px"></div>
|
|
252
346
|
<div class="spinner primary-alt" style="font-size: 80px"></div>
|
|
253
347
|
<div class="spinner accent-alt" style="font-size: 80px"></div>
|
|
254
348
|
<div class="spinner accent" style="font-size: 80px"></div>
|
|
255
349
|
<div class="spinner warn" style="font-size: 80px"></div>
|
|
256
|
-
<
|
|
350
|
+
<h3>32px</h3>
|
|
257
351
|
<div class="spinner" style="font-size: 32px"></div>
|
|
258
352
|
<div class="spinner primary-alt" style="font-size: 32px"></div>
|
|
259
353
|
<div class="spinner accent-alt" style="font-size: 32px"></div>
|
|
260
354
|
<div class="spinner accent" style="font-size: 32px"></div>
|
|
261
355
|
<div class="spinner warn" style="font-size: 32px"></div>
|
|
262
|
-
<
|
|
356
|
+
<h3>16px</h3>
|
|
263
357
|
<div class="spinner" style="font-size: 16px"></div>
|
|
264
358
|
<div class="spinner primary-alt" style="font-size: 16px"></div>
|
|
265
359
|
<div class="spinner accent-alt" style="font-size: 16px"></div>
|
|
@@ -272,26 +366,5 @@
|
|
|
272
366
|
</article>
|
|
273
367
|
<footer>Ada Version 5.0.0</footer>
|
|
274
368
|
</div>
|
|
275
|
-
<div
|
|
276
|
-
class="compound-commands"
|
|
277
|
-
style="
|
|
278
|
-
grid-template-columns: auto auto 12rem auto auto 1fr auto auto;
|
|
279
|
-
grid-column: span 2;
|
|
280
|
-
"
|
|
281
|
-
>
|
|
282
|
-
<div class="spacer"></div>
|
|
283
|
-
<button
|
|
284
|
-
class="command"
|
|
285
|
-
style="justify-items: center; align-items: center"
|
|
286
|
-
>
|
|
287
|
-
<div class="spinner" style="font-size: 30px"></div>
|
|
288
|
-
</button>
|
|
289
|
-
<button class="command accent-alt">Command</button>
|
|
290
|
-
<button class="command warn">Command</button>
|
|
291
|
-
<button disabled class="command">Disabled Command</button>
|
|
292
|
-
<div class="spacer"></div>
|
|
293
|
-
<div class="text">Ada</div>
|
|
294
|
-
<div class="spacer"></div>
|
|
295
|
-
</div>
|
|
296
369
|
</body>
|
|
297
370
|
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ada-ui",
|
|
3
|
-
"version": "0.0.0-beta-v5-
|
|
3
|
+
"version": "0.0.0-beta-v5-20240723181534",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"dev": "concurrently -n scss,serve 'sass scss:css --watch' 'alive-server .'",
|
|
6
6
|
"build": "rm -rf css && sass scss:css -s compressed --no-source-map",
|
package/scss/_command.scss
CHANGED
|
@@ -1,42 +1,40 @@
|
|
|
1
|
-
@mixin button {
|
|
2
|
-
overflow: hidden;
|
|
3
|
-
outline: none;
|
|
4
|
-
color: var(--fg100);
|
|
5
|
-
font-family: inherit;
|
|
6
|
-
cursor: pointer;
|
|
7
|
-
user-select: none;
|
|
8
|
-
vertical-align: middle;
|
|
9
|
-
transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
|
|
10
|
-
|
|
11
|
-
&:disabled {
|
|
12
|
-
opacity: 0.6;
|
|
13
|
-
filter: saturate(0.2);
|
|
14
|
-
cursor: default;
|
|
15
|
-
pointer-events: none;
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
|
|
19
1
|
.command {
|
|
20
|
-
@include button;
|
|
21
2
|
background-color: var(--bg900);
|
|
22
3
|
box-shadow: var(--box-shadow);
|
|
23
4
|
display: grid;
|
|
24
5
|
align-items: end;
|
|
25
6
|
justify-items: end;
|
|
26
7
|
text-align: end;
|
|
27
|
-
font-size: 1.1rem;
|
|
28
8
|
border-style: solid;
|
|
29
9
|
border-color: transparent;
|
|
30
10
|
border-width: 0 0 0 var(--focus-border-width);
|
|
31
|
-
padding:
|
|
11
|
+
padding: var(--spacing-xs) var(--spacing-sm);
|
|
32
12
|
min-height: 3rem;
|
|
33
13
|
min-width: 3rem;
|
|
34
|
-
border-radius:
|
|
14
|
+
border-radius: var(--border-radius);
|
|
15
|
+
overflow: hidden;
|
|
16
|
+
outline: none;
|
|
17
|
+
color: var(--fg100);
|
|
18
|
+
font-family: inherit;
|
|
19
|
+
font-size: var(--scale-base);
|
|
20
|
+
cursor: pointer;
|
|
21
|
+
user-select: none;
|
|
22
|
+
vertical-align: middle;
|
|
23
|
+
transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
|
|
35
24
|
|
|
36
25
|
&.flash {
|
|
37
26
|
animation: flash-background 1s ease-in-out infinite;
|
|
38
27
|
}
|
|
39
28
|
|
|
29
|
+
&:disabled {
|
|
30
|
+
opacity: 0.7;
|
|
31
|
+
//filter: saturate(0.2);
|
|
32
|
+
cursor: default;
|
|
33
|
+
pointer-events: none;
|
|
34
|
+
background: #6d6d6d;
|
|
35
|
+
color: #ededed;
|
|
36
|
+
}
|
|
37
|
+
|
|
40
38
|
&.outline {
|
|
41
39
|
background-color: transparent;
|
|
42
40
|
border-color: var(--bg800);
|
|
@@ -45,6 +43,11 @@
|
|
|
45
43
|
&.flash {
|
|
46
44
|
animation-name: flash-border;
|
|
47
45
|
}
|
|
46
|
+
|
|
47
|
+
&:disabled {
|
|
48
|
+
background: transparent;
|
|
49
|
+
border-color: #6d6d6d;
|
|
50
|
+
}
|
|
48
51
|
}
|
|
49
52
|
|
|
50
53
|
&:focus {
|
|
@@ -61,7 +64,7 @@
|
|
|
61
64
|
.compound-commands {
|
|
62
65
|
display: inline-grid;
|
|
63
66
|
grid-auto-flow: column;
|
|
64
|
-
gap: var(--
|
|
67
|
+
gap: var(--spacing-sm);
|
|
65
68
|
|
|
66
69
|
> .spacer {
|
|
67
70
|
background-color: var(--bg900);
|
|
@@ -76,16 +79,16 @@
|
|
|
76
79
|
}
|
|
77
80
|
|
|
78
81
|
> .text {
|
|
79
|
-
font-size:
|
|
80
|
-
line-height:
|
|
82
|
+
font-size: var(--scale-3xl);
|
|
83
|
+
line-height: var(--scale-3xl);
|
|
81
84
|
align-self: center;
|
|
82
|
-
padding:
|
|
85
|
+
padding: var(--spacing-xs);
|
|
83
86
|
}
|
|
84
87
|
|
|
85
|
-
>
|
|
88
|
+
> .command,
|
|
86
89
|
.spacer {
|
|
87
90
|
&:first-child {
|
|
88
|
-
border-radius:
|
|
91
|
+
border-radius: var(--border-radius) 0 0 var(--border-radius);
|
|
89
92
|
}
|
|
90
93
|
|
|
91
94
|
&:not(:first-child):not(:last-child) {
|
|
@@ -93,7 +96,7 @@
|
|
|
93
96
|
}
|
|
94
97
|
|
|
95
98
|
&:last-child {
|
|
96
|
-
border-radius: 0
|
|
99
|
+
border-radius: 0 var(--border-radius) var(--border-radius) 0;
|
|
97
100
|
}
|
|
98
101
|
}
|
|
99
102
|
|
|
@@ -104,14 +107,14 @@
|
|
|
104
107
|
justify-self: center;
|
|
105
108
|
}
|
|
106
109
|
|
|
107
|
-
>
|
|
110
|
+
> .command,
|
|
108
111
|
.spacer {
|
|
109
112
|
&:first-child {
|
|
110
|
-
border-radius:
|
|
113
|
+
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
|
111
114
|
}
|
|
112
115
|
|
|
113
116
|
&:last-child {
|
|
114
|
-
border-radius: 0 0
|
|
117
|
+
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
|
115
118
|
}
|
|
116
119
|
}
|
|
117
120
|
}
|
package/scss/_global.scss
CHANGED
|
@@ -1,13 +1,19 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--font-family: "Open Sans", sans-serif;
|
|
3
3
|
--font-size: 16px;
|
|
4
|
+
--scale-sm: 0.85rem;
|
|
5
|
+
--scale-base: 1rem;
|
|
6
|
+
--scale-lg: 1.2rem;
|
|
7
|
+
--scale-xl: 1.4rem;
|
|
8
|
+
--scale-2xl: 1.6rem;
|
|
9
|
+
--scale-3xl: 1.8rem;
|
|
4
10
|
--box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
|
|
5
|
-
--
|
|
6
|
-
--
|
|
7
|
-
--spacing:
|
|
8
|
-
--border-width-sm: 0.08rem;
|
|
11
|
+
--spacing-xs: 2px;
|
|
12
|
+
--spacing-sm: 6px;
|
|
13
|
+
--spacing: 10px;
|
|
9
14
|
--border-width: 0.15rem;
|
|
10
15
|
--focus-border-width: 0.15rem;
|
|
16
|
+
--border-radius: 0.3rem;
|
|
11
17
|
|
|
12
18
|
@media screen and (min-width: 768px) {
|
|
13
19
|
--font-size: 14px;
|
package/scss/_input.scss
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
.input {
|
|
2
|
-
border-radius:
|
|
2
|
+
border-radius: var(--border-radius);
|
|
3
3
|
box-shadow: var(--box-shadow);
|
|
4
4
|
outline: none;
|
|
5
|
-
border: var(--border-width
|
|
5
|
+
border: var(--border-width) solid var(--bg700);
|
|
6
6
|
color: var(--fg100);
|
|
7
7
|
font-family: inherit;
|
|
8
8
|
background-color: transparent;
|
|
9
9
|
transition: border-color 0.15s ease-in-out;
|
|
10
|
-
padding:
|
|
11
|
-
font-size:
|
|
10
|
+
padding: var(--spacing-sm);
|
|
11
|
+
font-size: var(--scale-base);
|
|
12
12
|
|
|
13
13
|
&:focus {
|
|
14
|
-
border: var(--border-width
|
|
14
|
+
border: var(--border-width) solid var(--bg600);
|
|
15
15
|
}
|
|
16
16
|
&:disabled {
|
|
17
17
|
opacity: 0.4;
|
package/scss/_panel.scss
CHANGED
|
@@ -1,32 +1,47 @@
|
|
|
1
|
-
|
|
1
|
+
%corner-base {
|
|
2
|
+
content: "";
|
|
3
|
+
border-style: solid;
|
|
4
|
+
border-color: var(--bg800);
|
|
5
|
+
position: absolute;
|
|
6
|
+
height: 1rem;
|
|
7
|
+
width: 1rem;
|
|
8
|
+
z-index: 2;
|
|
9
|
+
}
|
|
2
10
|
|
|
3
11
|
.panel {
|
|
4
12
|
background: var(--panel-background);
|
|
5
13
|
box-shadow: var(--box-shadow);
|
|
6
|
-
border-radius:
|
|
14
|
+
border-radius: var(--border-radius);
|
|
7
15
|
display: grid;
|
|
8
16
|
grid-template-rows: auto 1fr auto;
|
|
9
17
|
overflow: auto;
|
|
10
18
|
|
|
11
19
|
> header {
|
|
12
20
|
position: relative;
|
|
13
|
-
//@extend %h3; --> TODO use font-size token
|
|
14
21
|
@extend %header;
|
|
15
|
-
font-size:
|
|
22
|
+
font-size: var(--scale-xl);
|
|
16
23
|
|
|
17
|
-
padding:
|
|
24
|
+
padding: var(--spacing-sm) var(--spacing);
|
|
18
25
|
|
|
19
|
-
|
|
20
|
-
@
|
|
26
|
+
&::before {
|
|
27
|
+
@extend %corner-base;
|
|
28
|
+
border-width: var(--border-width) 0 0 var(--border-width);
|
|
29
|
+
border-radius: var(--border-radius) 0 0 0;
|
|
30
|
+
left: 0;
|
|
31
|
+
top: 0;
|
|
21
32
|
}
|
|
22
|
-
|
|
23
|
-
@
|
|
33
|
+
&::after {
|
|
34
|
+
@extend %corner-base;
|
|
35
|
+
border-width: var(--border-width) var(--border-width) 0 0;
|
|
36
|
+
border-radius: 0 var(--border-radius) 0 0;
|
|
37
|
+
right: 0;
|
|
38
|
+
top: 0;
|
|
24
39
|
}
|
|
25
40
|
}
|
|
26
41
|
|
|
27
42
|
> article {
|
|
28
43
|
z-index: 1;
|
|
29
|
-
padding: 0
|
|
44
|
+
padding: 0 var(--spacing);
|
|
30
45
|
overflow: auto;
|
|
31
46
|
|
|
32
47
|
&::-webkit-scrollbar {
|
|
@@ -47,15 +62,23 @@
|
|
|
47
62
|
position: relative;
|
|
48
63
|
|
|
49
64
|
color: var(--fg200);
|
|
50
|
-
padding:
|
|
51
|
-
font-size:
|
|
65
|
+
padding: var(--spacing-sm) var(--spacing);
|
|
66
|
+
font-size: var(--scale-sm);
|
|
52
67
|
text-align: right;
|
|
53
68
|
|
|
54
|
-
|
|
55
|
-
@
|
|
69
|
+
&::before {
|
|
70
|
+
@extend %corner-base;
|
|
71
|
+
border-width: 0 0 var(--border-width) var(--border-width);
|
|
72
|
+
border-radius: 0 0 0 var(--border-radius);
|
|
73
|
+
left: 0;
|
|
74
|
+
bottom: 0;
|
|
56
75
|
}
|
|
57
|
-
|
|
58
|
-
@
|
|
76
|
+
&::after {
|
|
77
|
+
@extend %corner-base;
|
|
78
|
+
border-width: 0 var(--border-width) var(--border-width) 0;
|
|
79
|
+
border-radius: 0 0 var(--border-radius) 0;
|
|
80
|
+
right: 0;
|
|
81
|
+
bottom: 0;
|
|
59
82
|
}
|
|
60
83
|
}
|
|
61
84
|
}
|
package/scss/_spinner.scss
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
box-sizing: border-box;
|
|
9
9
|
animation: 6s 0.5s rotate ease-in-out alternate infinite;
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
&::before {
|
|
12
12
|
content: "";
|
|
13
13
|
position: absolute;
|
|
14
14
|
top: 0;
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
box-shadow: 0px 12px 10px -12px #000a, 0px -12px 10px -12px #000a;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
&::after {
|
|
27
27
|
content: "";
|
|
28
28
|
position: absolute;
|
|
29
29
|
top: 0;
|
package/scss/_typography.scss
CHANGED
|
@@ -2,8 +2,6 @@ h1,
|
|
|
2
2
|
h2,
|
|
3
3
|
h3,
|
|
4
4
|
h4,
|
|
5
|
-
h5,
|
|
6
|
-
h6,
|
|
7
5
|
%header {
|
|
8
6
|
font-weight: 300;
|
|
9
7
|
text-shadow: 0 0 4px var(--bg700);
|
|
@@ -11,37 +9,17 @@ h6,
|
|
|
11
9
|
}
|
|
12
10
|
|
|
13
11
|
h1 {
|
|
14
|
-
font-size:
|
|
15
|
-
margin: 1rem 0 2rem 0;
|
|
16
|
-
|
|
17
|
-
&.m-0 {
|
|
18
|
-
margin: 0;
|
|
19
|
-
}
|
|
12
|
+
font-size: var(--scale-3xl);
|
|
20
13
|
}
|
|
21
14
|
|
|
22
15
|
h2 {
|
|
23
|
-
font-size:
|
|
24
|
-
margin: 1rem 0 1.5rem 0;
|
|
25
|
-
|
|
26
|
-
&.m-0 {
|
|
27
|
-
margin: 0;
|
|
28
|
-
}
|
|
16
|
+
font-size: var(--scale-2xl);
|
|
29
17
|
}
|
|
30
18
|
|
|
31
19
|
h3 {
|
|
32
|
-
font-size:
|
|
33
|
-
margin: 0.5rem 0 1.5rem 0;
|
|
34
|
-
|
|
35
|
-
&.m-0 {
|
|
36
|
-
margin: 0;
|
|
37
|
-
}
|
|
20
|
+
font-size: var(--scale-xl);
|
|
38
21
|
}
|
|
39
22
|
|
|
40
23
|
h4 {
|
|
41
|
-
font-size:
|
|
42
|
-
margin: 0.5rem 0 0.5rem 0;
|
|
43
|
-
|
|
44
|
-
&.m-0 {
|
|
45
|
-
margin: 0;
|
|
46
|
-
}
|
|
24
|
+
font-size: var(--scale-lg);
|
|
47
25
|
}
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
.commands {
|
|
29
29
|
position: relative;
|
|
30
30
|
display: grid;
|
|
31
|
-
gap: var(--gap);
|
|
31
|
+
gap: var(--command-gap);
|
|
32
32
|
|
|
33
33
|
&:before,
|
|
34
34
|
&:after {
|
|
@@ -40,8 +40,8 @@
|
|
|
40
40
|
|
|
41
41
|
&:not(.vertical) {
|
|
42
42
|
grid-auto-flow: column;
|
|
43
|
-
padding-left: calc(1rem + var(--gap));
|
|
44
|
-
padding-right: calc(1rem + var(--gap));
|
|
43
|
+
padding-left: calc(1rem + var(--command-gap));
|
|
44
|
+
padding-right: calc(1rem + var(--command-gap));
|
|
45
45
|
|
|
46
46
|
&:before,
|
|
47
47
|
&:after {
|
|
@@ -68,8 +68,8 @@
|
|
|
68
68
|
&.vertical {
|
|
69
69
|
grid-auto-flow: row;
|
|
70
70
|
min-width: 12rem;
|
|
71
|
-
padding-top: calc(1rem + var(--gap));
|
|
72
|
-
padding-bottom: calc(1rem + var(--gap));
|
|
71
|
+
padding-top: calc(1rem + var(--command-gap));
|
|
72
|
+
padding-bottom: calc(1rem + var(--command-gap));
|
|
73
73
|
|
|
74
74
|
&:before,
|
|
75
75
|
&:after {
|
package/css/ada.blue-old.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.warn,.accent,.shade2,.shade1,.primary,:root{--fg100: lch(var(--100));--fg200: lch(var(--200));--bg600: lch(var(--600));--bg700: lch(var(--700));--bg800: lch(var(--800));--bg900: lch(var(--900));--panel-background: lch(var(--800) / 0.1)}.primary,:root{--h: 205;--s: 80%;--l: 23%;--h-light: 205;--s-light: 80%;--l-light: 40%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}:root{--bg: hsl(207, 61%, 7%)}.shade1{--h: 198;--s: 90%;--l: 30%;--h-light: 198;--s-light: 90%;--l-light: 58%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.shade2{--h: 185;--s: 50%;--l: 30%;--h-light: 185;--s-light: 50%;--l-light: 50%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.accent{--h: 146;--s: 58%;--l: 20%;--h-light: 146;--s-light: 58%;--l-light: 48%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.warn{--h: 0;--s: 100%;--l: 28%;--h-light: 0;--s-light: 85%;--l-light: 48%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}
|
package/css/ada.green-old.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.warn,.accent,.shade2,.shade1,.primary,:root{--fg100: lch(var(--100));--fg200: lch(var(--200));--bg600: lch(var(--600));--bg700: lch(var(--700));--bg800: lch(var(--800));--bg900: lch(var(--900));--panel-background: lch(var(--800) / 0.1)}.primary,:root{--h: 105;--s: 50%;--l: 24%;--h-light: 102;--s-light: 72%;--l-light: 34%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}:root{--bg: hsl(135, 34%, 12%)}.shade1{--h: 150;--s: 70%;--l: 20%;--h-light: 133;--s-light: 82%;--l-light: 30%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.shade2{--h: 168;--s: 57%;--l: 32%;--h-light: 167;--s-light: 68%;--l-light: 40%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.accent{--h: 11;--s: 74%;--l: 45%;--h-light: 10;--s-light: 89%;--l-light: 56%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.warn{--h: 0;--s: 100%;--l: 28%;--h-light: 0;--s-light: 85%;--l-light: 48%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}
|
package/scss/_corner.scss
DELETED
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
@mixin corner($location, $style: "default") {
|
|
2
|
-
--corner-border-width: var(--border-width);
|
|
3
|
-
|
|
4
|
-
content: "";
|
|
5
|
-
border-style: solid;
|
|
6
|
-
border-color: var(--bg800);
|
|
7
|
-
position: absolute;
|
|
8
|
-
height: 1rem;
|
|
9
|
-
width: 1rem;
|
|
10
|
-
z-index: 2;
|
|
11
|
-
|
|
12
|
-
@if $style == "light" {
|
|
13
|
-
--corner-border-width: var(--border-width-sm);
|
|
14
|
-
|
|
15
|
-
border-color: var(--bg700);
|
|
16
|
-
height: 0.75rem;
|
|
17
|
-
width: 0.75rem;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
@if $location == "top-left" {
|
|
21
|
-
border-width: var(--corner-border-width) 0 0 var(--corner-border-width);
|
|
22
|
-
border-radius: 0.3rem 0 0 0;
|
|
23
|
-
left: 0;
|
|
24
|
-
top: 0;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
@if $location == "top-right" {
|
|
28
|
-
border-width: var(--corner-border-width) var(--corner-border-width) 0 0;
|
|
29
|
-
border-radius: 0 0.3rem 0 0;
|
|
30
|
-
right: 0;
|
|
31
|
-
top: 0;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
@if $location == "bottom-left" {
|
|
35
|
-
border-width: 0 0 var(--corner-border-width) var(--corner-border-width);
|
|
36
|
-
border-radius: 0 0 0 0.3rem;
|
|
37
|
-
left: 0;
|
|
38
|
-
bottom: 0;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
@if $location == "bottom-right" {
|
|
42
|
-
border-width: 0 var(--corner-border-width) var(--corner-border-width) 0;
|
|
43
|
-
border-radius: 0 0 0.3rem 0;
|
|
44
|
-
right: 0;
|
|
45
|
-
bottom: 0;
|
|
46
|
-
}
|
|
47
|
-
}
|
package/todo
DELETED
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|