ada-ui 4.5.1 → 4.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/.changeset/README.md +8 -0
  2. package/.changeset/config.json +11 -0
  3. package/.github/workflows/release.yml +34 -0
  4. package/.tool-versions +1 -1
  5. package/CHANGELOG.md +22 -0
  6. package/LICENSE +21 -0
  7. package/README.md +9 -3
  8. package/css/ada.css +1 -1
  9. package/index.html +11 -4
  10. package/package.json +15 -5
  11. package/scss/_input.scss +1 -1
  12. package/scss/_tile.scss +1 -0
  13. package/scss/ada.scss +6 -1
  14. package/tailwind.config.js +8 -0
package/.changeset/README.md ADDED
@@ -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)
package/.changeset/config.json ADDED
@@ -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/.github/workflows/release.yml ADDED
@@ -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 CHANGED
@@ -1 +1 @@
1
- nodejs 14.17.1
1
+ nodejs 20.10.0
package/CHANGELOG.md ADDED
@@ -0,0 +1,22 @@
1
+ # ada-ui
2
+
3
+ ## 4.7.0
4
+
5
+ ### Minor Changes
6
+
7
+ - b03f4b1: Add exports for base and theme styles
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 CHANGED
@@ -2,13 +2,17 @@
2
2
 
3
3
  [![npm version](https://badge.fury.io/js/ada-ui.svg)](https://badge.fury.io/js/ada-ui)
4
4
 
5
+ My sci-fi inspired UI components library. Still growing...
6
+
5
7
  ## CDN
6
8
 
7
9
  https://cdn.jsdelivr.net/gh/tklepzig/Ada@version/css/ada.min.css
8
10
 
9
- Replace `version` with the version of your desired release, see https://github.com/tklepzig/Ada/releases (e.g. `2.9.0`)
11
+ Replace `version` with the version of your desired release, see
12
+ https://github.com/tklepzig/Ada/releases (e.g. `2.9.0`)
10
13
 
11
- > Attention: Beginning with version 3.0, the filenames don't contain `min` any longer. So the URL should be
14
+ > Attention: Beginning with version 3.0, the filenames don't contain `min` any
15
+ > longer. So the URL should be
12
16
  >
13
17
  > https://cdn.jsdelivr.net/gh/tklepzig/Ada@3.0.0/css/ada.css
14
18
 
@@ -22,6 +26,8 @@ Replace `version` with the version of your desired release, see https://github.c
22
26
 
23
27
  ## Select a Theme
24
28
 
25
- Beginning with version 3.0.0, you can choose between different themes. When using the CSS, ensure to include the correct theme file before the main one, e.g.:
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.:
26
32
 
27
33
  https://cdn.jsdelivr.net/gh/tklepzig/Ada@3.0.0/css/ada.blue.css
package/css/ada.css CHANGED
@@ -1 +1 @@
1
- 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;box-sizing:border-box;padding:.5rem}h1{font-size:3rem}.commands:not(.vertical),h2{font-size:2rem}.panel>header,.tile>header,h3{font-size:1.5rem}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 1.6rem;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)}}
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)}}
package/index.html CHANGED
@@ -113,23 +113,30 @@
113
113
  </article>
114
114
  <footer></footer>
115
115
  </div>
116
+ <div class="panel">
117
+ <header>Input</header>
118
+ <article>
119
+ <input class="input" />
120
+ </article>
121
+ <footer></footer>
122
+ </div>
116
123
  <div class="panel">
117
124
  <header>Spinner</header>
118
125
  <article>
119
126
  <div>
120
- <h4>Large</h4>
127
+ <h4>80px</h4>
121
128
  <div class="spinner" style="font-size: 80px"></div>
122
129
  <div class="spinner shade1" style="font-size: 80px"></div>
123
130
  <div class="spinner shade2" style="font-size: 80px"></div>
124
131
  <div class="spinner accent" style="font-size: 80px"></div>
125
132
  <div class="spinner warn" style="font-size: 80px"></div>
126
- <h4>Medium</h4>
133
+ <h4>32px</h4>
127
134
  <div class="spinner" style="font-size: 32px"></div>
