ada-ui 0.0.0-20240120121659 → 0.0.0-beta-v5-20240723120941
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/.github/workflows/release.yml +4 -2
- package/CHANGELOG.md +8 -11
- package/css/ada.blue-new.css +1 -0
- package/css/ada.blue.css +1 -1
- package/css/ada.css +1 -1
- package/css/ada.green.css +1 -1
- package/index.html +216 -155
- package/package.json +7 -6
- package/scss/_ada.theme-base.scss +7 -11
- package/scss/_button.scss +70 -30
- package/scss/_command.scss +130 -0
- package/scss/_commands.scss +29 -23
- package/scss/_corner.scss +8 -8
- package/scss/_global.scss +33 -0
- package/scss/_input.scss +4 -5
- package/scss/_panel.scss +12 -14
- package/scss/_reset.scss +15 -374
- package/scss/_spinner-lab.scss +10 -10
- package/scss/_spinner.scss +2 -3
- package/scss/_tile.scss +10 -9
- package/scss/_typography.scss +12 -27
- package/scss/ada.blue-new.scss +68 -0
- package/scss/ada.blue.scss +4 -0
- package/scss/ada.scss +3 -50
- package/todo +6 -0
- package/tailwind.config.js +0 -15
|
@@ -27,8 +27,10 @@ jobs:
|
|
|
27
27
|
id: changesets
|
|
28
28
|
uses: changesets/action@v1
|
|
29
29
|
with:
|
|
30
|
-
|
|
31
|
-
|
|
30
|
+
publish: npm run publish
|
|
31
|
+
version: npm run version
|
|
32
|
+
commit: Publish Version
|
|
33
|
+
title: Publish Version
|
|
32
34
|
env:
|
|
33
35
|
GITHUB_TOKEN: ${{ secrets.REPO_TOKEN }}
|
|
34
36
|
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,22 +1,19 @@
|
|
|
1
1
|
# ada-ui
|
|
2
2
|
|
|
3
|
-
## 0.0.0-
|
|
3
|
+
## 0.0.0-beta-v5-20240723120941
|
|
4
4
|
|
|
5
|
-
###
|
|
6
|
-
|
|
7
|
-
- colors
|
|
8
|
-
|
|
9
|
-
## 0.0.0-20240120121409
|
|
10
|
-
|
|
11
|
-
### Minor Changes
|
|
5
|
+
### Major Changes
|
|
12
6
|
|
|
13
|
-
-
|
|
7
|
+
- 33e84ac: Simplified colors and using lch instead of hsl
|
|
8
|
+
- 33e84ac: Add reset style
|
|
9
|
+
- 33e84ac: Deprecate Button in favor of Command
|
|
10
|
+
- 33e84ac: Deprecate tile in favor of using always a panel
|
|
14
11
|
|
|
15
|
-
##
|
|
12
|
+
## 4.7.0
|
|
16
13
|
|
|
17
14
|
### Minor Changes
|
|
18
15
|
|
|
19
|
-
- Add exports
|
|
16
|
+
- b03f4b1: Add exports for base and theme styles
|
|
20
17
|
|
|
21
18
|
## 4.6.0
|
|
22
19
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.warn,.accent-alt,.accent,.primary-alt,.primary,:root{--fg100: lch(var(--100));--fg200: lch(var(--200));--bg600: lch(var(--600));--bg700: lch(var(--700));--bg800: lch(var(--800));--bg900: lch(var(--900));--panel-background: lch(var(--800) / 0.1)}:root{--bg-body: lch(5 8 260)}.primary,:root{--100: 90 17 260;--200: 70 17 260;--600: 36 36 260;--700: 29 30 260;--800: 26 29 260;--900: 19 23 260}.primary-alt{--100: 90 17 246;--200: 70 17 246;--600: 51 40 246;--700: 44 34 246;--800: 41 33 246;--900: 34 27 246}.accent{--100: 90 17 152;--200: 70 17 152;--600: 40 37 152;--700: 33 31 152;--800: 30 30 152;--900: 23 24 152}.accent-alt{--100: 90 17 206;--200: 70 17 206;--600: 52 30 206;--700: 45 24 206;--800: 42 23 206;--900: 35 17 206}.warn{--100: 90 17 40;--200: 70 17 40;--600: 40 75 40;--700: 33 69 40;--800: 30 68 40;--900: 23 62 40}
|
package/css/ada.blue.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.warn,.accent,.shade2,.shade1,.primary,:root{--
|
|
1
|
+
.warn,.accent,.shade2,.shade1,.primary,:root{--fg100: lch(var(--100));--fg200: lch(var(--200));--bg600: lch(var(--600));--bg700: lch(var(--700));--bg800: lch(var(--800));--bg900: lch(var(--900));--panel-background: lch(var(--800) / 0.1)}.primary,:root{--h: 205;--s: 80%;--l: 23%;--h-light: 205;--s-light: 80%;--l-light: 40%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}:root{--bg: hsl(207, 61%, 7%)}.shade1{--h: 198;--s: 90%;--l: 30%;--h-light: 198;--s-light: 90%;--l-light: 58%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.shade2{--h: 185;--s: 50%;--l: 30%;--h-light: 185;--s-light: 50%;--l-light: 50%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.accent{--h: 146;--s: 58%;--l: 20%;--h-light: 146;--s-light: 58%;--l-light: 48%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.warn{--h: 0;--s: 100%;--l: 28%;--h-light: 0;--s-light: 85%;--l-light: 48%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}
|
package/css/ada.css
CHANGED
|
@@ -1 +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)}}
|
|
1
|
+
*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{margin:0}h1,h2,h3,h4,h5,h6,p,pre{font-size:inherit;font-weight:inherit;margin:0}a{color:inherit;text-decoration:inherit}button,input,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}button,[role=button]{cursor:pointer}:disabled{cursor:default}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}ol,ul,menu{list-style:none;margin:0;padding:0}:root{--font-family: "Open Sans", sans-serif;--font-size: 16px;--box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);--gap-sm: 4px;--gap: 6px;--spacing: 0.8rem;--border-width-sm: 0.08rem;--border-width: 0.15rem;--focus-border-width: 0.15rem}@media screen and (min-width: 768px){:root{--font-size: 14px}}html{font-family:var(--font-family);font-weight:400}html,body{font-size:var(--font-size);height:100%;min-height:100%}body{padding:var(--spacing);background:var(--bg-body);color:var(--fg100)}h1,h2,h3,h4,h5,h6,.panel>header{font-weight:300;text-shadow:0 0 4px var(--bg700);color:var(--fg100)}h1{font-size:3rem;margin:1rem 0 2rem 0}h1.m-0{margin:0}h2{font-size:2rem;margin:1rem 0 1.5rem 0}h2.m-0{margin:0}h3{font-size:1.5rem;margin:.5rem 0 1.5rem 0}h3.m-0{margin:0}h4{font-size:1.2rem;margin:.5rem 0 .5rem 0}h4.m-0{margin:0}.command{overflow:hidden;outline:none;color:var(--fg100);font-family:inherit;cursor:pointer;user-select:none;vertical-align:middle;transition:border-color .15s ease-in-out,background-color .15s ease-in-out;background-color:var(--bg900);box-shadow:var(--box-shadow);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 var(--focus-border-width);padding:.25rem .6rem;min-height:3rem;min-width:3rem;border-radius:.3rem}.command:disabled{opacity:.6;filter:saturate(0.2);cursor:default;pointer-events:none}.command.flash{animation:flash-background 1s ease-in-out infinite}.command.outline{background-color:transparent;border-color:var(--bg800);border-width:var(--border-width)}.command.outline.flash{animation-name:flash-border}.command:focus{border-left-color:var(--bg600)}.command:active{border-color:var(--bg600);background-color:var(--bg600);animation-play-state:paused}.compound-command{display:inline-grid;grid-auto-flow:column;gap:var(--gap)}.compound-command>.spacer{background-color:var(--bg900);box-shadow:var(--box-shadow);min-width:1rem;min-height:1rem}.compound-command>.spacer.outline{background-color:transparent;border:var(--border-width) solid var(--bg800)}.compound-command>.text{font-size:2rem;line-height:2rem;align-self:center;padding:.25rem}.compound-command>button:first-child,.compound-command .spacer:first-child{border-radius:.3rem 0 0 .3rem}.compound-command>button:not(:first-child):not(:last-child),.compound-command .spacer:not(:first-child):not(:last-child){border-radius:0}.compound-command>button:last-child,.compound-command .spacer:last-child{border-radius:0 .3rem .3rem 0}.compound-command.vertical{grid-auto-flow:row}.compound-command.vertical>.text{justify-self:center}.compound-command.vertical>button:first-child,.compound-command.vertical .spacer:first-child{border-radius:.3rem .3rem 0 0}.compound-command.vertical>button:last-child,.compound-command.vertical .spacer:last-child{border-radius:0 0 .3rem .3rem}@keyframes flash-background{50%{background-color:var(--bg700)}}@keyframes flash-border{50%{border-color:var(--bg600)}}.input{border-radius:.3rem;box-shadow:var(--box-shadow);outline:none;border:var(--border-width-sm) solid var(--bg700);color:var(--fg100);font-family:inherit;background-color:transparent;transition:border-color .15s ease-in-out;padding:.8rem;font-size:1.1rem}.input:focus{border:var(--border-width-sm) solid var(--bg600)}.input:disabled{opacity:.4;filter:saturate(0.6);cursor:default;pointer-events:none}.panel{background:var(--panel-background);box-shadow:var(--box-shadow);border-radius:.3rem;display:grid;grid-template-rows:auto 1fr auto;overflow:auto;margin:.5rem}.panel>header{position:relative;font-size:1.5rem;padding:.4rem .6rem}.panel>header:before{--corner-border-width: var(--border-width);content:"";border-style:solid;border-color:var(--bg800);position:absolute;height:1rem;width:1rem;z-index:2;border-width:var(--corner-border-width) 0 0 var(--corner-border-width);border-radius:.3rem 0 0 0;left:0;top:0}.panel>header:after{--corner-border-width: var(--border-width);content:"";border-style:solid;border-color:var(--bg800);position:absolute;height:1rem;width:1rem;z-index:2;border-width:var(--corner-border-width) var(--corner-border-width) 0 0;border-radius:0 .3rem 0 0;right:0;top:0}.panel>article{z-index:1;padding:0 .6rem;overflow:auto}.panel>article::-webkit-scrollbar{width:var(--border-width);background:transparent}.panel>article::-webkit-scrollbar-thumb{min-width:1rem;border-style:solid;border-color:transparent;border-width:var(--border-width);background:var(--bg800);box-sizing:border-box;background-clip:border-box}.panel>footer{position:relative;color:var(--fg200);padding:.4rem .6rem;font-size:.75rem;text-align:right}.panel>footer:before{--corner-border-width: var(--border-width);content:"";border-style:solid;border-color:var(--bg800);position:absolute;height:1rem;width:1rem;z-index:2;border-width:0 0 var(--corner-border-width) var(--corner-border-width);border-radius:0 0 0 .3rem;left:0;bottom:0}.panel>footer:after{--corner-border-width: var(--border-width);content:"";border-style:solid;border-color:var(--bg800);position:absolute;height:1rem;width:1rem;z-index:2;border-width:0 var(--corner-border-width) var(--corner-border-width) 0;border-radius:0 0 .3rem 0;right:0;bottom:0}.spinner{display:inline-grid;justify-items:center;align-items:center;width:1em;height:1em;position:relative;box-sizing:border-box;animation:6s .5s rotate ease-in-out alternate infinite}.spinner:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-style:solid;border-width:.05em;border-radius:50%;border-color:var(--bg800) transparent;animation:4s .5s inset1 ease-in-out infinite;box-shadow:0px 12px 10px -12px #000a,0px -12px 10px -12px #000a}.spinner:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-style:solid;border-width:.05em;border-radius:50%;border-color:transparent var(--bg600);animation:4s .5s inset2 ease-in-out infinite;box-shadow:12px 0px 10px -12px #000a,-12px 0px 10px -12px #000a}@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes inset1{0%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}12.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(0)}37.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(180deg)}50%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}100%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}}@keyframes inset2{0%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}50%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}62.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(0)}87.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(180deg)}100%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}}
|
package/css/ada.green.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.warn,.accent,.shade2,.shade1,.primary,:root{--
|
|
1
|
+
.warn,.accent,.shade2,.shade1,.primary,:root{--fg100: lch(var(--100));--fg200: lch(var(--200));--bg600: lch(var(--600));--bg700: lch(var(--700));--bg800: lch(var(--800));--bg900: lch(var(--900));--panel-background: lch(var(--800) / 0.1)}.primary,:root{--h: 105;--s: 50%;--l: 24%;--h-light: 102;--s-light: 72%;--l-light: 34%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}:root{--bg: hsl(135, 34%, 12%)}.shade1{--h: 150;--s: 70%;--l: 20%;--h-light: 133;--s-light: 82%;--l-light: 30%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.shade2{--h: 168;--s: 57%;--l: 32%;--h-light: 167;--s-light: 68%;--l-light: 40%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.accent{--h: 11;--s: 74%;--l: 45%;--h-light: 10;--s-light: 89%;--l-light: 56%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}.warn{--h: 0;--s: 100%;--l: 28%;--h-light: 0;--s-light: 85%;--l-light: 48%;--h-fg: var(--h);--s-fg: 100%;--l-fg: 89%}
|
package/index.html
CHANGED
|
@@ -10,106 +10,229 @@
|
|
|
10
10
|
name="viewport"
|
|
11
11
|
content="user-scalable=yes, initial-scale=1.0, maximum-scale=10.0, width=device-width"
|
|
12
12
|
/>
|
|
13
|
-
<link rel="stylesheet" href="css/ada.blue.css" />
|
|
13
|
+
<link rel="stylesheet" href="css/ada.blue-new.css" />
|
|
14
14
|
<link rel="stylesheet" href="css/ada.css" />
|
|
15
15
|
<link
|
|
16
16
|
href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600"
|
|
17
17
|
rel="stylesheet"
|
|
18
18
|
/>
|
|
19
19
|
<style>
|
|
20
|
-
.color-
|
|
20
|
+
.color-shades {
|
|
21
|
+
display: grid;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.color-shades > div {
|
|
21
25
|
display: inline-grid;
|
|
22
26
|
align-items: center;
|
|
23
27
|
justify-items: center;
|
|
24
|
-
width:
|
|
25
|
-
height:
|
|
26
|
-
margin: 1rem;
|
|
28
|
+
width: 8rem;
|
|
29
|
+
height: 3rem;
|
|
27
30
|
box-sizing: border-box;
|
|
28
|
-
color: var(--
|
|
29
|
-
|
|
30
|
-
|
|
31
|
+
color: var(--fg100);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.color-shades > div.bg900 {
|
|
35
|
+
background: var(--bg900);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.color-shades > div.bg800 {
|
|
39
|
+
background: var(--bg800);
|
|
31
40
|
}
|
|
32
41
|
|
|
33
|
-
.color-
|
|
34
|
-
|
|
35
|
-
background: var(--default-alpha40);
|
|
36
|
-
border-top: 8px solid var(--light-alpha40);
|
|
42
|
+
.color-shades > div.bg700 {
|
|
43
|
+
background: var(--bg700);
|
|
37
44
|
}
|
|
38
45
|
|
|
39
|
-
.color-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
46
|
+
.color-shades > div.bg600 {
|
|
47
|
+
background: var(--bg600);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.color-shades > div.fg200 {
|
|
51
|
+
background: var(--fg200);
|
|
52
|
+
color: var(--bg900);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.color-shades > div.fg100 {
|
|
56
|
+
background: var(--fg100);
|
|
57
|
+
color: var(--bg900);
|
|
43
58
|
}
|
|
44
59
|
</style>
|
|
45
60
|
</head>
|
|
46
61
|
|
|
47
|
-
<body
|
|
62
|
+
<body
|
|
63
|
+
style="
|
|
64
|
+
display: grid;
|
|
65
|
+
grid-template-columns: auto 1fr;
|
|
66
|
+
grid-template-rows: 1fr auto;
|
|
67
|
+
gap: 0.5rem;
|
|
68
|
+
"
|
|
69
|
+
>
|
|
48
70
|
<div
|
|
49
|
-
class="
|
|
50
|
-
style="grid-
|
|
71
|
+
class="compound-command vertical"
|
|
72
|
+
style="grid-template-rows: auto auto 1fr auto auto; min-width: 10rem"
|
|
51
73
|
>
|
|
52
|
-
<button>Command</button>
|
|
53
|
-
<button class="
|
|
54
|
-
<button class="
|
|
55
|
-
<button class="accent">
|
|
56
|
-
<button class="warn">
|
|
74
|
+
<button class="command">Command</button>
|
|
75
|
+
<button class="command primary-alt">Command</button>
|
|
76
|
+
<button class="command accent-alt">Command</button>
|
|
77
|
+
<button class="command accent">Command</button>
|
|
78
|
+
<button class="command warn">Command</button>
|
|
57
79
|
</div>
|
|
58
|
-
<div class="panel"
|
|
59
|
-
<header
|
|
80
|
+
<div class="panel">
|
|
81
|
+
<header></header>
|
|
60
82
|
<article style="display: grid; grid-auto-rows: max-content">
|
|
61
83
|
<div class="panel">
|
|
62
84
|
<header>Colors</header>
|
|
63
|
-
<article
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
<div class="color-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
<div class="color-
|
|
81
|
-
|
|
85
|
+
<article
|
|
86
|
+
style="
|
|
87
|
+
display: grid;
|
|
88
|
+
grid-auto-flow: column;
|
|
89
|
+
justify-content: start;
|
|
90
|
+
gap: 3rem;
|
|
91
|
+
"
|
|
92
|
+
>
|
|
93
|
+
<div class="color-shades">
|
|
94
|
+
<h4>Primary</h4>
|
|
95
|
+
<div class="fg100">FG 100</div>
|
|
96
|
+
<div class="fg200">FG 200</div>
|
|
97
|
+
<div class="bg600">BG 600</div>
|
|
98
|
+
<div class="bg700">BG 700</div>
|
|
99
|
+
<div class="bg800">BG 800</div>
|
|
100
|
+
<div class="bg900">BG 900</div>
|
|
101
|
+
</div>
|
|
102
|
+
<div class="color-shades">
|
|
103
|
+
<h4>Primary Alt</h4>
|
|
104
|
+
<div class="fg100 primary-alt">FG 100</div>
|
|
105
|
+
<div class="fg200 primary-alt">FG 200</div>
|
|
106
|
+
<div class="bg600 primary-alt">BG 600</div>
|
|
107
|
+
<div class="bg700 primary-alt">BG 700</div>
|
|
108
|
+
<div class="bg800 primary-alt">BG 800</div>
|
|
109
|
+
<div class="bg900 primary-alt">BG 900</div>
|
|
110
|
+
</div>
|
|
111
|
+
<div class="color-shades">
|
|
112
|
+
<h4>Accent</h4>
|
|
113
|
+
<div class="fg100 accent">FG 100</div>
|
|
114
|
+
<div class="fg200 accent">FG 200</div>
|
|
115
|
+
<div class="bg600 accent">BG 600</div>
|
|
116
|
+
<div class="bg700 accent">BG 700</div>
|
|
117
|
+
<div class="bg800 accent">BG 800</div>
|
|
118
|
+
<div class="bg900 accent">BG 900</div>
|
|
119
|
+
</div>
|
|
120
|
+
<div class="color-shades">
|
|
121
|
+
<h4>Accent Alt</h4>
|
|
122
|
+
<div class="fg100 accent-alt">FG 100</div>
|
|
123
|
+
<div class="fg200 accent-alt">FG 200</div>
|
|
124
|
+
<div class="bg600 accent-alt">BG 600</div>
|
|
125
|
+
<div class="bg700 accent-alt">BG 700</div>
|
|
126
|
+
<div class="bg800 accent-alt">BG 800</div>
|
|
127
|
+
<div class="bg900 accent-alt">BG 900</div>
|
|
128
|
+
</div>
|
|
129
|
+
<div class="color-shades">
|
|
130
|
+
<h4>Warn</h4>
|
|
131
|
+
<div class="fg100 warn">FG 100</div>
|
|
132
|
+
<div class="fg200 warn">FG 200</div>
|
|
133
|
+
<div class="bg600 warn">BG 600</div>
|
|
134
|
+
<div class="bg700 warn">BG 700</div>
|
|
135
|
+
<div class="bg800 warn">BG 800</div>
|
|
136
|
+
<div class="bg900 warn">BG 900</div>
|
|
137
|
+
</div>
|
|
82
138
|
</article>
|
|
83
139
|
<footer></footer>
|
|
84
140
|
</div>
|
|
85
141
|
<div class="panel">
|
|
86
|
-
<header>
|
|
87
|
-
<article
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
<
|
|
96
|
-
<button class="
|
|
97
|
-
<button class="
|
|
98
|
-
<button class="
|
|
99
|
-
<button class="
|
|
100
|
-
<
|
|
101
|
-
<
|
|
102
|
-
<button
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
<
|
|
109
|
-
<
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
142
|
+
<header>Commands</header>
|
|
143
|
+
<article
|
|
144
|
+
style="
|
|
145
|
+
display: inline-grid;
|
|
146
|
+
justify-content: start;
|
|
147
|
+
justify-items: start;
|
|
148
|
+
gap: 1rem;
|
|
149
|
+
"
|
|
150
|
+
>
|
|
151
|
+
<h4 style="grid-column: span 5">Default</h4>
|
|
152
|
+
<button class="command">Command</button>
|
|
153
|
+
<button class="command primary-alt">Command</button>
|
|
154
|
+
<button class="command accent-alt">Command</button>
|
|
155
|
+
<button class="command accent">Command</button>
|
|
156
|
+
<button class="command warn">Command</button>
|
|
157
|
+
<h4 style="grid-column: span 5">Default - Wrapping</h4>
|
|
158
|
+
<button
|
|
159
|
+
style="max-width: 20rem; grid-column: span 5"
|
|
160
|
+
class="command"
|
|
161
|
+
>
|
|
162
|
+
A command with a quite long description.
|
|
163
|
+
</button>
|
|
164
|
+
<h4 style="grid-column: span 5">Single line with ellipsis</h4>
|
|
165
|
+
<p style="grid-column: span 5; max-width: 35rem">
|
|
166
|
+
A wrapper element is needed to achieve ellipsis. See page's source
|
|
167
|
+
code for details.
|
|
168
|
+
</p>
|
|
169
|
+
<p style="grid-column: span 5; max-width: 35rem">
|
|
170
|
+
Double check if ellipsis is really needed and if yes, that the
|
|
171
|
+
full text is visible with another interaction (no tooltip, since
|
|
172
|
+
not mobile friendly and not in the sense of the Ada look and feel)
|
|
173
|
+
</p>
|
|
174
|
+
<button
|
|
175
|
+
style="max-width: 20rem; grid-column: span 5"
|
|
176
|
+
class="command"
|
|
177
|
+
>
|
|
178
|
+
<span
|
|
179
|
+
style="
|
|
180
|
+
text-overflow: ellipsis;
|
|
181
|
+
overflow: hidden;
|
|
182
|
+
white-space: nowrap;
|
|
183
|
+
width: 100%;
|
|
184
|
+
"
|
|
185
|
+
>
|
|
186
|
+
A command with a quite long description.
|
|
187
|
+
</span>
|
|
188
|
+
</button>
|
|
189
|
+
<h4 style="grid-column: span 5">Outline</h4>
|
|
190
|
+
<button class="command outline">Command</button>
|
|
191
|
+
<button class="command outline primary-alt">Command</button>
|
|
192
|
+
<button class="command outline accent-alt">Command</button>
|
|
193
|
+
<button class="command outline accent">Command</button>
|
|
194
|
+
<button class="command outline warn">Command</button>
|
|
195
|
+
<h4 style="grid-column: span 5">Flashing</h4>
|
|
196
|
+
<button class="command flash">Command</button>
|
|
197
|
+
<button class="command flash primary-alt">Command</button>
|
|
198
|
+
<button class="command flash accent-alt">Command</button>
|
|
199
|
+
<button class="command flash accent">Command</button>
|
|
200
|
+
<button class="command flash warn">Command</button>
|
|
201
|
+
<button class="command flash outline">Command</button>
|
|
202
|
+
<button class="command flash outline primary-alt">Command</button>
|
|
203
|
+
<button class="command flash outline accent-alt">Command</button>
|
|
204
|
+
<button class="command flash outline accent">Command</button>
|
|
205
|
+
<button class="command flash outline warn">Command</button>
|
|
206
|
+
<h4 style="grid-column: span 5">Disabled</h4>
|
|
207
|
+
<button disabled class="command">Command</button>
|
|
208
|
+
<button disabled class="command primary-alt">Command</button>
|
|
209
|
+
<button disabled class="command accent-alt">Command</button>
|
|
210
|
+
<button disabled class="command accent">Command</button>
|
|
211
|
+
<button disabled class="command warn">Command</button>
|
|
212
|
+
<button disabled class="command outline">Command</button>
|
|
213
|
+
<button disabled class="command outline primary-alt">
|
|
214
|
+
Command
|
|
215
|
+
</button>
|
|
216
|
+
<button disabled class="command outline accent-alt">Command</button>
|
|
217
|
+
<button disabled class="command outline accent">Command</button>
|
|
218
|
+
<button disabled class="command outline warn">Command</button>
|
|
219
|
+
<h4 style="grid-column: span 5">Compound</h4>
|
|
220
|
+
<div style="grid-column: span 5" class="compound-command">
|
|
221
|
+
<button class="command outline">Any command</button>
|
|
222
|
+
<button class="command primary-alt outline"></button>
|
|
223
|
+
<div class="spacer outline"></div>
|
|
224
|
+
</div>
|
|
225
|
+
<div style="grid-column: span 5" class="compound-command">
|
|
226
|
+
<button class="command">Command</button>
|
|
227
|
+
<div class="text">47</div>
|
|
228
|
+
<div class="spacer"></div>
|
|
229
|
+
</div>
|
|
230
|
+
<h4 style="grid-column: span 5">Compound Vertical</h4>
|
|
231
|
+
<div class="compound-command vertical">
|
|
232
|
+
<button class="command">Command</button>
|
|
233
|
+
<div class="text">47</div>
|
|
234
|
+
<div class="spacer"></div>
|
|
235
|
+
</div>
|
|
113
236
|
</article>
|
|
114
237
|
<footer></footer>
|
|
115
238
|
</div>
|
|
@@ -126,111 +249,49 @@
|
|
|
126
249
|
<div>
|
|
127
250
|
<h4>80px</h4>
|
|
128
251
|
<div class="spinner" style="font-size: 80px"></div>
|
|
129
|
-
<div class="spinner
|
|
130
|
-
<div class="spinner
|
|
252
|
+
<div class="spinner primary-alt" style="font-size: 80px"></div>
|
|
253
|
+
<div class="spinner accent-alt" style="font-size: 80px"></div>
|
|
131
254
|
<div class="spinner accent" style="font-size: 80px"></div>
|
|
132
255
|
<div class="spinner warn" style="font-size: 80px"></div>
|
|
133
256
|
<h4>32px</h4>
|
|
134
257
|
<div class="spinner" style="font-size: 32px"></div>
|
|
135
|
-
<div class="spinner
|
|
136
|
-
<div class="spinner
|
|
258
|
+
<div class="spinner primary-alt" style="font-size: 32px"></div>
|
|
259
|
+
<div class="spinner accent-alt" style="font-size: 32px"></div>
|
|
137
260
|
<div class="spinner accent" style="font-size: 32px"></div>
|
|
138
261
|
<div class="spinner warn" style="font-size: 32px"></div>
|
|
139
262
|
<h4>16px</h4>
|
|
140
263
|
<div class="spinner" style="font-size: 16px"></div>
|
|
141
|
-
<div class="spinner
|
|
142
|
-
<div class="spinner
|
|
264
|
+
<div class="spinner primary-alt" style="font-size: 16px"></div>
|
|
265
|
+
<div class="spinner accent-alt" style="font-size: 16px"></div>
|
|
143
266
|
<div class="spinner accent" style="font-size: 16px"></div>
|
|
144
267
|
<div class="spinner warn" style="font-size: 16px"></div>
|
|
145
268
|
</div>
|
|
146
269
|
</article>
|
|
147
270
|
<footer></footer>
|
|
148
271
|
</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
272
|
</article>
|
|
217
|
-
<footer>
|
|
273
|
+
<footer>Ada Version 5.0.0</footer>
|
|
218
274
|
</div>
|
|
219
275
|
<div
|
|
220
|
-
class="
|
|
276
|
+
class="compound-command"
|
|
221
277
|
style="
|
|
222
|
-
grid-
|
|
223
|
-
grid-
|
|
278
|
+
grid-template-columns: auto auto 12rem auto auto 1fr auto auto;
|
|
279
|
+
grid-column: span 2;
|
|
224
280
|
"
|
|
225
281
|
>
|
|
226
|
-
<
|
|
282
|
+
<div class="spacer"></div>
|
|
283
|
+
<button
|
|
284
|
+
class="command"
|
|
285
|
+
style="justify-items: center; align-items: center"
|
|
286
|
+
>
|
|
227
287
|
<div class="spinner" style="font-size: 30px"></div>
|
|
228
288
|
</button>
|
|
229
|
-
<button class="
|
|
230
|
-
<button class="warn
|
|
231
|
-
<button disabled class="
|
|
232
|
-
<div></div>
|
|
233
|
-
|
|
289
|
+
<button class="command accent-alt">Command</button>
|
|
290
|
+
<button class="command warn">Command</button>
|
|
291
|
+
<button disabled class="command">Disabled Command</button>
|
|
292
|
+
<div class="spacer"></div>
|
|
293
|
+
<div class="text">Ada</div>
|
|
294
|
+
<div class="spacer"></div>
|
|
234
295
|
</div>
|
|
235
296
|
</body>
|
|
236
297
|
</html>
|
package/package.json
CHANGED
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ada-ui",
|
|
3
|
-
"version": "0.0.0-
|
|
3
|
+
"version": "0.0.0-beta-v5-20240723120941",
|
|
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",
|
|
7
|
-
"
|
|
8
|
-
"snapshot": "npm run build && changeset version --snapshot $1 && changeset publish --no-git-tag --
|
|
9
|
-
"
|
|
7
|
+
"changeset": "changeset",
|
|
8
|
+
"snapshot": "f(){ if [ -z \"$1\" ]; then echo \"Error: No tag name specified, exiting.\"; exit 1; fi; npm run build && changeset version --snapshot $1 && changeset publish --no-git-tag --tag $1; }; f",
|
|
9
|
+
"remove-snapshot": "f(){ if [ -z \"$1\" ]; then echo \"Error: No tag name specified, exiting.\"; exit 1; fi; npm dist-tag rm ada-ui $1; }; f",
|
|
10
|
+
"version": "npm run build && changeset version",
|
|
11
|
+
"publish": "changeset publish"
|
|
10
12
|
},
|
|
11
13
|
"license": "MIT",
|
|
12
14
|
"exports": {
|
|
13
15
|
".": "./css/ada.css",
|
|
14
16
|
"./blue": "./css/ada.blue.css",
|
|
15
|
-
"./green": "./css/ada.green.css"
|
|
16
|
-
"./tailwind-config": "./tailwind.config.js"
|
|
17
|
+
"./green": "./css/ada.green.css"
|
|
17
18
|
},
|
|
18
19
|
"repository": {
|
|
19
20
|
"type": "git",
|
|
@@ -1,15 +1,11 @@
|
|
|
1
1
|
%colourShades {
|
|
2
|
-
--
|
|
2
|
+
--fg100: lch(var(--100));
|
|
3
|
+
--fg200: lch(var(--200));
|
|
3
4
|
|
|
4
|
-
--
|
|
5
|
-
--
|
|
6
|
-
--
|
|
5
|
+
--bg600: lch(var(--600));
|
|
6
|
+
--bg700: lch(var(--700));
|
|
7
|
+
--bg800: lch(var(--800));
|
|
8
|
+
--bg900: lch(var(--900));
|
|
7
9
|
|
|
8
|
-
--
|
|
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);
|
|
10
|
+
--panel-background: lch(var(--800) / 0.1);
|
|
15
11
|
}
|