ada-ui 0.0.0-beta-v5-20240724160317 → 0.0.0-beta-v5-20240727181205
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 +1 -1
- package/css/ada.blue-light.css +1 -1
- package/css/ada.blue.css +1 -1
- package/css/ada.css +1 -1
- package/css/ada.green.css +1 -0
- package/index.html +149 -76
- package/package.json +1 -1
- package/scss/_ada.theme-base.scss +10 -7
- package/scss/_command.scss +19 -11
- package/scss/_global.scss +2 -2
- package/scss/_input.scss +3 -3
- package/scss/_panel.scss +1 -1
- package/scss/_spinner.scss +2 -2
- package/scss/_typography.scss +2 -2
- package/scss/ada.blue-light.scss +10 -41
- package/scss/ada.blue.scss +8 -40
- package/scss/ada.green.scss +1 -0
package/CHANGELOG.md
CHANGED
package/css/ada.blue-light.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.warn,.
|
|
1
|
+
.warn,.shade2,.shade3,.shade1,.primary,:root{--color100: oklch(0.91 0.05 var(--hue));--color500: oklch(0.46 0.13 var(--hue));--color600: oklch(0.41 0.11 var(--hue));--color700: oklch(0.36 0.09 var(--hue));--color800: oklch(0.31 0.07 var(--hue));--color950: oklch(0.18 0.03 var(--hue));--bg-body: var(--bg-body-override, var(--color950));--fg-body: var(--fg-body-override, var(--color100));--panel-background: oklch(var(--500) / 0.1)}.warn,.shade2,.shade3,.shade1,.primary,:root{--bg-body-override: var(--color100);--fg-body-override: var(--color800)}.primary,:root{--hue: 246}.shade1{--hue: 225}.shade3{--hue: 165}.shade2{--hue: 190}.warn{--hue: 29}
|
package/css/ada.blue.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.warn,.
|
|
1
|
+
.warn,.shade2,.shade3,.shade1,.primary,:root{--color100: oklch(0.91 0.05 var(--hue));--color500: oklch(0.46 0.13 var(--hue));--color600: oklch(0.41 0.11 var(--hue));--color700: oklch(0.36 0.09 var(--hue));--color800: oklch(0.31 0.07 var(--hue));--color950: oklch(0.18 0.03 var(--hue));--bg-body: var(--bg-body-override, var(--color950));--fg-body: var(--fg-body-override, var(--color100));--panel-background: oklch(var(--500) / 0.1)}.primary,:root{--hue: 246}.shade1{--hue: 225}.shade3{--hue: 165}.shade2{--hue: 190}.warn{--hue: 29}
|
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;--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}}.panel>article::-webkit-scrollbar,body::-webkit-scrollbar{width:var(--spacing-sm);background:transparent}.panel>article::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb{min-width:1rem;border-style:solid;border-color:transparent;border-width:var(--spacing-sm);background:var(--
|
|
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}}.panel>article::-webkit-scrollbar,body::-webkit-scrollbar{width:var(--spacing-sm);background:transparent}.panel>article::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb{min-width:1rem;border-style:solid;border-color:transparent;border-width:var(--spacing-sm);background:var(--color700);box-sizing:border-box;background-clip:border-box}html{font-family:var(--font-family);font-weight:400;font-size:var(--font-size)}body{font-size:1rem;padding:var(--spacing);background:var(--bg-body);color:var(--fg-body)}h1,h2,h3,h4,.panel>header{font-weight:300;text-shadow:0 0 4px oklch(var(--400)/0.5);color:var(--fg-body)}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(--color800);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(--color100);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(--color700);border-width:var(--border-width);color:var(--fg-body)}.command.outline.flash{animation-name:flash-border}.command.outline:disabled{background:transparent;border-color:#6d6d6d;color:#6d6d6d}.command.outline:focus{border-color:var(--color500)}.command.outline:active{color:var(--color100)}.command:focus{border-left-color:var(--color500)}.command:active{border-color:var(--color500);background-color:var(--color500);animation-play-state:paused}.compound-commands{display:inline-flex;gap:var(--spacing-sm)}.compound-commands>.spacer{background-color:var(--color800);box-shadow:var(--box-shadow);min-width:1rem;min-height:1rem}.compound-commands>.spacer.outline{background-color:transparent;border:var(--border-width) solid var(--color700)}.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{flex-direction:column}.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(--color600)}}@keyframes flash-border{50%{border-color:var(--color500)}}.input{border-radius:var(--border-radius);box-shadow:var(--box-shadow);outline:none;border:var(--border-width) solid var(--color600);color:var(--fg-body);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(--color500)}.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(--color700);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:var(--spacing);overflow:auto}.panel>footer{position:relative;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(--color700) transparent;animation:4s .5s inset1 ease-in-out infinite;box-shadow:0px 12px 10px -12px rgba(0,0,0,.4),0px -12px 10px -12px rgba(0,0,0,.4)}.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(--color500);animation:4s .5s inset2 ease-in-out infinite;box-shadow:12px 0px 10px -12px rgba(0,0,0,.4),-12px 0px 10px -12px rgba(0,0,0,.4)}@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)}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
package/index.html
CHANGED
|
@@ -35,10 +35,27 @@
|
|
|
35
35
|
align-items: start;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
+
.typography {
|
|
39
|
+
display: grid;
|
|
40
|
+
grid-template-columns: repeat(2, auto) 1fr;
|
|
41
|
+
gap: var(--spacing);
|
|
42
|
+
justify-content: start;
|
|
43
|
+
}
|
|
44
|
+
.typography > p {
|
|
45
|
+
grid-column: span 3;
|
|
46
|
+
display: grid;
|
|
47
|
+
grid-template-columns: subgrid;
|
|
48
|
+
gap: var(--spacing);
|
|
49
|
+
}
|
|
50
|
+
|
|
38
51
|
.color-shades {
|
|
39
52
|
display: grid;
|
|
40
53
|
}
|
|
41
54
|
|
|
55
|
+
.color-shades > h3 {
|
|
56
|
+
margin-bottom: var(--spacing-sm);
|
|
57
|
+
}
|
|
58
|
+
|
|
42
59
|
.color-shades > div {
|
|
43
60
|
display: inline-grid;
|
|
44
61
|
align-items: center;
|
|
@@ -47,40 +64,66 @@
|
|
|
47
64
|
height: 3rem;
|
|
48
65
|
box-sizing: border-box;
|
|
49
66
|
color: var(--color100);
|
|
67
|
+
border-bottom: 1px solid transparent;
|
|
50
68
|
}
|
|
51
69
|
|
|
52
|
-
.color-shades > div
|
|
53
|
-
|
|
70
|
+
.color-shades > div:last-of-type {
|
|
71
|
+
border-bottom: none;
|
|
54
72
|
}
|
|
55
73
|
|
|
56
|
-
.color-shades > div
|
|
57
|
-
|
|
74
|
+
.color-shades.usage > div {
|
|
75
|
+
border-color: var(--color600);
|
|
76
|
+
width: auto;
|
|
77
|
+
padding: 0 1rem;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.color-shades > div.color950 {
|
|
81
|
+
background: var(--color950);
|
|
58
82
|
}
|
|
59
83
|
|
|
60
|
-
.color-shades > div.
|
|
61
|
-
background: var(--
|
|
84
|
+
.color-shades > div.color800 {
|
|
85
|
+
background: var(--color800);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.color-shades > div.color700 {
|
|
89
|
+
background: var(--color700);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.color-shades > div.color600 {
|
|
93
|
+
background: var(--color600);
|
|
62
94
|
}
|
|
63
95
|
|
|
64
|
-
.color-shades > div.
|
|
65
|
-
background: var(--
|
|
96
|
+
.color-shades > div.color500 {
|
|
97
|
+
background: var(--color500);
|
|
66
98
|
}
|
|
67
99
|
|
|
68
100
|
.color-shades > div.color100 {
|
|
69
101
|
background: var(--color100);
|
|
70
|
-
color: var(--
|
|
102
|
+
color: var(--color800);
|
|
71
103
|
}
|
|
72
104
|
|
|
73
|
-
.
|
|
105
|
+
.spacing {
|
|
74
106
|
display: grid;
|
|
75
|
-
grid-template-columns: auto
|
|
107
|
+
grid-template-columns: repeat(2, auto) 1fr;
|
|
76
108
|
gap: var(--spacing);
|
|
77
|
-
|
|
109
|
+
align-items: center;
|
|
78
110
|
}
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
display:
|
|
82
|
-
|
|
83
|
-
|
|
111
|
+
|
|
112
|
+
.spacing-box {
|
|
113
|
+
display: inline-block;
|
|
114
|
+
background: var(--color500);
|
|
115
|
+
width: var(--spacing);
|
|
116
|
+
height: var(--spacing);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.spacing-box.xs {
|
|
120
|
+
width: var(--spacing-xs);
|
|
121
|
+
height: var(--spacing-xs);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.spacing-box.sm {
|
|
125
|
+
width: var(--spacing-sm);
|
|
126
|
+
height: var(--spacing-sm);
|
|
84
127
|
}
|
|
85
128
|
</style>
|
|
86
129
|
</head>
|
|
@@ -88,7 +131,7 @@
|
|
|
88
131
|
<body
|
|
89
132
|
style="
|
|
90
133
|
display: grid;
|
|
91
|
-
grid-template-columns:
|
|
134
|
+
grid-template-columns: min(12vw) 1fr;
|
|
92
135
|
grid-template-rows: 1fr auto;
|
|
93
136
|
column-gap: var(--spacing);
|
|
94
137
|
"
|
|
@@ -98,12 +141,12 @@
|
|
|
98
141
|
style="position: sticky; top: var(--spacing)"
|
|
99
142
|
>
|
|
100
143
|
<div class="spacer"></div>
|
|
101
|
-
<a href="#typography" class="command
|
|
102
|
-
<a href="#
|
|
103
|
-
<a href="#
|
|
104
|
-
<a href="#page-layout" class="command
|
|
105
|
-
<a href="#
|
|
106
|
-
<a href="#
|
|
144
|
+
<a href="#typography" class="command shade1">Typography</a>
|
|
145
|
+
<a href="#spacing" class="command shade1">Spacing</a>
|
|
146
|
+
<a href="#colors" class="command shade1">Colors</a>
|
|
147
|
+
<a href="#page-layout" class="command shade1">Page Layout</a>
|
|
148
|
+
<a href="#command" class="command shade3">Command</a>
|
|
149
|
+
<a href="#panel" class="command shade2">Panel</a>
|
|
107
150
|
<a href="#input" class="command">Input</a>
|
|
108
151
|
<a href="#spinner" class="command">Spinner</a>
|
|
109
152
|
<div style="flex: 1" class="spacer"></div>
|
|
@@ -124,82 +167,112 @@
|
|
|
124
167
|
<article class="typography">
|
|
125
168
|
<p style="font-size: var(--scale-3xl)">
|
|
126
169
|
<code>scale-3xl</code>
|
|
170
|
+
<span>1.8rem</span>
|
|
127
171
|
<span>Headline 1, Text in Compound Commands</span>
|
|
128
172
|
</p>
|
|
129
173
|
<p style="font-size: var(--scale-2xl)">
|
|
130
174
|
<code>scale-2xl</code>
|
|
175
|
+
<span>1.6rem</span>
|
|
131
176
|
<span>Headline 2</span>
|
|
132
177
|
</p>
|
|
133
178
|
<p style="font-size: var(--scale-xl)">
|
|
134
179
|
<code>scale-xl</code>
|
|
180
|
+
<span>1.4rem</span>
|
|
135
181
|
<span>Headline 3</span>
|
|
136
182
|
</p>
|
|
137
183
|
<p style="font-size: var(--scale-lg)">
|
|
138
184
|
<code>scale-lg</code>
|
|
185
|
+
<span>1.2rem</span>
|
|
139
186
|
<span>Headline 4</span>
|
|
140
187
|
</p>
|
|
141
188
|
<p style="font-size: var(--scale-base)">
|
|
142
189
|
<code>scale-base</code>
|
|
190
|
+
<span>1rem</span>
|
|
143
191
|
<span>Normal Text, Command Label</span>
|
|
144
192
|
</p>
|
|
145
193
|
<p style="font-size: var(--scale-sm)">
|
|
146
194
|
<code>scale-sm</code>
|
|
195
|
+
<span>0.85rem</span>
|
|
147
196
|
<span>Small Text, Panel Footer</span>
|
|
148
197
|
</p>
|
|
149
198
|
</article>
|
|
150
199
|
<footer></footer>
|
|
151
200
|
</div>
|
|
201
|
+
<div class="panel">
|
|
202
|
+
<header><h2 id="spacing">Spacing</h2></header>
|
|
203
|
+
<article class="spacing">
|
|
204
|
+
<code>--spacing-xs</code>
|
|
205
|
+
<span>2px</span>
|
|
206
|
+
<div class="spacing-box xs shade3"></div>
|
|
207
|
+
<code>--spacing-sm</code>
|
|
208
|
+
<span>6px</span>
|
|
209
|
+
<div class="spacing-box sm shade3"></div>
|
|
210
|
+
<code>--spacing</code>
|
|
211
|
+
<span>10px</span>
|
|
212
|
+
<div class="spacing-box shade3"></div>
|
|
213
|
+
</article>
|
|
214
|
+
<footer></footer>
|
|
215
|
+
</div>
|
|
152
216
|
<div class="panel">
|
|
153
217
|
<header><h2 id="colors">Colors</h2></header>
|
|
154
|
-
<article style="display: flex; gap:
|
|
218
|
+
<article style="display: flex; gap: var(--spacing); flex-wrap: wrap">
|
|
219
|
+
<div class="color-shades usage">
|
|
220
|
+
<h3> </h3>
|
|
221
|
+
<div>Text Color</div>
|
|
222
|
+
<div>Active/Focus State</div>
|
|
223
|
+
<div>Border/Flash Color</div>
|
|
224
|
+
<div>Corner Color</div>
|
|
225
|
+
<div>Command Color</div>
|
|
226
|
+
<div>Background</div>
|
|
227
|
+
</div>
|
|
155
228
|
<div class="color-shades">
|
|
156
229
|
<h3>Primary</h3>
|
|
157
230
|
<div class="color100">100</div>
|
|
158
|
-
<div class="color300">300</div>
|
|
159
|
-
<div class="color400">400</div>
|
|
160
231
|
<div class="color500">500</div>
|
|
161
232
|
<div class="color600">600</div>
|
|
233
|
+
<div class="color700">700</div>
|
|
234
|
+
<div class="color800">800</div>
|
|
235
|
+
<div class="color950">950</div>
|
|
162
236
|
</div>
|
|
163
237
|
<div class="color-shades">
|
|
164
|
-
<h3>
|
|
165
|
-
<div class="color100
|
|
166
|
-
<div class="
|
|
167
|
-
<div class="
|
|
168
|
-
<div class="
|
|
169
|
-
<div class="
|
|
238
|
+
<h3>Shade 1</h3>
|
|
239
|
+
<div class="color100 shade1">100</div>
|
|
240
|
+
<div class="color500 shade1">500</div>
|
|
241
|
+
<div class="color600 shade1">600</div>
|
|
242
|
+
<div class="color700 shade1">700</div>
|
|
243
|
+
<div class="color800 shade1">800</div>
|
|
244
|
+
<div class="color950 shade1">950</div>
|
|
170
245
|
</div>
|
|
171
246
|
<div class="color-shades">
|
|
172
|
-
<h3>
|
|
173
|
-
<div class="color100
|
|
174
|
-
<div class="
|
|
175
|
-
<div class="
|
|
176
|
-
<div class="
|
|
177
|
-
<div class="
|
|
247
|
+
<h3>Shade 2</h3>
|
|
248
|
+
<div class="color100 shade2">100</div>
|
|
249
|
+
<div class="color500 shade2">500</div>
|
|
250
|
+
<div class="color600 shade2">600</div>
|
|
251
|
+
<div class="color700 shade2">700</div>
|
|
252
|
+
<div class="color800 shade2">800</div>
|
|
253
|
+
<div class="color950 shade2">950</div>
|
|
178
254
|
</div>
|
|
179
255
|
<div class="color-shades">
|
|
180
|
-
<h3>
|
|
181
|
-
<div class="color100
|
|
182
|
-
<div class="
|
|
183
|
-
<div class="
|
|
184
|
-
<div class="
|
|
185
|
-
<div class="
|
|
256
|
+
<h3>Shade 3</h3>
|
|
257
|
+
<div class="color100 shade3">100</div>
|
|
258
|
+
<div class="color500 shade3">500</div>
|
|
259
|
+
<div class="color600 shade3">600</div>
|
|
260
|
+
<div class="color700 shade3">700</div>
|
|
261
|
+
<div class="color800 shade3">800</div>
|
|
262
|
+
<div class="color950 shade3">950</div>
|
|
186
263
|
</div>
|
|
187
264
|
<div class="color-shades">
|
|
188
265
|
<h3>Warn</h3>
|
|
189
266
|
<div class="color100 warn">100</div>
|
|
190
|
-
<div class="color300 warn">300</div>
|
|
191
|
-
<div class="color400 warn">400</div>
|
|
192
267
|
<div class="color500 warn">500</div>
|
|
193
268
|
<div class="color600 warn">600</div>
|
|
269
|
+
<div class="color700 warn">700</div>
|
|
270
|
+
<div class="color800 warn">800</div>
|
|
271
|
+
<div class="color950 warn">950</div>
|
|
194
272
|
</div>
|
|
195
273
|
</article>
|
|
196
274
|
<footer></footer>
|
|
197
275
|
</div>
|
|
198
|
-
<div class="panel">
|
|
199
|
-
<header><h2 id="spacing">Spacing</h2></header>
|
|
200
|
-
<article>TODO</article>
|
|
201
|
-
<footer></footer>
|
|
202
|
-
</div>
|
|
203
276
|
<div class="panel">
|
|
204
277
|
<header><h2 id="page-layout">Page Layout</h2></header>
|
|
205
278
|
<article>
|
|
@@ -215,7 +288,7 @@
|
|
|
215
288
|
<footer></footer>
|
|
216
289
|
</div>
|
|
217
290
|
<div class="panel">
|
|
218
|
-
<header><h2 id="
|
|
291
|
+
<header><h2 id="command">Command</h2></header>
|
|
219
292
|
<article
|
|
220
293
|
style="
|
|
221
294
|
display: inline-grid;
|
|
@@ -226,26 +299,26 @@
|
|
|
226
299
|
>
|
|
227
300
|
<h3 style="grid-column: span 5">Default</h3>
|
|
228
301
|
<button class="command">Command</button>
|
|
229
|
-
<button class="command
|
|
230
|
-
<button class="command
|
|
231
|
-
<button class="command
|
|
302
|
+
<button class="command shade1">Command</button>
|
|
303
|
+
<button class="command shade2">Command</button>
|
|
304
|
+
<button class="command shade3">Command</button>
|
|
232
305
|
<button class="command warn">Command</button>
|
|
233
306
|
<h3 style="grid-column: span 5">Outline</h3>
|
|
234
307
|
<button class="command outline">Command</button>
|
|
235
|
-
<button class="command outline
|
|
236
|
-
<button class="command outline
|
|
237
|
-
<button class="command outline
|
|
308
|
+
<button class="command outline shade1">Command</button>
|
|
309
|
+
<button class="command outline shade2">Command</button>
|
|
310
|
+
<button class="command outline shade3">Command</button>
|
|
238
311
|
<button class="command outline warn">Command</button>
|
|
239
312
|
<h3 style="grid-column: span 5">Flashing</h3>
|
|
240
313
|
<button class="command flash">Command</button>
|
|
241
|
-
<button class="command flash
|
|
242
|
-
<button class="command flash
|
|
243
|
-
<button class="command flash
|
|
314
|
+
<button class="command flash shade1">Command</button>
|
|
315
|
+
<button class="command flash shade2">Command</button>
|
|
316
|
+
<button class="command flash shade3">Command</button>
|
|
244
317
|
<button class="command flash warn">Command</button>
|
|
245
318
|
<button class="command flash outline">Command</button>
|
|
246
|
-
<button class="command flash outline
|
|
247
|
-
<button class="command flash outline
|
|
248
|
-
<button class="command flash outline
|
|
319
|
+
<button class="command flash outline shade1">Command</button>
|
|
320
|
+
<button class="command flash outline shade2">Command</button>
|
|
321
|
+
<button class="command flash outline shade3">Command</button>
|
|
249
322
|
<button class="command flash outline warn">Command</button>
|
|
250
323
|
<h3 style="grid-column: span 5">Disabled</h3>
|
|
251
324
|
<button disabled class="command">Command</button>
|
|
@@ -307,7 +380,7 @@
|
|
|
307
380
|
<footer></footer>
|
|
308
381
|
</div>
|
|
309
382
|
<div class="panel">
|
|
310
|
-
<header><h2 id="
|
|
383
|
+
<header><h2 id="panel">Panel</h2></header>
|
|
311
384
|
<article style="display: grid; gap: var(--spacing)">
|
|
312
385
|
<h3>Without Header and Footer</h3>
|
|
313
386
|
<div class="panel">
|
|
@@ -322,7 +395,7 @@
|
|
|
322
395
|
<footer>Footer</footer>
|
|
323
396
|
</div>
|
|
324
397
|
<h3>With another color variant</h3>
|
|
325
|
-
<div class="panel
|
|
398
|
+
<div class="panel shade3">
|
|
326
399
|
<header>Header</header>
|
|
327
400
|
<article>Content</article>
|
|
328
401
|
<footer>Footer</footer>
|
|
@@ -368,21 +441,21 @@
|
|
|
368
441
|
<div>
|
|
369
442
|
<h3>80px</h3>
|
|
370
443
|
<div class="spinner" style="font-size: 80px"></div>
|
|
371
|
-
<div class="spinner
|
|
372
|
-
<div class="spinner
|
|
373
|
-
<div class="spinner
|
|
444
|
+
<div class="spinner shade1" style="font-size: 80px"></div>
|
|
445
|
+
<div class="spinner shade2" style="font-size: 80px"></div>
|
|
446
|
+
<div class="spinner shade3" style="font-size: 80px"></div>
|
|
374
447
|
<div class="spinner warn" style="font-size: 80px"></div>
|
|
375
448
|
<h3>32px</h3>
|
|
376
449
|
<div class="spinner" style="font-size: 32px"></div>
|
|
377
|
-
<div class="spinner
|
|
378
|
-
<div class="spinner
|
|
379
|
-
<div class="spinner
|
|
450
|
+
<div class="spinner shade1" style="font-size: 32px"></div>
|
|
451
|
+
<div class="spinner shade2" style="font-size: 32px"></div>
|
|
452
|
+
<div class="spinner shade3" style="font-size: 32px"></div>
|
|
380
453
|
<div class="spinner warn" style="font-size: 32px"></div>
|
|
381
454
|
<h3>16px</h3>
|
|
382
455
|
<div class="spinner" style="font-size: 16px"></div>
|
|
383
|
-
<div class="spinner
|
|
384
|
-
<div class="spinner
|
|
385
|
-
<div class="spinner
|
|
456
|
+
<div class="spinner shade1" style="font-size: 16px"></div>
|
|
457
|
+
<div class="spinner shade2" style="font-size: 16px"></div>
|
|
458
|
+
<div class="spinner shade3" style="font-size: 16px"></div>
|
|
386
459
|
<div class="spinner warn" style="font-size: 16px"></div>
|
|
387
460
|
</div>
|
|
388
461
|
</article>
|
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-20240727181205",
|
|
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",
|
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
%colourShades {
|
|
2
|
-
--color100:
|
|
3
|
-
--color100-on-light-bg: lch(var(--100-on-light-bg, var(--100)));
|
|
2
|
+
--color100: oklch(0.91 0.05 var(--hue));
|
|
4
3
|
|
|
5
|
-
--
|
|
6
|
-
--
|
|
7
|
-
--
|
|
8
|
-
--
|
|
4
|
+
--color500: oklch(0.46 0.13 var(--hue));
|
|
5
|
+
--color600: oklch(0.41 0.11 var(--hue));
|
|
6
|
+
--color700: oklch(0.36 0.09 var(--hue));
|
|
7
|
+
--color800: oklch(0.31 0.07 var(--hue));
|
|
9
8
|
|
|
10
|
-
--
|
|
9
|
+
--color950: oklch(0.18 0.03 var(--hue));
|
|
10
|
+
|
|
11
|
+
--bg-body: var(--bg-body-override, var(--color950));
|
|
12
|
+
--fg-body: var(--fg-body-override, var(--color100));
|
|
13
|
+
--panel-background: oklch(var(--500) / 0.1);
|
|
11
14
|
}
|
package/scss/_command.scss
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
.command {
|
|
2
|
-
background-color: var(--
|
|
2
|
+
background-color: var(--color800);
|
|
3
3
|
box-shadow: var(--box-shadow);
|
|
4
4
|
display: grid;
|
|
5
5
|
align-items: end;
|
|
@@ -28,7 +28,6 @@
|
|
|
28
28
|
|
|
29
29
|
&:disabled {
|
|
30
30
|
opacity: 0.7;
|
|
31
|
-
//filter: saturate(0.2);
|
|
32
31
|
cursor: default;
|
|
33
32
|
pointer-events: none;
|
|
34
33
|
background: #6d6d6d;
|
|
@@ -37,9 +36,9 @@
|
|
|
37
36
|
|
|
38
37
|
&.outline {
|
|
39
38
|
background-color: transparent;
|
|
40
|
-
border-color: var(--
|
|
39
|
+
border-color: var(--color700);
|
|
41
40
|
border-width: var(--border-width);
|
|
42
|
-
color: var(--
|
|
41
|
+
color: var(--fg-body);
|
|
43
42
|
|
|
44
43
|
&.flash {
|
|
45
44
|
animation-name: flash-border;
|
|
@@ -48,16 +47,25 @@
|
|
|
48
47
|
&:disabled {
|
|
49
48
|
background: transparent;
|
|
50
49
|
border-color: #6d6d6d;
|
|
50
|
+
color: #6d6d6d;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
&:focus {
|
|
54
|
+
border-color: var(--color500);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
&:active {
|
|
58
|
+
color: var(--color100);
|
|
51
59
|
}
|
|
52
60
|
}
|
|
53
61
|
|
|
54
62
|
&:focus {
|
|
55
|
-
border-left-color: var(--
|
|
63
|
+
border-left-color: var(--color500);
|
|
56
64
|
}
|
|
57
65
|
|
|
58
66
|
&:active {
|
|
59
|
-
border-color: var(--
|
|
60
|
-
background-color: var(--
|
|
67
|
+
border-color: var(--color500);
|
|
68
|
+
background-color: var(--color500);
|
|
61
69
|
animation-play-state: paused;
|
|
62
70
|
}
|
|
63
71
|
}
|
|
@@ -67,14 +75,14 @@
|
|
|
67
75
|
gap: var(--spacing-sm);
|
|
68
76
|
|
|
69
77
|
> .spacer {
|
|
70
|
-
background-color: var(--
|
|
78
|
+
background-color: var(--color800);
|
|
71
79
|
box-shadow: var(--box-shadow);
|
|
72
80
|
min-width: 1rem;
|
|
73
81
|
min-height: 1rem;
|
|
74
82
|
|
|
75
83
|
&.outline {
|
|
76
84
|
background-color: transparent;
|
|
77
|
-
border: var(--border-width) solid var(--
|
|
85
|
+
border: var(--border-width) solid var(--color700);
|
|
78
86
|
}
|
|
79
87
|
}
|
|
80
88
|
|
|
@@ -122,12 +130,12 @@
|
|
|
122
130
|
|
|
123
131
|
@keyframes flash-background {
|
|
124
132
|
50% {
|
|
125
|
-
background-color: var(--
|
|
133
|
+
background-color: var(--color600);
|
|
126
134
|
}
|
|
127
135
|
}
|
|
128
136
|
|
|
129
137
|
@keyframes flash-border {
|
|
130
138
|
50% {
|
|
131
|
-
border-color: var(--
|
|
139
|
+
border-color: var(--color500);
|
|
132
140
|
}
|
|
133
141
|
}
|
package/scss/_global.scss
CHANGED
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
border-style: solid;
|
|
31
31
|
border-color: transparent;
|
|
32
32
|
border-width: var(--spacing-sm);
|
|
33
|
-
background: var(--
|
|
33
|
+
background: var(--color700);
|
|
34
34
|
box-sizing: border-box;
|
|
35
35
|
background-clip: border-box;
|
|
36
36
|
}
|
|
@@ -46,7 +46,7 @@ body {
|
|
|
46
46
|
font-size: 1rem;
|
|
47
47
|
padding: var(--spacing);
|
|
48
48
|
background: var(--bg-body);
|
|
49
|
-
color: var(--
|
|
49
|
+
color: var(--fg-body);
|
|
50
50
|
|
|
51
51
|
@extend %scrollbar;
|
|
52
52
|
}
|
package/scss/_input.scss
CHANGED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
border-radius: var(--border-radius);
|
|
3
3
|
box-shadow: var(--box-shadow);
|
|
4
4
|
outline: none;
|
|
5
|
-
border: var(--border-width) solid var(--
|
|
6
|
-
color: var(--
|
|
5
|
+
border: var(--border-width) solid var(--color600);
|
|
6
|
+
color: var(--fg-body);
|
|
7
7
|
font-family: inherit;
|
|
8
8
|
background-color: transparent;
|
|
9
9
|
transition: border-color 0.15s ease-in-out;
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
font-size: var(--scale-base);
|
|
12
12
|
|
|
13
13
|
&:focus {
|
|
14
|
-
border: var(--border-width) solid var(--
|
|
14
|
+
border: var(--border-width) solid var(--color500);
|
|
15
15
|
}
|
|
16
16
|
&:disabled {
|
|
17
17
|
opacity: 0.4;
|
package/scss/_panel.scss
CHANGED
package/scss/_spinner.scss
CHANGED
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
border-style: solid;
|
|
19
19
|
border-width: 0.05em;
|
|
20
20
|
border-radius: 50%;
|
|
21
|
-
border-color: var(--
|
|
21
|
+
border-color: var(--color700) transparent;
|
|
22
22
|
animation: 4s 0.5s inset1 ease-in-out infinite;
|
|
23
23
|
box-shadow: 0px 12px 10px -12px rgba(0, 0, 0, 0.4),
|
|
24
24
|
0px -12px 10px -12px rgba(0, 0, 0, 0.4);
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
border-style: solid;
|
|
35
35
|
border-width: 0.05em;
|
|
36
36
|
border-radius: 50%;
|
|
37
|
-
border-color: transparent var(--
|
|
37
|
+
border-color: transparent var(--color500);
|
|
38
38
|
animation: 4s 0.5s inset2 ease-in-out infinite;
|
|
39
39
|
box-shadow: 12px 0px 10px -12px rgba(0, 0, 0, 0.4),
|
|
40
40
|
-12px 0px 10px -12px rgba(0, 0, 0, 0.4);
|
package/scss/_typography.scss
CHANGED
package/scss/ada.blue-light.scss
CHANGED
|
@@ -1,72 +1,41 @@
|
|
|
1
1
|
@import "ada.theme-base";
|
|
2
2
|
|
|
3
3
|
:root {
|
|
4
|
-
--bg-body: lch(95 10 260);
|
|
5
|
-
|
|
6
4
|
//Defaults to primary color
|
|
7
5
|
@extend .primary;
|
|
8
6
|
}
|
|
9
7
|
|
|
10
8
|
%light-fg {
|
|
11
|
-
--
|
|
9
|
+
--bg-body-override: var(--color100);
|
|
10
|
+
--fg-body-override: var(--color800);
|
|
12
11
|
}
|
|
13
12
|
|
|
14
13
|
.primary {
|
|
15
14
|
@extend %colourShades;
|
|
16
15
|
@extend %light-fg;
|
|
17
|
-
|
|
18
|
-
--100: 90 17 260;
|
|
19
|
-
|
|
20
|
-
--300: 44 47 260;
|
|
21
|
-
--400: 38 41 260;
|
|
22
|
-
--500: 32 35 260;
|
|
23
|
-
--600: 26 29 260;
|
|
16
|
+
--hue: 246;
|
|
24
17
|
}
|
|
25
18
|
|
|
26
|
-
.
|
|
19
|
+
.shade1 {
|
|
27
20
|
@extend %colourShades;
|
|
28
21
|
@extend %light-fg;
|
|
29
|
-
|
|
30
|
-
--100: 90 17 246;
|
|
31
|
-
|
|
32
|
-
--300: 51 40 246;
|
|
33
|
-
--400: 44 34 246;
|
|
34
|
-
--500: 41 33 246;
|
|
35
|
-
--600: 34 27 246;
|
|
22
|
+
--hue: 225;
|
|
36
23
|
}
|
|
37
24
|
|
|
38
|
-
.
|
|
25
|
+
.shade3 {
|
|
39
26
|
@extend %colourShades;
|
|
40
27
|
@extend %light-fg;
|
|
41
|
-
|
|
42
|
-
--100: 90 17 152;
|
|
43
|
-
|
|
44
|
-
--300: 40 37 152;
|
|
45
|
-
--400: 33 31 152;
|
|
46
|
-
--500: 30 30 152;
|
|
47
|
-
--600: 23 24 152;
|
|
28
|
+
--hue: 165;
|
|
48
29
|
}
|
|
49
30
|
|
|
50
|
-
.
|
|
31
|
+
.shade2 {
|
|
51
32
|
@extend %colourShades;
|
|
52
33
|
@extend %light-fg;
|
|
53
|
-
|
|
54
|
-
--100: 90 17 206;
|
|
55
|
-
|
|
56
|
-
--300: 52 30 206;
|
|
57
|
-
--400: 45 24 206;
|
|
58
|
-
--500: 42 23 206;
|
|
59
|
-
--600: 35 17 206;
|
|
34
|
+
--hue: 190;
|
|
60
35
|
}
|
|
61
36
|
|
|
62
37
|
.warn {
|
|
63
38
|
@extend %colourShades;
|
|
64
39
|
@extend %light-fg;
|
|
65
|
-
|
|
66
|
-
--100: 90 17 40;
|
|
67
|
-
|
|
68
|
-
--300: 40 75 40;
|
|
69
|
-
--400: 33 69 40;
|
|
70
|
-
--500: 30 68 40;
|
|
71
|
-
--600: 23 62 40;
|
|
40
|
+
--hue: 29;
|
|
72
41
|
}
|
package/scss/ada.blue.scss
CHANGED
|
@@ -1,63 +1,31 @@
|
|
|
1
1
|
@import "ada.theme-base";
|
|
2
2
|
|
|
3
3
|
:root {
|
|
4
|
-
--bg-body: lch(5 8 260);
|
|
5
|
-
|
|
6
4
|
//Defaults to primary color
|
|
7
5
|
@extend .primary;
|
|
8
6
|
}
|
|
9
7
|
|
|
10
8
|
.primary {
|
|
11
9
|
@extend %colourShades;
|
|
12
|
-
|
|
13
|
-
--100: 90 17 260;
|
|
14
|
-
|
|
15
|
-
--300: 38 41 260;
|
|
16
|
-
--400: 32 35 260;
|
|
17
|
-
--500: 26 29 260; //the base color
|
|
18
|
-
--600: 20 23 260;
|
|
10
|
+
--hue: 246;
|
|
19
11
|
}
|
|
20
12
|
|
|
21
|
-
.
|
|
13
|
+
.shade1 {
|
|
22
14
|
@extend %colourShades;
|
|
23
|
-
|
|
24
|
-
--100: 90 17 246;
|
|
25
|
-
|
|
26
|
-
--300: 53 45 246;
|
|
27
|
-
--400: 47 39 246;
|
|
28
|
-
--500: 41 33 246;
|
|
29
|
-
--600: 35 27 246;
|
|
15
|
+
--hue: 225;
|
|
30
16
|
}
|
|
31
17
|
|
|
32
|
-
.
|
|
18
|
+
.shade3 {
|
|
33
19
|
@extend %colourShades;
|
|
34
|
-
|
|
35
|
-
--100: 90 17 152;
|
|
36
|
-
|
|
37
|
-
--300: 42 42 152;
|
|
38
|
-
--400: 36 36 152;
|
|
39
|
-
--500: 30 30 152;
|
|
40
|
-
--600: 24 24 152;
|
|
20
|
+
--hue: 165;
|
|
41
21
|
}
|
|
42
22
|
|
|
43
|
-
.
|
|
23
|
+
.shade2 {
|
|
44
24
|
@extend %colourShades;
|
|
45
|
-
|
|
46
|
-
--100: 90 17 206;
|
|
47
|
-
|
|
48
|
-
--300: 54 37 206;
|
|
49
|
-
--400: 48 29 206;
|
|
50
|
-
--500: 42 23 206;
|
|
51
|
-
--600: 36 17 206;
|
|
25
|
+
--hue: 190;
|
|
52
26
|
}
|
|
53
27
|
|
|
54
28
|
.warn {
|
|
55
29
|
@extend %colourShades;
|
|
56
|
-
|
|
57
|
-
--100: 90 17 40;
|
|
58
|
-
|
|
59
|
-
--300: 42 80 40;
|
|
60
|
-
--400: 36 74 40;
|
|
61
|
-
--500: 30 68 40;
|
|
62
|
-
--600: 24 62 40;
|
|
30
|
+
--hue: 29;
|
|
63
31
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//wip
|