ada-ui 0.0.0-20240120120530
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/.changeset/README.md +8 -0
- package/.changeset/config.json +11 -0
- package/.gitattributes +63 -0
- package/.github/workflows/release.yml +34 -0
- package/.tool-versions +1 -0
- package/CHANGELOG.md +22 -0
- package/LICENSE +21 -0
- package/README.md +33 -0
- package/css/ada.blue.css +1 -0
- package/css/ada.css +1 -0
- package/css/ada.green.css +1 -0
- package/index.html +236 -0
- package/misc/green-theme.png +0 -0
- package/package.json +30 -0
- package/scss/_ada.theme-base.scss +15 -0
- package/scss/_button.scss +52 -0
- package/scss/_commands.scss +122 -0
- package/scss/_corner.scss +47 -0
- package/scss/_input.scss +23 -0
- package/scss/_panel.scss +67 -0
- package/scss/_reset.scss +447 -0
- package/scss/_spinner-lab.scss +258 -0
- package/scss/_spinner.scss +127 -0
- package/scss/_tile.scss +120 -0
- package/scss/_typography.scss +62 -0
- package/scss/ada.blue.scss +107 -0
- package/scss/ada.green.scss +90 -0
- package/scss/ada.scss +54 -0
- package/tailwind.config.js +8 -0
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
# Changesets
|
|
2
|
+
|
|
3
|
+
Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
|
|
4
|
+
with multi-package repos, or single-package repos to help you version and publish your code. You can
|
|
5
|
+
find the full documentation for it [in our repository](https://github.com/changesets/changesets)
|
|
6
|
+
|
|
7
|
+
We have a quick list of common questions to get you started engaging with this project in
|
|
8
|
+
[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
|
|
3
|
+
"changelog": "@changesets/cli/changelog",
|
|
4
|
+
"commit": false,
|
|
5
|
+
"fixed": [],
|
|
6
|
+
"linked": [],
|
|
7
|
+
"access": "public",
|
|
8
|
+
"baseBranch": "master",
|
|
9
|
+
"updateInternalDependencies": "patch",
|
|
10
|
+
"ignore": []
|
|
11
|
+
}
|
package/.gitattributes
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
###############################################################################
|
|
2
|
+
# Set default behavior to automatically normalize line endings.
|
|
3
|
+
###############################################################################
|
|
4
|
+
* text=auto
|
|
5
|
+
|
|
6
|
+
###############################################################################
|
|
7
|
+
# Set default behavior for command prompt diff.
|
|
8
|
+
#
|
|
9
|
+
# This is need for earlier builds of msysgit that does not have it on by
|
|
10
|
+
# default for csharp files.
|
|
11
|
+
# Note: This is only used by command line
|
|
12
|
+
###############################################################################
|
|
13
|
+
#*.cs diff=csharp
|
|
14
|
+
|
|
15
|
+
###############################################################################
|
|
16
|
+
# Set the merge driver for project and solution files
|
|
17
|
+
#
|
|
18
|
+
# Merging from the command prompt will add diff markers to the files if there
|
|
19
|
+
# are conflicts (Merging from VS is not affected by the settings below, in VS
|
|
20
|
+
# the diff markers are never inserted). Diff markers may cause the following
|
|
21
|
+
# file extensions to fail to load in VS. An alternative would be to treat
|
|
22
|
+
# these files as binary and thus will always conflict and require user
|
|
23
|
+
# intervention with every merge. To do so, just uncomment the entries below
|
|
24
|
+
###############################################################################
|
|
25
|
+
#*.sln merge=binary
|
|
26
|
+
#*.csproj merge=binary
|
|
27
|
+
#*.vbproj merge=binary
|
|
28
|
+
#*.vcxproj merge=binary
|
|
29
|
+
#*.vcproj merge=binary
|
|
30
|
+
#*.dbproj merge=binary
|
|
31
|
+
#*.fsproj merge=binary
|
|
32
|
+
#*.lsproj merge=binary
|
|
33
|
+
#*.wixproj merge=binary
|
|
34
|
+
#*.modelproj merge=binary
|
|
35
|
+
#*.sqlproj merge=binary
|
|
36
|
+
#*.wwaproj merge=binary
|
|
37
|
+
|
|
38
|
+
###############################################################################
|
|
39
|
+
# behavior for image files
|
|
40
|
+
#
|
|
41
|
+
# image files are treated as binary by default.
|
|
42
|
+
###############################################################################
|
|
43
|
+
#*.jpg binary
|
|
44
|
+
#*.png binary
|
|
45
|
+
#*.gif binary
|
|
46
|
+
|
|
47
|
+
###############################################################################
|
|
48
|
+
# diff behavior for common document formats
|
|
49
|
+
#
|
|
50
|
+
# Convert binary document formats to text before diffing them. This feature
|
|
51
|
+
# is only available from the command line. Turn it on by uncommenting the
|
|
52
|
+
# entries below.
|
|
53
|
+
###############################################################################
|
|
54
|
+
#*.doc diff=astextplain
|
|
55
|
+
#*.DOC diff=astextplain
|
|
56
|
+
#*.docx diff=astextplain
|
|
57
|
+
#*.DOCX diff=astextplain
|
|
58
|
+
#*.dot diff=astextplain
|
|
59
|
+
#*.DOT diff=astextplain
|
|
60
|
+
#*.pdf diff=astextplain
|
|
61
|
+
#*.PDF diff=astextplain
|
|
62
|
+
#*.rtf diff=astextplain
|
|
63
|
+
#*.RTF diff=astextplain
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
name: Release
|
|
2
|
+
|
|
3
|
+
on:
|
|
4
|
+
push:
|
|
5
|
+
branches:
|
|
6
|
+
- master
|
|
7
|
+
|
|
8
|
+
concurrency: ${{ github.workflow }}-${{ github.ref }}
|
|
9
|
+
|
|
10
|
+
jobs:
|
|
11
|
+
release:
|
|
12
|
+
name: Release
|
|
13
|
+
runs-on: ubuntu-latest
|
|
14
|
+
steps:
|
|
15
|
+
- name: Checkout Repo
|
|
16
|
+
uses: actions/checkout@v4
|
|
17
|
+
|
|
18
|
+
- name: Setup Node.js from .tool-versions
|
|
19
|
+
uses: actions/setup-node@v4
|
|
20
|
+
with:
|
|
21
|
+
node-version-file: .tool-versions
|
|
22
|
+
|
|
23
|
+
- name: Install Dependencies
|
|
24
|
+
run: npm install
|
|
25
|
+
|
|
26
|
+
- name: Create Release Pull Request or Publish to npm
|
|
27
|
+
id: changesets
|
|
28
|
+
uses: changesets/action@v1
|
|
29
|
+
with:
|
|
30
|
+
# This expects you to have a script called release which does a build for your packages and calls changeset publish
|
|
31
|
+
publish: npm run release
|
|
32
|
+
env:
|
|
33
|
+
GITHUB_TOKEN: ${{ secrets.REPO_TOKEN }}
|
|
34
|
+
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
|
package/.tool-versions
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
nodejs 20.10.0
|
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
# ada-ui
|
|
2
|
+
|
|
3
|
+
## 0.0.0-20240120120530
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- Add exports
|
|
8
|
+
|
|
9
|
+
## 4.6.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- d515756: Decrease horizontal padding of input
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- 3802546: Set box-sizing to border-box on global level
|
|
18
|
+
- d03c0d7: Add Changesets for managing changelog
|
|
19
|
+
|
|
20
|
+
## < 4.6.0
|
|
21
|
+
|
|
22
|
+
- No changelog was maintained, sorry...
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 Thomas Klepzig
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
# Ada
|
|
2
|
+
|
|
3
|
+
[](https://badge.fury.io/js/ada-ui)
|
|
4
|
+
|
|
5
|
+
My sci-fi inspired UI components library. Still growing...
|
|
6
|
+
|
|
7
|
+
## CDN
|
|
8
|
+
|
|
9
|
+
https://cdn.jsdelivr.net/gh/tklepzig/Ada@version/css/ada.min.css
|
|
10
|
+
|
|
11
|
+
Replace `version` with the version of your desired release, see
|
|
12
|
+
https://github.com/tklepzig/Ada/releases (e.g. `2.9.0`)
|
|
13
|
+
|
|
14
|
+
> Attention: Beginning with version 3.0, the filenames don't contain `min` any
|
|
15
|
+
> longer. So the URL should be
|
|
16
|
+
>
|
|
17
|
+
> https://cdn.jsdelivr.net/gh/tklepzig/Ada@3.0.0/css/ada.css
|
|
18
|
+
|
|
19
|
+
## Install
|
|
20
|
+
|
|
21
|
+
# Using npm
|
|
22
|
+
npm install ada-ui --save
|
|
23
|
+
|
|
24
|
+
# Using yarn
|
|
25
|
+
yarn add ada-ui
|
|
26
|
+
|
|
27
|
+
## Select a Theme
|
|
28
|
+
|
|
29
|
+
Beginning with version 3.0.0, you can choose between different themes. When
|
|
30
|
+
using the CSS, ensure to include the correct theme file before the main one,
|
|
31
|
+
e.g.:
|
|
32
|
+
|
|
33
|
+
https://cdn.jsdelivr.net/gh/tklepzig/Ada@3.0.0/css/ada.blue.css
|
package/css/ada.blue.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.warn,.accent,.shade2,.shade1,.primary,:root{--fg: hsl(var(--h-fg), var(--s-fg), var(--l-fg));--default: hsl(var(--h), var(--s), var(--l));--default-alpha40: hsla(var(--h), var(--s), var(--l), 0.4);--default-alpha70: hsla(var(--h), var(--s), var(--l), 0.7);--light: hsl(var(--h-light), var(--s-light), var(--l-light));--light-alpha40: hsla(var(--h-light), var(--s-light), var(--l-light), 0.4);--light-alpha70: hsla(var(--h-light), var(--s-light), var(--l-light), 0.7);--panel-background: hsla(var(--h), var(--s), var(--l), 0.1);--tile-background: hsla(var(--h), var(--s), var(--l), 0.2);--footer-color: hsla(var(--h-fg), var(--s-fg), var(--l-fg), 0.6)}.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.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
*,::before,::after{box-sizing:border-box}html{font-size:14px;font-family:"Open Sans",sans-serif;font-weight:400}@media screen and (max-width: 1199px){html{font-size:12px}}html,body{height:100%;min-height:100%;margin:0;padding:0;background:var(--bg);color:var(--fg)}body{font-size:1rem;-webkit-tap-highlight-color:transparent;padding:.5rem}h1{font-size:3rem}.commands:not(.vertical),h2{font-size:2rem}.panel>header,.tile>header,h3{font-size:1.5rem}.tile>header,h4{font-weight:400;font-size:1.2rem}h1,.commands:not(.vertical),h2,.panel>header,.tile>header,h3,h4{font-weight:300;text-shadow:0 0 4px var(--light-alpha40);color:var(--fg)}h1{margin:1rem 0 2rem 0}h1.m-0{margin:0}h2{margin:1rem 0 1.5rem 0}h2.m-0{margin:0}h3{margin:.5rem 0 1.5rem 0}h3.m-0{margin:0}h4{margin:.5rem 0 .5rem 0}h4.m-0{margin:0}.button{overflow:hidden;outline:none;color:var(--fg);font-family:inherit;cursor:pointer;user-select:none;vertical-align:middle;transition:border-color .15s ease-in-out,background-color .15s ease-in-out;white-space:nowrap;text-overflow:ellipsis;border-radius:.3rem;box-shadow:0 0 10px 0 rgba(0,0,0,.4);border:1px solid var(--light-alpha40);background-color:transparent;min-height:min-content;min-width:8rem;padding:.8rem 1.6rem;margin:.8rem;font-size:1.1rem}.button:disabled{opacity:.4;filter:saturate(0.6);cursor:default;pointer-events:none}.button.small{min-width:0;padding:.8rem}.button.fill{background-color:var(--default)}.button:focus{border:1px solid var(--light-alpha70)}.button:active{background-color:var(--light);border:1px solid var(--default-alpha40)}.input{border-radius:.3rem;box-shadow:0 0 10px 0 rgba(0,0,0,.4);outline:none;border:1px solid var(--light-alpha40);color:var(--fg);font-family:inherit;background-color:transparent;transition:border-color .15s ease-in-out;padding:.8rem;margin:.8rem;font-size:1.1rem}.input:focus{border:1px solid var(--light-alpha70)}.input:disabled{opacity:.4;filter:saturate(0.6);cursor:default;pointer-events:none}.panel,.tile{background:var(--panel-background);box-shadow:0 0 10px 0 rgba(0,0,0,.4);border-radius:.3rem;display:grid;grid-template-rows:auto 1fr auto;overflow:auto;margin:.5rem}.panel>header,.tile>header{position:relative;padding:.4rem .6rem}.panel>header:before,.tile>header:before{--border-width: 2px;content:"";border-style:solid;border-color:var(--default);position:absolute;height:1rem;width:1rem;z-index:2;border-width:var(--border-width) 0 0 var(--border-width);border-radius:.3rem 0 0 0;left:0;top:0}.panel>header:after,.tile>header:after{--border-width: 2px;content:"";border-style:solid;border-color:var(--default);position:absolute;height:1rem;width:1rem;z-index:2;border-width:var(--border-width) var(--border-width) 0 0;border-radius:0 .3rem 0 0;right:0;top:0}.panel>header:empty,.tile>header:empty{padding:.2rem}.panel>article,.tile>article{z-index:1;padding:0 .6rem;overflow:auto}.panel>article::-webkit-scrollbar,.tile>article::-webkit-scrollbar{width:2px;background:transparent}.panel>article::-webkit-scrollbar-thumb,.tile>article::-webkit-scrollbar-thumb{min-width:1rem;border-style:solid;border-color:transparent;border-width:2px 2px 1px 2px;background:var(--default);box-sizing:border-box;background-clip:border-box}.panel>footer,.tile>footer{position:relative;color:var(--footer-color);padding:.4rem .6rem;font-size:.75rem;text-align:right}.panel>footer:before,.tile>footer:before{--border-width: 2px;content:"";border-style:solid;border-color:var(--default);position:absolute;height:1rem;width:1rem;z-index:2;border-width:0 0 var(--border-width) var(--border-width);border-radius:0 0 0 .3rem;left:0;bottom:0}.panel>footer:after,.tile>footer:after{--border-width: 2px;content:"";border-style:solid;border-color:var(--default);position:absolute;height:1rem;width:1rem;z-index:2;border-width:0 var(--border-width) var(--border-width) 0;border-radius:0 0 .3rem 0;right:0;bottom:0}.panel>footer:empty,.tile>footer:empty{padding:.2rem}.commands{position:relative;display:grid;gap:6px;margin:.5rem}.commands:before,.commands:after{box-shadow:0 0 10px 0 rgba(0,0,0,.4);position:absolute;content:"";background:var(--default-alpha70)}.commands:not(.vertical){grid-auto-flow:column;text-align:center;align-items:center;line-height:3.6rem;height:3.6rem;padding-left:1.5rem;padding-right:1.5rem}.commands:not(.vertical):before,.commands:not(.vertical):after{width:1rem;top:0;bottom:0}.commands:not(.vertical):before{border-radius:.3rem 0 0 .3rem;left:0}.commands:not(.vertical):after{border-radius:0 .3rem .3rem 0;right:0}.commands:not(.vertical)>button,.commands:not(.vertical)>div{height:3.6rem}.commands.vertical{grid-auto-flow:row;min-width:12rem;padding-top:1.5rem;padding-bottom:1.5rem}.commands.vertical:before,.commands.vertical:after{height:1rem;left:0;right:0}.commands.vertical:before{border-radius:.3rem .3rem 0 0;top:0}.commands.vertical:after{border-radius:0 0 .3rem .3rem;bottom:0}.commands.vertical>button,.commands.vertical>div{min-height:3.6rem}.commands>button,.commands>div{box-sizing:border-box;background-color:var(--default-alpha70);box-shadow:0 0 10px 0 rgba(0,0,0,.4)}.commands>button{overflow:hidden;outline:none;color:var(--fg);font-family:inherit;cursor:pointer;user-select:none;vertical-align:middle;transition:border-color .15s ease-in-out,background-color .15s ease-in-out;min-width:6rem;display:grid;align-items:end;justify-items:end;text-align:end;font-size:1.1rem;border-style:solid;border-color:transparent;border-width:0 0 0 2px;padding:.2rem .4rem .2rem 1rem}.commands>button:disabled{opacity:.4;filter:saturate(0.6);cursor:default;pointer-events:none}.commands>button.flash{animation:flash 1s ease-in-out infinite}.commands>button:focus{border-color:var(--light-alpha70)}.commands>button:active{background-color:var(--light-alpha70);animation-play-state:paused}.commands>div{min-width:.5rem}@keyframes flash{50%{background-color:var(--light-alpha70)}}.tile{background:var(--tile-background);margin:.8rem}.tile>header:before{--border-width: 2px;content:"";border-style:solid;border-color:var(--default);position:absolute;height:1rem;width:1rem;z-index:2;--border-width: 1px;border-color:var(--light-alpha40);height:.75rem;width:.75rem;border-width:var(--border-width) 0 0 var(--border-width);border-radius:.3rem 0 0 0;left:0;top:0}.tile>header:after{--border-width: 2px;content:"";border-style:solid;border-color:var(--default);position:absolute;height:1rem;width:1rem;z-index:2;--border-width: 1px;border-color:var(--light-alpha40);height:.75rem;width:.75rem;border-width:var(--border-width) var(--border-width) 0 0;border-radius:0 .3rem 0 0;right:0;top:0}.tile>article{padding:.4rem .8rem}.tile>footer:before{--border-width: 2px;content:"";border-style:solid;border-color:var(--default);position:absolute;height:1rem;width:1rem;z-index:2;--border-width: 1px;border-color:var(--light-alpha40);height:.75rem;width:.75rem;border-width:0 0 var(--border-width) var(--border-width);border-radius:0 0 0 .3rem;left:0;bottom:0}.tile>footer:after{--border-width: 2px;content:"";border-style:solid;border-color:var(--default);position:absolute;height:1rem;width:1rem;z-index:2;--border-width: 1px;border-color:var(--light-alpha40);height:.75rem;width:.75rem;border-width:0 var(--border-width) var(--border-width) 0;border-radius:0 0 .3rem 0;right:0;bottom:0}.tile.inset{box-shadow:inset 0 0 10px 0 rgba(0,0,0,.4)}.tile.inset>header{text-shadow:none}.tile.inset>header:before,.tile.inset>header:after{opacity:.6}.tile.inset footer:before,.tile.inset footer:after{opacity:.6}.tile-with-commands{display:inline-grid;grid-template-columns:1fr auto;align-items:stretch;column-gap:4px;position:relative;margin:.8rem}.tile-with-commands>.tile{margin:0;border-radius:.3rem 0 0 .3rem}.tile-with-commands>.tile>header:after{border:none}.tile-with-commands>.tile>article{font-size:1.2rem}.tile-with-commands>.tile>footer:after{border:none}.tile-with-commands>aside{display:grid;grid-auto-flow:column;gap:4px}.tile-with-commands>aside>button{overflow:hidden;outline:none;color:var(--fg);font-family:inherit;cursor:pointer;user-select:none;vertical-align:middle;transition:border-color .15s ease-in-out,background-color .15s ease-in-out;min-width:6rem;display:grid;align-items:end;justify-items:end;text-align:end;font-size:1.1rem;border-style:solid;border-color:transparent;border-width:0 0 0 2px;padding:.2rem .4rem .2rem 1rem;font-size:.9rem;background-color:var(--default-alpha40);min-width:3rem}.tile-with-commands>aside>button:disabled{opacity:.4;filter:saturate(0.6);cursor:default;pointer-events:none}.tile-with-commands>aside>button.flash{animation:flash 1s ease-in-out infinite}.tile-with-commands>aside>button:focus{border-color:var(--light-alpha70)}.tile-with-commands>aside>button:active{background-color:var(--light-alpha70);animation-play-state:paused}.tile-with-commands>aside>button:focus{border-color:var(--light-alpha40)}.tile-with-commands>aside>button:active{background-color:var(--light-alpha40)}.tile-with-commands>aside>button:last-of-type{border-radius:0 .3rem .3rem 0}.tile-with-commands>aside.vertical{grid-auto-flow:row}.tile-with-commands>aside.vertical>button{min-width:4.5rem;min-height:3rem;border-radius:0}.tile-with-commands>aside.vertical>button:first-of-type{border-top-right-radius:.3rem}.tile-with-commands>aside.vertical>button:last-of-type{border-bottom-right-radius:.3rem}.spinner{margin:.3rem;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(--light-alpha40) 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(--light-alpha70);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)}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.warn,.accent,.shade2,.shade1,.primary,:root{--fg: hsl(var(--h-fg), var(--s-fg), var(--l-fg));--default: hsl(var(--h), var(--s), var(--l));--default-alpha40: hsla(var(--h), var(--s), var(--l), 0.4);--default-alpha70: hsla(var(--h), var(--s), var(--l), 0.7);--light: hsl(var(--h-light), var(--s-light), var(--l-light));--light-alpha40: hsla(var(--h-light), var(--s-light), var(--l-light), 0.4);--light-alpha70: hsla(var(--h-light), var(--s-light), var(--l-light), 0.7);--panel-background: hsla(var(--h), var(--s), var(--l), 0.1);--tile-background: hsla(var(--h), var(--s), var(--l), 0.2);--footer-color: hsla(var(--h-fg), var(--s-fg), var(--l-fg), 0.6)}.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/index.html
ADDED
|
@@ -0,0 +1,236 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<title>Ada</title>
|
|
6
|
+
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
7
|
+
<meta name="mobile-web-app-capable" content="yes" />
|
|
8
|
+
<meta name="msapplication-tap-highlight" content="no" />
|
|
9
|
+
<meta
|
|
10
|
+
name="viewport"
|
|
11
|
+
content="user-scalable=yes, initial-scale=1.0, maximum-scale=10.0, width=device-width"
|
|
12
|
+
/>
|
|
13
|
+
<link rel="stylesheet" href="css/ada.blue.css" />
|
|
14
|
+
<link rel="stylesheet" href="css/ada.css" />
|
|
15
|
+
<link
|
|
16
|
+
href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600"
|
|
17
|
+
rel="stylesheet"
|
|
18
|
+
/>
|
|
19
|
+
<style>
|
|
20
|
+
.color-box {
|
|
21
|
+
display: inline-grid;
|
|
22
|
+
align-items: center;
|
|
23
|
+
justify-items: center;
|
|
24
|
+
width: 92px;
|
|
25
|
+
height: 48px;
|
|
26
|
+
margin: 1rem;
|
|
27
|
+
box-sizing: border-box;
|
|
28
|
+
color: var(--fg);
|
|
29
|
+
background: var(--default);
|
|
30
|
+
border-top: 8px solid var(--light);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.color-box.alpha40 {
|
|
34
|
+
color: var(--fg-alpha40);
|
|
35
|
+
background: var(--default-alpha40);
|
|
36
|
+
border-top: 8px solid var(--light-alpha40);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.color-box.alpha70 {
|
|
40
|
+
color: var(--fg-alpha70);
|
|
41
|
+
background: var(--default-alpha70);
|
|
42
|
+
border-top: 8px solid var(--light-alpha70);
|
|
43
|
+
}
|
|
44
|
+
</style>
|
|
45
|
+
</head>
|
|
46
|
+
|
|
47
|
+
<body style="display: grid; grid: 'cmd-v main' 1fr 'cmd cmd' auto / auto 1fr">
|
|
48
|
+
<div
|
|
49
|
+
class="commands vertical"
|
|
50
|
+
style="grid-area: cmd-v; grid-template-rows: auto auto 1fr"
|
|
51
|
+
>
|
|
52
|
+
<button>Command</button>
|
|
53
|
+
<button class="shade1">Second Command</button>
|
|
54
|
+
<button class="shade2">Third Command</button>
|
|
55
|
+
<button class="accent">Special</button>
|
|
56
|
+
<button class="warn">Warn</button>
|
|
57
|
+
</div>
|
|
58
|
+
<div class="panel" style="grid-area: main">
|
|
59
|
+
<header>Header</header>
|
|
60
|
+
<article style="display: grid; grid-auto-rows: max-content">
|
|
61
|
+
<div class="panel">
|
|
62
|
+
<header>Colors</header>
|
|
63
|
+
<article>
|
|
64
|
+
<h4>Default</h4>
|
|
65
|
+
<div class="color-box primary">Primary</div>
|
|
66
|
+
<div class="color-box shade1">Shade 1</div>
|
|
67
|
+
<div class="color-box shade2">Shade 2</div>
|
|
68
|
+
<div class="color-box accent">Accent</div>
|
|
69
|
+
<div class="color-box warn">Warn</div>
|
|
70
|
+
<h4>Alpha 70</h4>
|
|
71
|
+
<div class="color-box alpha70 primary">Primary</div>
|
|
72
|
+
<div class="color-box alpha70 shade1">Shade 1</div>
|
|
73
|
+
<div class="color-box alpha70 shade2">Shade 2</div>
|
|
74
|
+
<div class="color-box alpha70 accent">Accent</div>
|
|
75
|
+
<div class="color-box alpha70 warn">Warn</div>
|
|
76
|
+
<h4>Alpha 40</h4>
|
|
77
|
+
<div class="color-box alpha40 primary">Primary</div>
|
|
78
|
+
<div class="color-box alpha40 shade1">Shade 1</div>
|
|
79
|
+
<div class="color-box alpha40 shade2">Shade 2</div>
|
|
80
|
+
<div class="color-box alpha40 accent">Accent</div>
|
|
81
|
+
<div class="color-box alpha40 warn">Warn</div>
|
|
82
|
+
</article>
|
|
83
|
+
<footer></footer>
|
|
84
|
+
</div>
|
|
85
|
+
<div class="panel">
|
|
86
|
+
<header>Buttons</header>
|
|
87
|
+
<article>
|
|
88
|
+
<h4>Default</h4>
|
|
89
|
+
<button class="button">Button</button>
|
|
90
|
+
<button class="button shade1">Button</button>
|
|
91
|
+
<button class="button shade2">Button</button>
|
|
92
|
+
<button class="button accent">Button</button>
|
|
93
|
+
<button class="button warn">Button</button>
|
|
94
|
+
<h4>Small</h4>
|
|
95
|
+
<button class="button small">Button</button>
|
|
96
|
+
<button class="button small shade1">Button</button>
|
|
97
|
+
<button class="button small shade2">Button</button>
|
|
98
|
+
<button class="button small accent">Button</button>
|
|
99
|
+
<button class="button small warn">Button</button>
|
|
100
|
+
<h4>Fill</h4>
|
|
101
|
+
<button class="button fill">Button</button>
|
|
102
|
+
<button class="button fill shade1">Button</button>
|
|
103
|
+
<button class="button fill shade2">Button</button>
|
|
104
|
+
<button class="button fill accent">Button</button>
|
|
105
|
+
<button class="button fill warn">Button</button>
|
|
106
|
+
<h4>Disabled</h4>
|
|
107
|
+
<button disabled class="button">Button</button>
|
|
108
|
+
<button disabled class="button fill">Button</button>
|
|
109
|
+
<button disabled class="button fill shade1">Button</button>
|
|
110
|
+
<button disabled class="button fill shade2">Button</button>
|
|
111
|
+
<button disabled class="button fill accent">Button</button>
|
|
112
|
+
<button disabled class="button fill warn">Button</button>
|
|
113
|
+
</article>
|
|
114
|
+
<footer></footer>
|
|
115
|
+
</div>
|
|
116
|
+
<div class="panel">
|
|
117
|
+
<header>Input</header>
|
|
118
|
+
<article>
|
|
119
|
+
<input class="input" />
|
|
120
|
+
</article>
|
|
121
|
+
<footer></footer>
|
|
122
|
+
</div>
|
|
123
|
+
<div class="panel">
|
|
124
|
+
<header>Spinner</header>
|
|
125
|
+
<article>
|
|
126
|
+
<div>
|
|
127
|
+
<h4>80px</h4>
|
|
128
|
+
<div class="spinner" style="font-size: 80px"></div>
|
|
129
|
+
<div class="spinner shade1" style="font-size: 80px"></div>
|
|
130
|
+
<div class="spinner shade2" style="font-size: 80px"></div>
|
|
131
|
+
<div class="spinner accent" style="font-size: 80px"></div>
|
|
132
|
+
<div class="spinner warn" style="font-size: 80px"></div>
|
|
133
|
+
<h4>32px</h4>
|
|
134
|
+
<div class="spinner" style="font-size: 32px"></div>
|
|
135
|
+
<div class="spinner shade1" style="font-size: 32px"></div>
|
|
136
|
+
<div class="spinner shade2" style="font-size: 32px"></div>
|
|
137
|
+
<div class="spinner accent" style="font-size: 32px"></div>
|
|
138
|
+
<div class="spinner warn" style="font-size: 32px"></div>
|
|
139
|
+
<h4>16px</h4>
|
|
140
|
+
<div class="spinner" style="font-size: 16px"></div>
|
|
141
|
+
<div class="spinner shade1" style="font-size: 16px"></div>
|
|
142
|
+
<div class="spinner shade2" style="font-size: 16px"></div>
|
|
143
|
+
<div class="spinner accent" style="font-size: 16px"></div>
|
|
144
|
+
<div class="spinner warn" style="font-size: 16px"></div>
|
|
145
|
+
</div>
|
|
146
|
+
</article>
|
|
147
|
+
<footer></footer>
|
|
148
|
+
</div>
|
|
149
|
+
<div class="panel">
|
|
150
|
+
<header>Tiles</header>
|
|
151
|
+
<article
|
|
152
|
+
style="
|
|
153
|
+
display: grid;
|
|
154
|
+
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
|
|
155
|
+
align-content: start;
|
|
156
|
+
align-items: start;
|
|
157
|
+
"
|
|
158
|
+
>
|
|
159
|
+
<div class="tile inset">
|
|
160
|
+
<header>Header</header>
|
|
161
|
+
<article>Inset</article>
|
|
162
|
+
<footer>Footer</footer>
|
|
163
|
+
</div>
|
|
164
|
+
<div class="tile shade1">
|
|
165
|
+
<header>Header</header>
|
|
166
|
+
<article>Shade1</article>
|
|
167
|
+
<footer>Footer</footer>
|
|
168
|
+
</div>
|
|
169
|
+
<div class="tile shade2">
|
|
170
|
+
<header>Header</header>
|
|
171
|
+
<article>Shade2</article>
|
|
172
|
+
<footer>Footer</footer>
|
|
173
|
+
</div>
|
|
174
|
+
<div class="tile accent">
|
|
175
|
+
<header>Header</header>
|
|
176
|
+
<article>Accent</article>
|
|
177
|
+
<footer>Footer</footer>
|
|
178
|
+
</div>
|
|
179
|
+
<div class="tile warn">
|
|
180
|
+
<header>Header</header>
|
|
181
|
+
<article>Warn</article>
|
|
182
|
+
<footer>Footer</footer>
|
|
183
|
+
</div>
|
|
184
|
+
<div class="tile">
|
|
185
|
+
<header></header>
|
|
186
|
+
<article>Without header or footer</article>
|
|
187
|
+
<footer></footer>
|
|
188
|
+
</div>
|
|
189
|
+
<div class="tile-with-commands" style="grid-column: span 2">
|
|
190
|
+
<div class="tile">
|
|
191
|
+
<header></header>
|
|
192
|
+
<article>Tile with commands</article>
|
|
193
|
+
<footer></footer>
|
|
194
|
+
</div>
|
|
195
|
+
<aside>
|
|
196
|
+
<button class="shade1"></button>
|
|
197
|
+
<button></button>
|
|
198
|
+
</aside>
|
|
199
|
+
</div>
|
|
200
|
+
<div class="tile-with-commands" style="grid-column: span 2">
|
|
201
|
+
<div class="tile">
|
|
202
|
+
<header></header>
|
|
203
|
+
<article>Tile with vertical commands</article>
|
|
204
|
+
<footer></footer>
|
|
205
|
+
</div>
|
|
206
|
+
<aside class="vertical">
|
|
207
|
+
<button></button>
|
|
208
|
+
<button class="shade1"></button>
|
|
209
|
+
<button class="shade2"></button>
|
|
210
|
+
<button></button>
|
|
211
|
+
</aside>
|
|
212
|
+
</div>
|
|
213
|
+
</article>
|
|
214
|
+
<footer></footer>
|
|
215
|
+
</div>
|
|
216
|
+
</article>
|
|
217
|
+
<footer>Footer</footer>
|
|
218
|
+
</div>
|
|
219
|
+
<div
|
|
220
|
+
class="commands"
|
|
221
|
+
style="
|
|
222
|
+
grid-area: cmd;
|
|
223
|
+
grid-template-columns: auto 12rem auto auto 1fr auto;
|
|
224
|
+
"
|
|
225
|
+
>
|
|
226
|
+
<button style="justify-items: center; align-items: center">
|
|
227
|
+
<div class="spinner" style="font-size: 30px"></div>
|
|
228
|
+
</button>
|
|
229
|
+
<button class="shade2">Command and sth more looong</button>
|
|
230
|
+
<button class="warn flash">Blinking</button>
|
|
231
|
+
<button disabled class="warn">Disabled</button>
|
|
232
|
+
<div></div>
|
|
233
|
+
Commands
|
|
234
|
+
</div>
|
|
235
|
+
</body>
|
|
236
|
+
</html>
|
|
Binary file
|
package/package.json
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "ada-ui",
|
|
3
|
+
"version": "0.0.0-20240120120530",
|
|
4
|
+
"scripts": {
|
|
5
|
+
"dev": "concurrently -n scss,serve 'sass scss:css --watch' 'alive-server .'",
|
|
6
|
+
"build": "rm -rf css && sass scss:css -s compressed --no-source-map",
|
|
7
|
+
"cs": "changeset",
|
|
8
|
+
"snapshot": "npm run build && changeset version --snapshot $1 && changeset publish --tag $1",
|
|
9
|
+
"release": "npm run build && changeset publish"
|
|
10
|
+
},
|
|
11
|
+
"license": "MIT",
|
|
12
|
+
"exports": {
|
|
13
|
+
".": "./css/ada.css",
|
|
14
|
+
"./tailwind-config": "./tailwind.config.js"
|
|
15
|
+
},
|
|
16
|
+
"repository": {
|
|
17
|
+
"type": "git",
|
|
18
|
+
"url": "git+https://github.com/tklepzig/Ada.git"
|
|
19
|
+
},
|
|
20
|
+
"author": "Thomas Klepzig",
|
|
21
|
+
"bugs": {
|
|
22
|
+
"url": "https://github.com/tklepzig/Ada/issues"
|
|
23
|
+
},
|
|
24
|
+
"devDependencies": {
|
|
25
|
+
"@changesets/cli": "^2.27.1",
|
|
26
|
+
"alive-server": "^1.2.9",
|
|
27
|
+
"concurrently": "^8.2.2",
|
|
28
|
+
"sass": "^1.42.1"
|
|
29
|
+
}
|
|
30
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
%colourShades {
|
|
2
|
+
--fg: hsl(var(--h-fg), var(--s-fg), var(--l-fg));
|
|
3
|
+
|
|
4
|
+
--default: hsl(var(--h), var(--s), var(--l));
|
|
5
|
+
--default-alpha40: hsla(var(--h), var(--s), var(--l), 0.4);
|
|
6
|
+
--default-alpha70: hsla(var(--h), var(--s), var(--l), 0.7);
|
|
7
|
+
|
|
8
|
+
--light: hsl(var(--h-light), var(--s-light), var(--l-light));
|
|
9
|
+
--light-alpha40: hsla(var(--h-light), var(--s-light), var(--l-light), 0.4);
|
|
10
|
+
--light-alpha70: hsla(var(--h-light), var(--s-light), var(--l-light), 0.7);
|
|
11
|
+
|
|
12
|
+
--panel-background: hsla(var(--h), var(--s), var(--l), 0.1);
|
|
13
|
+
--tile-background: hsla(var(--h), var(--s), var(--l), 0.2);
|
|
14
|
+
--footer-color: hsla(var(--h-fg), var(--s-fg), var(--l-fg), 0.6);
|
|
15
|
+
}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
@mixin button {
|
|
2
|
+
overflow: hidden;
|
|
3
|
+
outline: none;
|
|
4
|
+
color: var(--fg);
|
|
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.4;
|
|
13
|
+
filter: saturate(0.6);
|
|
14
|
+
cursor: default;
|
|
15
|
+
pointer-events: none;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.button {
|
|
20
|
+
@include button;
|
|
21
|
+
white-space: nowrap;
|
|
22
|
+
text-overflow: ellipsis;
|
|
23
|
+
border-radius: 0.3rem;
|
|
24
|
+
box-shadow: $box-shadow;
|
|
25
|
+
border: 1px solid var(--light-alpha40);
|
|
26
|
+
background-color: transparent;
|
|
27
|
+
min-height: min-content;
|
|
28
|
+
min-width: 8rem;
|
|
29
|
+
padding: 0.8rem 1.6rem;
|
|
30
|
+
margin: 0.8rem;
|
|
31
|
+
font-size: 1.1rem;
|
|
32
|
+
|
|
33
|
+
&.small {
|
|
34
|
+
min-width: 0;
|
|
35
|
+
padding: 0.8rem;
|
|
36
|
+
}
|
|
37
|
+
&.fill {
|
|
38
|
+
background-color: var(--default);
|
|
39
|
+
}
|
|
40
|
+
&:focus {
|
|
41
|
+
border: 1px solid var(--light-alpha70);
|
|
42
|
+
}
|
|
43
|
+
&:hover {
|
|
44
|
+
// stays after click on touch devices
|
|
45
|
+
// TODO: only for non-touch devices
|
|
46
|
+
// /*background-color: var(--light-alpha40);*/
|
|
47
|
+
}
|
|
48
|
+
&:active {
|
|
49
|
+
background-color: var(--light);
|
|
50
|
+
border: 1px solid var(--default-alpha40);
|
|
51
|
+
}
|
|
52
|
+
}
|