128
135
  <div class="spinner shade1" style="font-size: 32px"></div>
129
136
  <div class="spinner shade2" style="font-size: 32px"></div>
130
137
  <div class="spinner accent" style="font-size: 32px"></div>
131
138
  <div class="spinner warn" style="font-size: 32px"></div>
132
- <h4>Small</h4>
139
+ <h4>16px</h4>
133
140
  <div class="spinner" style="font-size: 16px"></div>
134
141
  <div class="spinner shade1" style="font-size: 16px"></div>
135
142
  <div class="spinner shade2" style="font-size: 16px"></div>
@@ -220,7 +227,7 @@
220
227
  <div class="spinner" style="font-size: 30px"></div>
221
228
  </button>
222
229
  <button class="shade2">Command and sth more looong</button>
223
- <button class="warn flash">Confirm Deletion</button>
230
+ <button class="warn flash">Blinking</button>
224
231
  <button disabled class="warn">Disabled</button>
225
232
  <div></div>
226
233
  Commands
package/package.json CHANGED
@@ -1,11 +1,19 @@
1
1
  {
2
2
  "name": "ada-ui",
3
- "version": "4.5.1",
3
+ "version": "4.7.0",
4
4
  "scripts": {
5
- "dev": "tmux splitw -d npm run build:dev && tmux splitw -d npm run start:dev",
6
- "start:dev": "alive-server .",
7
- "build:dev": "sass scss:css --watch",
8
- "build": "rm -rf css && sass scss:css -s compressed --no-source-map"
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 --no-git-tag --snapshot",
9
+ "release": "npm run build && changeset publish"
10
+ },
11
+ "license": "MIT",
12
+ "exports": {
13
+ ".": "./css/ada.css",
14
+ "./blue": "./css/ada.blue.css",
15
+ "./green": "./css/ada.green.css",
16
+ "./tailwind": "./tailwind.config.js"
9
17
  },
10
18
  "repository": {
11
19
  "type": "git",
@@ -16,7 +24,9 @@
16
24
  "url": "https://github.com/tklepzig/Ada/issues"
17
25
  },
18
26
  "devDependencies": {
27
+ "@changesets/cli": "^2.27.1",
19
28
  "alive-server": "^1.2.9",
29
+ "concurrently": "^8.2.2",
20
30
  "sass": "^1.42.1"
21
31
  }
22
32
  }
package/scss/_input.scss CHANGED
@@ -7,7 +7,7 @@
7
7
  font-family: inherit;
8
8
  background-color: transparent;
9
9
  transition: border-color 0.15s ease-in-out;
10
- padding: 0.8rem 1.6rem;
10
+ padding: 0.8rem;
11
11
  margin: 0.8rem;
12
12
  font-size: 1.1rem;
13
13
 
package/scss/_tile.scss CHANGED
@@ -6,6 +6,7 @@
6
6
  margin: 0.8rem;
7
7
 
8
8
  > header {
9
+ @extend %h4;
9
10
  &:before {
10
11
  @include corner("top-left", "light");
11
12
  }
package/scss/ada.scss CHANGED
@@ -13,6 +13,12 @@ $box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
13
13
  }
14
14
  }
15
15
 
16
+ *,
17
+ ::before,
18
+ ::after {
19
+ box-sizing: border-box;
20
+ }
21
+
16
22
  html {
17
23
  font-size: 14px;
18
24
  font-family: $font-family;
@@ -35,7 +41,6 @@ body {
35
41
  body {
36
42
  font-size: 1rem;
37
43
  -webkit-tap-highlight-color: transparent;
38
- box-sizing: border-box;
39
44
  padding: 0.5rem;
40
45
  }
41
46
 
package/tailwind.config.js ADDED
@@ -0,0 +1,8 @@
1
+ /** @type {import('tailwindcss').Config} */
2
+ module.exports = {
3
+ content: ["./src/**/*.{html,jsx,tsx}"],
4
+ theme: {
5
+ extend: {},
6
+ },
7
+ plugins: [],
8
+ };