ada-ui 0.0.0-beta-v5-20240723181534 → 0.0.0-beta-v5-20240727181205

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/css/ada.blue-light.css +1 -0
  3. package/css/ada.blue.css +1 -1
  4. package/css/ada.css +1 -1
  5. package/css/ada.green.css +1 -0
  6. package/index.html +192 -94
  7. package/package.json +1 -1
  8. package/scss/_ada.theme-base.scss +10 -7
  9. package/scss/_command.scss +22 -14
  10. package/scss/_global.scss +20 -7
  11. package/scss/_input.scss +3 -3
  12. package/scss/_panel.scss +3 -16
  13. package/scss/_spinner.scss +6 -4
  14. package/scss/_typography.scss +2 -2
  15. package/scss/ada.blue-light.scss +41 -0
  16. package/scss/ada.blue.scss +8 -45
  17. package/scss/ada.green.scss +1 -0
package/CHANGELOG.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # ada-ui
2
2
 
3
- ## 0.0.0-beta-v5-20240723181534
3
+ ## 0.0.0-beta-v5-20240727181205
4
4
 
5
5
  ### Major Changes
6
6
 
package/css/ada.blue-light.css ADDED
@@ -0,0 +1 @@
1
+ .warn,.shade2,.shade3,.shade1,.primary,:root{--color100: oklch(0.91 0.05 var(--hue));--color500: oklch(0.46 0.13 var(--hue));--color600: oklch(0.41 0.11 var(--hue));--color700: oklch(0.36 0.09 var(--hue));--color800: oklch(0.31 0.07 var(--hue));--color950: oklch(0.18 0.03 var(--hue));--bg-body: var(--bg-body-override, var(--color950));--fg-body: var(--fg-body-override, var(--color100));--panel-background: oklch(var(--500) / 0.1)}.warn,.shade2,.shade3,.shade1,.primary,:root{--bg-body-override: var(--color100);--fg-body-override: var(--color800)}.primary,:root{--hue: 246}.shade1{--hue: 225}.shade3{--hue: 165}.shade2{--hue: 190}.warn{--hue: 29}
package/css/ada.blue.css CHANGED
@@ -1 +1 @@
1
- .warn,.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}
1
+ .warn,.shade2,.shade3,.shade1,.primary,:root{--color100: oklch(0.91 0.05 var(--hue));--color500: oklch(0.46 0.13 var(--hue));--color600: oklch(0.41 0.11 var(--hue));--color700: oklch(0.36 0.09 var(--hue));--color800: oklch(0.31 0.07 var(--hue));--color950: oklch(0.18 0.03 var(--hue));--bg-body: var(--bg-body-override, var(--color950));--fg-body: var(--fg-body-override, var(--color100));--panel-background: oklch(var(--500) / 0.1)}.primary,:root{--hue: 246}.shade1{--hue: 225}.shade3{--hue: 165}.shade2{--hue: 190}.warn{--hue: 29}
package/css/ada.css CHANGED
@@ -1 +1 @@
1
- *,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{margin:0}h1,h2,h3,h4,h5,h6,p,pre{font-size:inherit;font-weight:inherit;margin:0}a{color:inherit;text-decoration:inherit}button,input,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}button,[role=button]{cursor:pointer}:disabled{cursor:default}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}ol,ul,menu{list-style:none;margin:0;padding:0}:root{--font-family: "Open Sans", sans-serif;--font-size: 16px;--scale-sm: 0.85rem;--scale-base: 1rem;--scale-lg: 1.2rem;--scale-xl: 1.4rem;--scale-2xl: 1.6rem;--scale-3xl: 1.8rem;--box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);--spacing-xs: 2px;--spacing-sm: 6px;--spacing: 10px;--border-width: 0.15rem;--focus-border-width: 0.15rem;--border-radius: 0.3rem}@media screen and (min-width: 768px){:root{--font-size: 14px}}html{font-family:var(--font-family);font-weight:400}html,body{font-size:var(--font-size);height:100%;min-height:100%}body{padding:var(--spacing);background:var(--bg-body);color:var(--fg100)}h1,h2,h3,h4,.panel>header{font-weight:300;text-shadow:0 0 4px var(--bg700);color:var(--fg100)}h1{font-size:var(--scale-3xl)}h2{font-size:var(--scale-2xl)}h3{font-size:var(--scale-xl)}h4{font-size:var(--scale-lg)}.command{background-color:var(--bg900);box-shadow:var(--box-shadow);display:grid;align-items:end;justify-items:end;text-align:end;border-style:solid;border-color:transparent;border-width:0 0 0 var(--focus-border-width);padding:var(--spacing-xs) var(--spacing-sm);min-height:3rem;min-width:3rem;border-radius:var(--border-radius);overflow:hidden;outline:none;color:var(--fg100);font-family:inherit;font-size:var(--scale-base);cursor:pointer;user-select:none;vertical-align:middle;transition:border-color .15s ease-in-out,background-color .15s ease-in-out}.command.flash{animation:flash-background 1s ease-in-out infinite}.command:disabled{opacity:.7;cursor:default;pointer-events:none;background:#6d6d6d;color:#ededed}.command.outline{background-color:transparent;border-color:var(--bg800);border-width:var(--border-width)}.command.outline.flash{animation-name:flash-border}.command.outline:disabled{background:transparent;border-color:#6d6d6d}.command:focus{border-left-color:var(--bg600)}.command:active{border-color:var(--bg600);background-color:var(--bg600);animation-play-state:paused}.compound-commands{display:inline-grid;grid-auto-flow:column;gap:var(--spacing-sm)}.compound-commands>.spacer{background-color:var(--bg900);box-shadow:var(--box-shadow);min-width:1rem;min-height:1rem}.compound-commands>.spacer.outline{background-color:transparent;border:var(--border-width) solid var(--bg800)}.compound-commands>.text{font-size:var(--scale-3xl);line-height:var(--scale-3xl);align-self:center;padding:var(--spacing-xs)}.compound-commands>.command:first-child,.compound-commands .spacer:first-child{border-radius:var(--border-radius) 0 0 var(--border-radius)}.compound-commands>.command:not(:first-child):not(:last-child),.compound-commands .spacer:not(:first-child):not(:last-child){border-radius:0}.compound-commands>.command:last-child,.compound-commands .spacer:last-child{border-radius:0 var(--border-radius) var(--border-radius) 0}.compound-commands.vertical{grid-auto-flow:row}.compound-commands.vertical>.text{justify-self:center}.compound-commands.vertical>.command:first-child,.compound-commands.vertical .spacer:first-child{border-radius:var(--border-radius) var(--border-radius) 0 0}.compound-commands.vertical>.command:last-child,.compound-commands.vertical .spacer:last-child{border-radius:0 0 var(--border-radius) var(--border-radius)}@keyframes flash-background{50%{background-color:var(--bg700)}}@keyframes flash-border{50%{border-color:var(--bg600)}}.input{border-radius:var(--border-radius);box-shadow:var(--box-shadow);outline:none;border:var(--border-width) solid var(--bg700);color:var(--fg100);font-family:inherit;background-color:transparent;transition:border-color .15s ease-in-out;padding:var(--spacing-sm);font-size:var(--scale-base)}.input:focus{border:var(--border-width) solid var(--bg600)}.input:disabled{opacity:.4;filter:saturate(0.6);cursor:default;pointer-events:none}.panel>footer::after,.panel>footer::before,.panel>header::after,.panel>header::before{content:"";border-style:solid;border-color:var(--bg800);position:absolute;height:1rem;width:1rem;z-index:2}.panel{background:var(--panel-background);box-shadow:var(--box-shadow);border-radius:var(--border-radius);display:grid;grid-template-rows:auto 1fr auto;overflow:auto}.panel>header{position:relative;font-size:var(--scale-xl);padding:var(--spacing-sm) var(--spacing)}.panel>header::before{border-width:var(--border-width) 0 0 var(--border-width);border-radius:var(--border-radius) 0 0 0;left:0;top:0}.panel>header::after{border-width:var(--border-width) var(--border-width) 0 0;border-radius:0 var(--border-radius) 0 0;right:0;top:0}.panel>article{z-index:1;padding:0 var(--spacing);overflow:auto}.panel>article::-webkit-scrollbar{width:var(--border-width);background:transparent}.panel>article::-webkit-scrollbar-thumb{min-width:1rem;border-style:solid;border-color:transparent;border-width:var(--border-width);background:var(--bg800);box-sizing:border-box;background-clip:border-box}.panel>footer{position:relative;color:var(--fg200);padding:var(--spacing-sm) var(--spacing);font-size:var(--scale-sm);text-align:right}.panel>footer::before{border-width:0 0 var(--border-width) var(--border-width);border-radius:0 0 0 var(--border-radius);left:0;bottom:0}.panel>footer::after{border-width:0 var(--border-width) var(--border-width) 0;border-radius:0 0 var(--border-radius) 0;right:0;bottom:0}.spinner{display:inline-grid;justify-items:center;align-items:center;width:1em;height:1em;position:relative;box-sizing:border-box;animation:6s .5s rotate ease-in-out alternate infinite}.spinner::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-style:solid;border-width:.05em;border-radius:50%;border-color:var(--bg800) transparent;animation:4s .5s inset1 ease-in-out infinite;box-shadow:0px 12px 10px -12px #000a,0px -12px 10px -12px #000a}.spinner::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-style:solid;border-width:.05em;border-radius:50%;border-color:transparent var(--bg600);animation:4s .5s inset2 ease-in-out infinite;box-shadow:12px 0px 10px -12px #000a,-12px 0px 10px -12px #000a}@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes inset1{0%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}12.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(0)}37.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(180deg)}50%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}100%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}}@keyframes inset2{0%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}50%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}62.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(0)}87.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(180deg)}100%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}}
1
+ *,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{margin:0}h1,h2,h3,h4,h5,h6,p,pre{font-size:inherit;font-weight:inherit;margin:0}a{color:inherit;text-decoration:inherit}button,input,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}button,[role=button]{cursor:pointer}:disabled{cursor:default}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}ol,ul,menu{list-style:none;margin:0;padding:0}:root{--font-family: "Open Sans", sans-serif;--font-size: 16px;--scale-sm: 0.85rem;--scale-base: 1rem;--scale-lg: 1.2rem;--scale-xl: 1.4rem;--scale-2xl: 1.6rem;--scale-3xl: 1.8rem;--box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);--spacing-xs: 2px;--spacing-sm: 6px;--spacing: 10px;--border-width: 0.15rem;--focus-border-width: 0.15rem;--border-radius: 0.3rem}@media screen and (min-width: 768px){:root{--font-size: 14px}}.panel>article::-webkit-scrollbar,body::-webkit-scrollbar{width:var(--spacing-sm);background:transparent}.panel>article::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb{min-width:1rem;border-style:solid;border-color:transparent;border-width:var(--spacing-sm);background:var(--color700);box-sizing:border-box;background-clip:border-box}html{font-family:var(--font-family);font-weight:400;font-size:var(--font-size)}body{font-size:1rem;padding:var(--spacing);background:var(--bg-body);color:var(--fg-body)}h1,h2,h3,h4,.panel>header{font-weight:300;text-shadow:0 0 4px oklch(var(--400)/0.5);color:var(--fg-body)}h1{font-size:var(--scale-3xl)}h2{font-size:var(--scale-2xl)}h3{font-size:var(--scale-xl)}h4{font-size:var(--scale-lg)}.command{background-color:var(--color800);box-shadow:var(--box-shadow);display:grid;align-items:end;justify-items:end;text-align:end;border-style:solid;border-color:transparent;border-width:0 0 0 var(--focus-border-width);padding:var(--spacing-xs) var(--spacing-sm);min-height:3rem;min-width:3rem;border-radius:var(--border-radius);overflow:hidden;outline:none;color:var(--color100);font-family:inherit;font-size:var(--scale-base);cursor:pointer;user-select:none;vertical-align:middle;transition:border-color .15s ease-in-out,background-color .15s ease-in-out}.command.flash{animation:flash-background 1s ease-in-out infinite}.command:disabled{opacity:.7;cursor:default;pointer-events:none;background:#6d6d6d;color:#ededed}.command.outline{background-color:transparent;border-color:var(--color700);border-width:var(--border-width);color:var(--fg-body)}.command.outline.flash{animation-name:flash-border}.command.outline:disabled{background:transparent;border-color:#6d6d6d;color:#6d6d6d}.command.outline:focus{border-color:var(--color500)}.command.outline:active{color:var(--color100)}.command:focus{border-left-color:var(--color500)}.command:active{border-color:var(--color500);background-color:var(--color500);animation-play-state:paused}.compound-commands{display:inline-flex;gap:var(--spacing-sm)}.compound-commands>.spacer{background-color:var(--color800);box-shadow:var(--box-shadow);min-width:1rem;min-height:1rem}.compound-commands>.spacer.outline{background-color:transparent;border:var(--border-width) solid var(--color700)}.compound-commands>.text{font-size:var(--scale-3xl);line-height:var(--scale-3xl);align-self:center;padding:var(--spacing-xs)}.compound-commands>.command:first-child,.compound-commands .spacer:first-child{border-radius:var(--border-radius) 0 0 var(--border-radius)}.compound-commands>.command:not(:first-child):not(:last-child),.compound-commands .spacer:not(:first-child):not(:last-child){border-radius:0}.compound-commands>.command:last-child,.compound-commands .spacer:last-child{border-radius:0 var(--border-radius) var(--border-radius) 0}.compound-commands.vertical{flex-direction:column}.compound-commands.vertical>.text{justify-self:center}.compound-commands.vertical>.command:first-child,.compound-commands.vertical .spacer:first-child{border-radius:var(--border-radius) var(--border-radius) 0 0}.compound-commands.vertical>.command:last-child,.compound-commands.vertical .spacer:last-child{border-radius:0 0 var(--border-radius) var(--border-radius)}@keyframes flash-background{50%{background-color:var(--color600)}}@keyframes flash-border{50%{border-color:var(--color500)}}.input{border-radius:var(--border-radius);box-shadow:var(--box-shadow);outline:none;border:var(--border-width) solid var(--color600);color:var(--fg-body);font-family:inherit;background-color:transparent;transition:border-color .15s ease-in-out;padding:var(--spacing-sm);font-size:var(--scale-base)}.input:focus{border:var(--border-width) solid var(--color500)}.input:disabled{opacity:.4;filter:saturate(0.6);cursor:default;pointer-events:none}.panel>footer::after,.panel>footer::before,.panel>header::after,.panel>header::before{content:"";border-style:solid;border-color:var(--color700);position:absolute;height:1rem;width:1rem;z-index:2}.panel{background:var(--panel-background);box-shadow:var(--box-shadow);border-radius:var(--border-radius);display:grid;grid-template-rows:auto 1fr auto;overflow:auto}.panel>header{position:relative;font-size:var(--scale-xl);padding:var(--spacing-sm) var(--spacing)}.panel>header::before{border-width:var(--border-width) 0 0 var(--border-width);border-radius:var(--border-radius) 0 0 0;left:0;top:0}.panel>header::after{border-width:var(--border-width) var(--border-width) 0 0;border-radius:0 var(--border-radius) 0 0;right:0;top:0}.panel>article{z-index:1;padding:var(--spacing);overflow:auto}.panel>footer{position:relative;padding:var(--spacing-sm) var(--spacing);font-size:var(--scale-sm);text-align:right}.panel>footer::before{border-width:0 0 var(--border-width) var(--border-width);border-radius:0 0 0 var(--border-radius);left:0;bottom:0}.panel>footer::after{border-width:0 var(--border-width) var(--border-width) 0;border-radius:0 0 var(--border-radius) 0;right:0;bottom:0}.spinner{display:inline-grid;justify-items:center;align-items:center;width:1em;height:1em;position:relative;box-sizing:border-box;animation:6s .5s rotate ease-in-out alternate infinite}.spinner::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-style:solid;border-width:.05em;border-radius:50%;border-color:var(--color700) transparent;animation:4s .5s inset1 ease-in-out infinite;box-shadow:0px 12px 10px -12px rgba(0,0,0,.4),0px -12px 10px -12px rgba(0,0,0,.4)}.spinner::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-style:solid;border-width:.05em;border-radius:50%;border-color:transparent var(--color500);animation:4s .5s inset2 ease-in-out infinite;box-shadow:12px 0px 10px -12px rgba(0,0,0,.4),-12px 0px 10px -12px rgba(0,0,0,.4)}@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes inset1{0%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}12.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(0)}37.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(180deg)}50%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}100%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}}@keyframes inset2{0%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}50%{top:0;left:0;right:0;bottom:0;transform:rotate(0)}62.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(0)}87.5%{top:.2em;left:.2em;right:.2em;bottom:.2em;transform:rotate(180deg)}100%{top:0;left:0;right:0;bottom:0;transform:rotate(180deg)}}
package/css/ada.green.css ADDED
@@ -0,0 +1 @@
1
+
package/index.html CHANGED
@@ -1,5 +1,5 @@
1
1
  <!DOCTYPE html>
2
- <html>
2
+ <html class="height-100">
3
3
  <head>
4
4
  <meta charset="UTF-8" />
5
5
  <title>Ada</title>
@@ -17,10 +17,45 @@
17
17
  rel="stylesheet"
18
18
  />
19
19
  <style>
20
+ html {
21
+ scroll-padding-top: 1rem;
22
+ }
23
+
24
+ html.height-100 {
25
+ height: 100%;
26
+ min-height: 100%;
27
+ }
28
+
29
+ html.height-100 > body {
30
+ height: 100%;
31
+ min-height: 100%;
32
+ }
33
+
34
+ html:not(.height-100) > body {
35
+ align-items: start;
36
+ }
37
+
38
+ .typography {
39
+ display: grid;
40
+ grid-template-columns: repeat(2, auto) 1fr;
41
+ gap: var(--spacing);
42
+ justify-content: start;
43
+ }
44
+ .typography > p {
45
+ grid-column: span 3;
46
+ display: grid;
47
+ grid-template-columns: subgrid;
48
+ gap: var(--spacing);
49
+ }
50
+
20
51
  .color-shades {
21
52
  display: grid;
22
53
  }
23
54
 
55
+ .color-shades > h3 {
56
+ margin-bottom: var(--spacing-sm);
57
+ }
58
+
24
59
  .color-shades > div {
25
60
  display: inline-grid;
26
61
  align-items: center;
@@ -28,49 +63,67 @@
28
63
  width: 8rem;
29
64
  height: 3rem;
30
65
  box-sizing: border-box;
31
- color: var(--fg100);
66
+ color: var(--color100);
67
+ border-bottom: 1px solid transparent;
32
68
  }
33
69
 
34
- .color-shades > div.bg900 {
35
- background: var(--bg900);
70
+ .color-shades > div:last-of-type {
71
+ border-bottom: none;
36
72
  }
37
73
 
38
- .color-shades > div.bg800 {
39
- background: var(--bg800);
74
+ .color-shades.usage > div {
75
+ border-color: var(--color600);
76
+ width: auto;
77
+ padding: 0 1rem;
40
78
  }
41
79
 
42
- .color-shades > div.bg700 {
43
- background: var(--bg700);
80
+ .color-shades > div.color950 {
81
+ background: var(--color950);
44
82
  }
45
83
 
46
- .color-shades > div.bg600 {
47
- background: var(--bg600);
84
+ .color-shades > div.color800 {
85
+ background: var(--color800);
48
86
  }
49
87
 
50
- .color-shades > div.fg200 {
51
- background: var(--fg200);
52
- color: var(--bg900);
88
+ .color-shades > div.color700 {
89
+ background: var(--color700);
53
90
  }
54
91
 
55
- .color-shades > div.fg100 {
56
- background: var(--fg100);
57
- color: var(--bg900);
92
+ .color-shades > div.color600 {
93
+ background: var(--color600);
58
94
  }
59
95
 
60
- .typography {
61
- display: grid;
62
- grid-template-columns: auto auto;
63
- gap: var(--spacing);
64
- justify-content: start;
96
+ .color-shades > div.color500 {
97
+ background: var(--color500);
65
98
  }
66
- .typography > p {
67
- grid-column: span 2;
99
+
100
+ .color-shades > div.color100 {
101
+ background: var(--color100);
102
+ color: var(--color800);
103
+ }
104
+
105
+ .spacing {
68
106
  display: grid;
69
- grid-template-columns: subgrid;
107
+ grid-template-columns: repeat(2, auto) 1fr;
70
108
  gap: var(--spacing);
109
+ align-items: center;
110
+ }
111
+
112
+ .spacing-box {
113
+ display: inline-block;
114
+ background: var(--color500);
115
+ width: var(--spacing);
116
+ height: var(--spacing);
71
117
  }
72
- .typography > p > code {
73
- color: var(--fg200);
118
+
119
+ .spacing-box.xs {
120
+ width: var(--spacing-xs);
121
+ height: var(--spacing-xs);
122
+ }
123
+
124
+ .spacing-box.sm {
125
+ width: var(--spacing-sm);
126
+ height: var(--spacing-sm);
74
127
  }
75
128
  </style>
76
129
  </head>
@@ -78,21 +131,22 @@
78
131
  <body
79
132
  style="
80
133
  display: grid;
81
- grid-template-columns: auto 1fr;
134
+ grid-template-columns: min(12vw) 1fr;
82
135
  grid-template-rows: 1fr auto;
83
136
  column-gap: var(--spacing);
84
137
  "
85
138
  >
86
139
  <div
87
140
  class="compound-commands vertical"
88
- style="display: flex; flex-direction: column"
141
+ style="position: sticky; top: var(--spacing)"
89
142
  >
90
143
  <div class="spacer"></div>
91
- <a href="#typography" class="command primary-alt">Typography</a>
92
- <a href="#colors" class="command primary-alt">Colors</a>
93
- <a href="#spacing" class="command primary-alt">Spacing</a>
94
- <a href="#commands" class="command">Commands</a>
95
- <a href="#panels" class="command">Panels</a>
144
+ <a href="#typography" class="command shade1">Typography</a>
145
+ <a href="#spacing" class="command shade1">Spacing</a>
146
+ <a href="#colors" class="command shade1">Colors</a>
147
+ <a href="#page-layout" class="command shade1">Page Layout</a>
148
+ <a href="#command" class="command shade3">Command</a>
149
+ <a href="#panel" class="command shade2">Panel</a>
96
150
  <a href="#input" class="command">Input</a>
97
151
  <a href="#spinner" class="command">Spinner</a>
98
152
  <div style="flex: 1" class="spacer"></div>
@@ -101,96 +155,140 @@
101
155
  <div class="panel">
102
156
  <header><h1>Ada UI Design Guide</h1></header>
103
157
  <article
104
- style="display: grid; grid-auto-rows: max-content; gap: var(--spacing)"
158
+ style="
159
+ display: grid;
160
+ grid-auto-rows: max-content;
161
+ gap: var(--spacing);
162
+ scroll-padding-top: 1rem;
163
+ "
105
164
  >
106
165
  <div class="panel">
107
166
  <header><h2 id="typography">Typography</h2></header>
108
167
  <article class="typography">
109
168
  <p style="font-size: var(--scale-3xl)">
110
169
  <code>scale-3xl</code>
170
+ <span>1.8rem</span>
111
171
  <span>Headline 1, Text in Compound Commands</span>
112
172
  </p>
113
173
  <p style="font-size: var(--scale-2xl)">
114
174
  <code>scale-2xl</code>
175
+ <span>1.6rem</span>
115
176
  <span>Headline 2</span>
116
177
  </p>
117
178
  <p style="font-size: var(--scale-xl)">
118
179
  <code>scale-xl</code>
180
+ <span>1.4rem</span>
119
181
  <span>Headline 3</span>
120
182
  </p>
121
183
  <p style="font-size: var(--scale-lg)">
122
184
  <code>scale-lg</code>
185
+ <span>1.2rem</span>
123
186
  <span>Headline 4</span>
124
187
  </p>
125
188
  <p style="font-size: var(--scale-base)">
126
189
  <code>scale-base</code>
190
+ <span>1rem</span>
127
191
  <span>Normal Text, Command Label</span>
128
192
  </p>
129
193
  <p style="font-size: var(--scale-sm)">
130
194
  <code>scale-sm</code>
195
+ <span>0.85rem</span>
131
196
  <span>Small Text, Panel Footer</span>
132
197
  </p>
133
198
  </article>
134
199
  <footer></footer>
135
200
  </div>
201
+ <div class="panel">
202
+ <header><h2 id="spacing">Spacing</h2></header>
203
+ <article class="spacing">
204
+ <code>--spacing-xs</code>
205
+ <span>2px</span>
206
+ <div class="spacing-box xs shade3"></div>
207
+ <code>--spacing-sm</code>
208
+ <span>6px</span>
209
+ <div class="spacing-box sm shade3"></div>
210
+ <code>--spacing</code>
211
+ <span>10px</span>
212
+ <div class="spacing-box shade3"></div>
213
+ </article>
214
+ <footer></footer>
215
+ </div>
136
216
  <div class="panel">
137
217
  <header><h2 id="colors">Colors</h2></header>
138
- <article style="display: flex; gap: 3rem; flex-wrap: wrap">
218
+ <article style="display: flex; gap: var(--spacing); flex-wrap: wrap">
219
+ <div class="color-shades usage">
220
+ <h3>&nbsp;</h3>
221
+ <div>Text Color</div>
222
+ <div>Active/Focus State</div>
223
+ <div>Border/Flash Color</div>
224
+ <div>Corner Color</div>
225
+ <div>Command Color</div>
226
+ <div>Background</div>
227
+ </div>
139
228
  <div class="color-shades">
140
229
  <h3>Primary</h3>
141
- <div class="fg100">FG 100</div>
142
- <div class="fg200">FG 200</div>
143
- <div class="bg600">BG 600</div>
144
- <div class="bg700">BG 700</div>
145
- <div class="bg800">BG 800</div>
146
- <div class="bg900">BG 900</div>
230
+ <div class="color100">100</div>
231
+ <div class="color500">500</div>
232
+ <div class="color600">600</div>
233
+ <div class="color700">700</div>
234
+ <div class="color800">800</div>
235
+ <div class="color950">950</div>
147
236
  </div>
148
237
  <div class="color-shades">
149
- <h3>Primary Alt</h3>
150
- <div class="fg100 primary-alt">FG 100</div>
151
- <div class="fg200 primary-alt">FG 200</div>
152
- <div class="bg600 primary-alt">BG 600</div>
153
- <div class="bg700 primary-alt">BG 700</div>
154
- <div class="bg800 primary-alt">BG 800</div>
155
- <div class="bg900 primary-alt">BG 900</div>
238
+ <h3>Shade 1</h3>
239
+ <div class="color100 shade1">100</div>
240
+ <div class="color500 shade1">500</div>
241
+ <div class="color600 shade1">600</div>
242
+ <div class="color700 shade1">700</div>
243
+ <div class="color800 shade1">800</div>
244
+ <div class="color950 shade1">950</div>
156
245
  </div>
157
246
  <div class="color-shades">
158
- <h3>Accent</h3>
159
- <div class="fg100 accent">FG 100</div>
160
- <div class="fg200 accent">FG 200</div>
161
- <div class="bg600 accent">BG 600</div>
162
- <div class="bg700 accent">BG 700</div>
163
- <div class="bg800 accent">BG 800</div>
164
- <div class="bg900 accent">BG 900</div>
247
+ <h3>Shade 2</h3>
248
+ <div class="color100 shade2">100</div>
249
+ <div class="color500 shade2">500</div>
250
+ <div class="color600 shade2">600</div>
251
+ <div class="color700 shade2">700</div>
252
+ <div class="color800 shade2">800</div>
253
+ <div class="color950 shade2">950</div>
165
254
  </div>
166
255
  <div class="color-shades">
167
- <h3>Accent Alt</h3>
168
- <div class="fg100 accent-alt">FG 100</div>
169
- <div class="fg200 accent-alt">FG 200</div>
170
- <div class="bg600 accent-alt">BG 600</div>
171
- <div class="bg700 accent-alt">BG 700</div>
172
- <div class="bg800 accent-alt">BG 800</div>
173
- <div class="bg900 accent-alt">BG 900</div>
256
+ <h3>Shade 3</h3>
257
+ <div class="color100 shade3">100</div>
258
+ <div class="color500 shade3">500</div>
259
+ <div class="color600 shade3">600</div>
260
+ <div class="color700 shade3">700</div>
261
+ <div class="color800 shade3">800</div>
262
+ <div class="color950 shade3">950</div>
174
263
  </div>
175
264
  <div class="color-shades">
176
265
  <h3>Warn</h3>
177
- <div class="fg100 warn">FG 100</div>
178
- <div class="fg200 warn">FG 200</div>
179
- <div class="bg600 warn">BG 600</div>
180
- <div class="bg700 warn">BG 700</div>
181
- <div class="bg800 warn">BG 800</div>
182
- <div class="bg900 warn">BG 900</div>
266
+ <div class="color100 warn">100</div>
267
+ <div class="color500 warn">500</div>
268
+ <div class="color600 warn">600</div>
269
+ <div class="color700 warn">700</div>
270
+ <div class="color800 warn">800</div>
271
+ <div class="color950 warn">950</div>
183
272
  </div>
184
273
  </article>
185
274
  <footer></footer>
186
275
  </div>
187
276
  <div class="panel">
188
- <header><h2 id="spacing">Spacing</h2></header>
189
- <article>TODO</article>
277
+ <header><h2 id="page-layout">Page Layout</h2></header>
278
+ <article>
279
+ <p>
280
+ Choose yourself whether the body should scroll or the body should
281
+ have a fixed width of 100%. For the latter, you should use one or
282
+ more top-most panels which then will scroll their content. You can
283
+ see both options and how to implement them by toggling the class
284
+ <code>height-100</code> on the <code>html</code> element of this
285
+ demo page.
286
+ </p>
287
+ </article>
190
288
  <footer></footer>
191
289
  </div>
192
290
  <div class="panel">
193
- <header><h2 id="commands">Commands</h2></header>
291
+ <header><h2 id="command">Command</h2></header>
194
292
  <article
195
293
  style="
196
294
  display: inline-grid;
@@ -201,26 +299,26 @@
201
299
  >
202
300
  <h3 style="grid-column: span 5">Default</h3>
203
301
  <button class="command">Command</button>
204
- <button class="command primary-alt">Command</button>
205
- <button class="command accent-alt">Command</button>
206
- <button class="command accent">Command</button>
302
+ <button class="command shade1">Command</button>
303
+ <button class="command shade2">Command</button>
304
+ <button class="command shade3">Command</button>
207
305
  <button class="command warn">Command</button>
208
306
  <h3 style="grid-column: span 5">Outline</h3>
209
307
  <button class="command outline">Command</button>
210
- <button class="command outline primary-alt">Command</button>
211
- <button class="command outline accent-alt">Command</button>
212
- <button class="command outline accent">Command</button>
308
+ <button class="command outline shade1">Command</button>
309
+ <button class="command outline shade2">Command</button>
310
+ <button class="command outline shade3">Command</button>
213
311
  <button class="command outline warn">Command</button>
214
312
  <h3 style="grid-column: span 5">Flashing</h3>
215
313
  <button class="command flash">Command</button>
216
- <button class="command flash primary-alt">Command</button>
217
- <button class="command flash accent-alt">Command</button>
218
- <button class="command flash accent">Command</button>
314
+ <button class="command flash shade1">Command</button>
315
+ <button class="command flash shade2">Command</button>
316
+ <button class="command flash shade3">Command</button>
219
317
  <button class="command flash warn">Command</button>
220
318
  <button class="command flash outline">Command</button>
221
- <button class="command flash outline primary-alt">Command</button>
222
- <button class="command flash outline accent-alt">Command</button>
223
- <button class="command flash outline accent">Command</button>
319
+ <button class="command flash outline shade1">Command</button>
320
+ <button class="command flash outline shade2">Command</button>
321
+ <button class="command flash outline shade3">Command</button>
224
322
  <button class="command flash outline warn">Command</button>
225
323
  <h3 style="grid-column: span 5">Disabled</h3>
226
324
  <button disabled class="command">Command</button>
@@ -282,7 +380,7 @@
282
380
  <footer></footer>
283
381
  </div>
284
382
  <div class="panel">
285
- <header><h2 id="panels">Panels</h2></header>
383
+ <header><h2 id="panel">Panel</h2></header>
286
384
  <article style="display: grid; gap: var(--spacing)">
287
385
  <h3>Without Header and Footer</h3>
288
386
  <div class="panel">
@@ -297,7 +395,7 @@
297
395
  <footer>Footer</footer>
298
396
  </div>
299
397
  <h3>With another color variant</h3>
300
- <div class="panel accent">
398
+ <div class="panel shade3">
301
399
  <header>Header</header>
302
400
  <article>Content</article>
303
401
  <footer>Footer</footer>
@@ -343,21 +441,21 @@
343
441
  <div>
344
442
  <h3>80px</h3>
345
443
  <div class="spinner" style="font-size: 80px"></div>
346
- <div class="spinner primary-alt" style="font-size: 80px"></div>
347
- <div class="spinner accent-alt" style="font-size: 80px"></div>
348
- <div class="spinner accent" style="font-size: 80px"></div>
444
+ <div class="spinner shade1" style="font-size: 80px"></div>
445
+ <div class="spinner shade2" style="font-size: 80px"></div>
446
+ <div class="spinner shade3" style="font-size: 80px"></div>
349
447
  <div class="spinner warn" style="font-size: 80px"></div>
350
448
  <h3>32px</h3>
351
449
  <div class="spinner" style="font-size: 32px"></div>
352
- <div class="spinner primary-alt" style="font-size: 32px"></div>
353
- <div class="spinner accent-alt" style="font-size: 32px"></div>
354
- <div class="spinner accent" style="font-size: 32px"></div>
450
+ <div class="spinner shade1" style="font-size: 32px"></div>
451
+ <div class="spinner shade2" style="font-size: 32px"></div>
452
+ <div class="spinner shade3" style="font-size: 32px"></div>
355
453
  <div class="spinner warn" style="font-size: 32px"></div>
356
454
  <h3>16px</h3>
357
455
  <div class="spinner" style="font-size: 16px"></div>
358
- <div class="spinner primary-alt" style="font-size: 16px"></div>
359
- <div class="spinner accent-alt" style="font-size: 16px"></div>
360
- <div class="spinner accent" style="font-size: 16px"></div>
456
+ <div class="spinner shade1" style="font-size: 16px"></div>
457
+ <div class="spinner shade2" style="font-size: 16px"></div>
458
+ <div class="spinner shade3" style="font-size: 16px"></div>
361
459
  <div class="spinner warn" style="font-size: 16px"></div>
362
460
  </div>
363
461
  </article>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ada-ui",
3
- "version": "0.0.0-beta-v5-20240723181534",
3
+ "version": "0.0.0-beta-v5-20240727181205",
4
4
  "scripts": {
5
5
  "dev": "concurrently -n scss,serve 'sass scss:css --watch' 'alive-server .'",
6
6
  "build": "rm -rf css && sass scss:css -s compressed --no-source-map",
package/scss/_ada.theme-base.scss CHANGED
@@ -1,11 +1,14 @@
1
1
  %colourShades {
2
- --fg100: lch(var(--100));
3
- --fg200: lch(var(--200));
2
+ --color100: oklch(0.91 0.05 var(--hue));
4
3
 
5
- --bg600: lch(var(--600));
6
- --bg700: lch(var(--700));
7
- --bg800: lch(var(--800));
8
- --bg900: lch(var(--900));
4
+ --color500: oklch(0.46 0.13 var(--hue));
5
+ --color600: oklch(0.41 0.11 var(--hue));
6
+ --color700: oklch(0.36 0.09 var(--hue));
7
+ --color800: oklch(0.31 0.07 var(--hue));
9
8
 
10
- --panel-background: lch(var(--800) / 0.1);
9
+ --color950: oklch(0.18 0.03 var(--hue));
10
+
11
+ --bg-body: var(--bg-body-override, var(--color950));
12
+ --fg-body: var(--fg-body-override, var(--color100));
13
+ --panel-background: oklch(var(--500) / 0.1);
11
14
  }
package/scss/_command.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  .command {
2
- background-color: var(--bg900);
2
+ background-color: var(--color800);
3
3
  box-shadow: var(--box-shadow);
4
4
  display: grid;
5
5
  align-items: end;
@@ -14,7 +14,7 @@
14
14
  border-radius: var(--border-radius);
15
15
  overflow: hidden;
16
16
  outline: none;
17
- color: var(--fg100);
17
+ color: var(--color100);
18
18
  font-family: inherit;
19
19
  font-size: var(--scale-base);
20
20
  cursor: pointer;
@@ -28,7 +28,6 @@
28
28
 
29
29
  &:disabled {
30
30
  opacity: 0.7;
31
- //filter: saturate(0.2);
32
31
  cursor: default;
33
32
  pointer-events: none;
34
33
  background: #6d6d6d;
@@ -37,8 +36,9 @@
37
36
 
38
37
  &.outline {
39
38
  background-color: transparent;
40
- border-color: var(--bg800);
39
+ border-color: var(--color700);
41
40
  border-width: var(--border-width);
41
+ color: var(--fg-body);
42
42
 
43
43
  &.flash {
44
44
  animation-name: flash-border;
@@ -47,34 +47,42 @@
47
47
  &:disabled {
48
48
  background: transparent;
49
49
  border-color: #6d6d6d;
50
+ color: #6d6d6d;
51
+ }
52
+
53
+ &:focus {
54
+ border-color: var(--color500);
55
+ }
56
+
57
+ &:active {
58
+ color: var(--color100);
50
59
  }
51
60
  }
52
61
 
53
62
  &:focus {
54
- border-left-color: var(--bg600);
63
+ border-left-color: var(--color500);
55
64
  }
56
65
 
57
66
  &:active {
58
- border-color: var(--bg600);
59
- background-color: var(--bg600);
67
+ border-color: var(--color500);
68
+ background-color: var(--color500);
60
69
  animation-play-state: paused;
61
70
  }
62
71
  }
63
72
 
64
73
  .compound-commands {
65
- display: inline-grid;
66
- grid-auto-flow: column;
74
+ display: inline-flex;
67
75
  gap: var(--spacing-sm);
68
76
 
69
77
  > .spacer {
70
- background-color: var(--bg900);
78
+ background-color: var(--color800);
71
79
  box-shadow: var(--box-shadow);
72
80
  min-width: 1rem;
73
81
  min-height: 1rem;
74
82
 
75
83
  &.outline {
76
84
  background-color: transparent;
77
- border: var(--border-width) solid var(--bg800);
85
+ border: var(--border-width) solid var(--color700);
78
86
  }
79
87
  }
80
88
 
@@ -101,7 +109,7 @@
101
109
  }
102
110
 
103
111
  &.vertical {
104
- grid-auto-flow: row;
112
+ flex-direction: column;
105
113
 
106
114
  > .text {
107
115
  justify-self: center;
@@ -122,12 +130,12 @@
122
130
 
123
131
  @keyframes flash-background {
124
132
  50% {
125
- background-color: var(--bg700);
133
+ background-color: var(--color600);
126
134
  }
127
135
  }
128
136
 
129
137
  @keyframes flash-border {
130
138
  50% {
131
- border-color: var(--bg600);
139
+ border-color: var(--color500);
132
140
  }
133
141
  }
package/scss/_global.scss CHANGED
@@ -20,20 +20,33 @@
20
20
  }
21
21
  }
22
22
 
23
+ %scrollbar {
24
+ &::-webkit-scrollbar {
25
+ width: var(--spacing-sm);
26
+ background: transparent;
27
+ }
28
+ &::-webkit-scrollbar-thumb {
29
+ min-width: 1rem;
30
+ border-style: solid;
31
+ border-color: transparent;
32
+ border-width: var(--spacing-sm);
33
+ background: var(--color700);
34
+ box-sizing: border-box;
35
+ background-clip: border-box;
36
+ }
37
+ }
38
+
23
39
  html {
24
40
  font-family: var(--font-family);
25
41
  font-weight: 400;
26
- }
27
-
28
- html,
29
- body {
30
42
  font-size: var(--font-size);
31
- height: 100%;
32
- min-height: 100%;
33
43
  }
34
44
 
35
45
  body {
46
+ font-size: 1rem;
36
47
  padding: var(--spacing);
37
48
  background: var(--bg-body);
38
- color: var(--fg100);
49
+ color: var(--fg-body);
50
+
51
+ @extend %scrollbar;
39
52
  }
package/scss/_input.scss CHANGED
@@ -2,8 +2,8 @@
2
2
  border-radius: var(--border-radius);
3
3
  box-shadow: var(--box-shadow);
4
4
  outline: none;
5
- border: var(--border-width) solid var(--bg700);
6
- color: var(--fg100);
5
+ border: var(--border-width) solid var(--color600);
6
+ color: var(--fg-body);
7
7
  font-family: inherit;
8
8
  background-color: transparent;
9
9
  transition: border-color 0.15s ease-in-out;
@@ -11,7 +11,7 @@
11
11
  font-size: var(--scale-base);
12
12
 
13
13
  &:focus {
14
- border: var(--border-width) solid var(--bg600);
14
+ border: var(--border-width) solid var(--color500);
15
15
  }
16
16
  &:disabled {
17
17
  opacity: 0.4;
package/scss/_panel.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  %corner-base {
2
2
  content: "";
3
3
  border-style: solid;
4
- border-color: var(--bg800);
4
+ border-color: var(--color700);
5
5
  position: absolute;
6
6
  height: 1rem;
7
7
  width: 1rem;
@@ -41,27 +41,14 @@
41
41
 
42
42
  > article {
43
43
  z-index: 1;
44
- padding: 0 var(--spacing);
44
+ padding: var(--spacing);
45
45
  overflow: auto;
46
46
 
47
- &::-webkit-scrollbar {
48
- width: var(--border-width);
49
- background: transparent;
50
- }
51
- &::-webkit-scrollbar-thumb {
52
- min-width: 1rem;
53
- border-style: solid;
54
- border-color: transparent;
55
- border-width: var(--border-width);
56
- background: var(--bg800);
57
- box-sizing: border-box;
58
- background-clip: border-box;
59
- }
47
+ @extend %scrollbar;
60
48
  }
61
49
  > footer {
62
50
  position: relative;
63
51
 
64
- color: var(--fg200);
65
52
  padding: var(--spacing-sm) var(--spacing);
66
53
  font-size: var(--scale-sm);
67
54
  text-align: right;
package/scss/_spinner.scss CHANGED
@@ -18,9 +18,10 @@
18
18
  border-style: solid;
19
19
  border-width: 0.05em;
20
20
  border-radius: 50%;
21
- border-color: var(--bg800) transparent;
21
+ border-color: var(--color700) transparent;
22
22
  animation: 4s 0.5s inset1 ease-in-out infinite;
23
- box-shadow: 0px 12px 10px -12px #000a, 0px -12px 10px -12px #000a;
23
+ box-shadow: 0px 12px 10px -12px rgba(0, 0, 0, 0.4),
24
+ 0px -12px 10px -12px rgba(0, 0, 0, 0.4);
24
25
  }
25
26
 
26
27
  &::after {
@@ -33,9 +34,10 @@
33
34
  border-style: solid;
34
35
  border-width: 0.05em;
35
36
  border-radius: 50%;
36
- border-color: transparent var(--bg600);
37
+ border-color: transparent var(--color500);
37
38
  animation: 4s 0.5s inset2 ease-in-out infinite;
38
- box-shadow: 12px 0px 10px -12px #000a, -12px 0px 10px -12px #000a;
39
+ box-shadow: 12px 0px 10px -12px rgba(0, 0, 0, 0.4),
40
+ -12px 0px 10px -12px rgba(0, 0, 0, 0.4);
39
41
  }
40
42
  }
41
43
 
package/scss/_typography.scss CHANGED
@@ -4,8 +4,8 @@ h3,
4
4
  h4,
5
5
  %header {
6
6
  font-weight: 300;
7
- text-shadow: 0 0 4px var(--bg700);
8
- color: var(--fg100);
7
+ text-shadow: 0 0 4px oklch(var(--400) / 0.5);
8
+ color: var(--fg-body);
9
9
  }
10
10
 
11
11
  h1 {
package/scss/ada.blue-light.scss ADDED
@@ -0,0 +1,41 @@
1
+ @import "ada.theme-base";
2
+
3
+ :root {
4
+ //Defaults to primary color
5
+ @extend .primary;
6
+ }
7
+
8
+ %light-fg {
9
+ --bg-body-override: var(--color100);
10
+ --fg-body-override: var(--color800);
11
+ }
12
+
13
+ .primary {
14
+ @extend %colourShades;
15
+ @extend %light-fg;
16
+ --hue: 246;
17
+ }
18
+
19
+ .shade1 {
20
+ @extend %colourShades;
21
+ @extend %light-fg;
22
+ --hue: 225;
23
+ }
24
+
25
+ .shade3 {
26
+ @extend %colourShades;
27
+ @extend %light-fg;
28
+ --hue: 165;
29
+ }
30
+
31
+ .shade2 {
32
+ @extend %colourShades;
33
+ @extend %light-fg;
34
+ --hue: 190;
35
+ }
36
+
37
+ .warn {
38
+ @extend %colourShades;
39
+ @extend %light-fg;
40
+ --hue: 29;
41
+ }
package/scss/ada.blue.scss CHANGED
@@ -1,68 +1,31 @@
1
1
  @import "ada.theme-base";
2
2
 
3
3
  :root {
4
- --bg-body: lch(5 8 260);
5
-
6
4
  //Defaults to primary color
7
5
  @extend .primary;
8
6
  }
9
7
 
10
8
  .primary {
11
9
  @extend %colourShades;
12
-
13
- --100: 90 17 260;
14
- --200: 70 17 260;
15
-
16
- --600: 36 36 260;
17
- --700: 29 30 260;
18
- --800: 26 29 260;
19
- --900: 19 23 260;
10
+ --hue: 246;
20
11
  }
21
12
 
22
- .primary-alt {
13
+ .shade1 {
23
14
  @extend %colourShades;
24
-
25
- --100: 90 17 246;
26
- --200: 70 17 246;
27
-
28
- --600: 51 40 246;
29
- --700: 44 34 246;
30
- --800: 41 33 246;
31
- --900: 34 27 246;
15
+ --hue: 225;
32
16
  }
33
17
 
34
- .accent {
18
+ .shade3 {
35
19
  @extend %colourShades;
36
-
37
- --100: 90 17 152;
38
- --200: 70 17 152;
39
-
40
- --600: 40 37 152;
41
- --700: 33 31 152;
42
- --800: 30 30 152;
43
- --900: 23 24 152;
20
+ --hue: 165;
44
21
  }
45
22
 
46
- .accent-alt {
23
+ .shade2 {
47
24
  @extend %colourShades;
48
-
49
- --100: 90 17 206;
50
- --200: 70 17 206;
51
-
52
- --600: 52 30 206;
53
- --700: 45 24 206;
54
- --800: 42 23 206;
55
- --900: 35 17 206;
25
+ --hue: 190;
56
26
  }
57
27
 
58
28
  .warn {
59
29
  @extend %colourShades;
60
-
61
- --100: 90 17 40;
62
- --200: 70 17 40;
63
-
64
- --600: 40 75 40;
65
- --700: 33 69 40;
66
- --800: 30 68 40;
67
- --900: 23 62 40;
30
+ --hue: 29;
68
31
  }
package/scss/ada.green.scss ADDED
@@ -0,0 +1 @@
1
+ //wip