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/scss/_button.scss CHANGED
@@ -1,52 +1,92 @@
1
- @mixin button {
2
- overflow: hidden;
3
- outline: none;
4
- color: var(--fg);
5
- font-family: inherit;
6
- cursor: pointer;
7
- user-select: none;
8
- vertical-align: middle;
9
- transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
10
-
11
- &:disabled {
12
- opacity: 0.4;
13
- filter: saturate(0.6);
14
- cursor: default;
15
- pointer-events: none;
16
- }
17
- }
1
+ //Moved to _command.scss
2
+ //@mixin button {
3
+ //overflow: hidden;
4
+ //outline: none;
5
+ //color: var(--fg100);
6
+ //font-family: inherit;
7
+ //cursor: pointer;
8
+ //user-select: none;
9
+ //vertical-align: middle;
10
+ //transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
11
+
12
+ //&:disabled {
13
+ //opacity: 0.4;
14
+ //filter: saturate(0.6);
15
+ //cursor: default;
16
+ //pointer-events: none;
17
+ //}
18
+ //}
18
19
 
19
20
  .button {
20
21
  @include button;
21
22
  white-space: nowrap;
22
23
  text-overflow: ellipsis;
23
24
  border-radius: 0.3rem;
24
- box-shadow: $box-shadow;
25
- border: 1px solid var(--light-alpha40);
25
+ box-shadow: var(--box-shadow);
26
+ border: var(--border-width-sm) solid var(--bg700);
26
27
  background-color: transparent;
27
28
  min-height: min-content;
28
- min-width: 8rem;
29
- padding: 0.8rem 1.6rem;
30
- margin: 0.8rem;
29
+ padding: 0.6rem 1rem;
31
30
  font-size: 1.1rem;
32
31
 
33
- &.small {
34
- min-width: 0;
35
- padding: 0.8rem;
36
- }
37
32
  &.fill {
38
- background-color: var(--default);
33
+ background-color: var(--bg800);
39
34
  }
40
35
  &:focus {
41
- border: 1px solid var(--light-alpha70);
36
+ border: var(--border-width-sm) solid var(--bg600);
42
37
  }
43
38
  &:hover {
44
39
  // stays after click on touch devices
45
40
  // TODO: only for non-touch devices
46
- // /*background-color: var(--light-alpha40);*/
41
+ // /*background-color: var(--bg700);*/
47
42
  }
48
43
  &:active {
49
44
  background-color: var(--light);
50
- border: 1px solid var(--default-alpha40);
45
+ border: var(--border-width-sm) solid var(--default-alpha40);
46
+ }
47
+ }
48
+
49
+ .button-compound {
50
+ display: inline-flex;
51
+ gap: var(--gap-sm);
52
+ box-shadow: var(--box-shadow);
53
+
54
+ & > .button {
55
+ @extend .fill;
56
+ box-shadow: none;
57
+
58
+ // Use color level from new lch palette instead of alpha
59
+ //&.dim {
60
+ //background-color: var(--default-alpha40);
61
+ //&:focus {
62
+ //border-color: var(--bg700);
63
+ //}
64
+
65
+ //&:active {
66
+ //background-color: var(--bg700);
67
+ //}
68
+ //}
69
+
70
+ &:empty {
71
+ width: 3rem;
72
+ }
73
+
74
+ &:first-child {
75
+ border-top-right-radius: 0;
76
+ border-bottom-right-radius: 0;
77
+ border-right: none;
78
+ }
79
+
80
+ &:not(:first-child):not(:last-child) {
81
+ border-radius: 0;
82
+ border-left: none;
83
+ border-right: none;
84
+ }
85
+
86
+ &:last-child {
87
+ border-top-left-radius: 0;
88
+ border-bottom-left-radius: 0;
89
+ border-left: none;
90
+ }
51
91
  }
52
92
  }
@@ -0,0 +1,130 @@
1
+ @mixin button {
2
+ overflow: hidden;
3
+ outline: none;
4
+ color: var(--fg100);
5
+ font-family: inherit;
6
+ cursor: pointer;
7
+ user-select: none;
8
+ vertical-align: middle;
9
+ transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
10
+
11
+ &:disabled {
12
+ opacity: 0.6;
13
+ filter: saturate(0.2);
14
+ cursor: default;
15
+ pointer-events: none;
16
+ }
17
+ }
18
+
19
+ .command {
20
+ @include button;
21
+ background-color: var(--bg900);
22
+ box-shadow: var(--box-shadow);
23
+ display: grid;
24
+ align-items: end;
25
+ justify-items: end;
26
+ text-align: end;
27
+ font-size: 1.1rem;
28
+ border-style: solid;
29
+ border-color: transparent;
30
+ border-width: 0 0 0 var(--focus-border-width);
31
+ padding: 0.25rem 0.6rem;
32
+ min-height: 3rem;
33
+ min-width: 3rem;
34
+ border-radius: 0.3rem;
35
+
36
+ &.flash {
37
+ animation: flash-background 1s ease-in-out infinite;
38
+ }
39
+
40
+ &.outline {
41
+ background-color: transparent;
42
+ border-color: var(--bg800);
43
+ border-width: var(--border-width);
44
+
45
+ &.flash {
46
+ animation-name: flash-border;
47
+ }
48
+ }
49
+
50
+ &:focus {
51
+ border-left-color: var(--bg600);
52
+ }
53
+
54
+ &:active {
55
+ border-color: var(--bg600);
56
+ background-color: var(--bg600);
57
+ animation-play-state: paused;
58
+ }
59
+ }
60
+
61
+ .compound-command {
62
+ display: inline-grid;
63
+ grid-auto-flow: column;
64
+ gap: var(--gap);
65
+
66
+ > .spacer {
67
+ background-color: var(--bg900);
68
+ box-shadow: var(--box-shadow);
69
+ min-width: 1rem;
70
+ min-height: 1rem;
71
+
72
+ &.outline {
73
+ background-color: transparent;
74
+ border: var(--border-width) solid var(--bg800);
75
+ }
76
+ }
77
+
78
+ > .text {
79
+ font-size: 2rem;
80
+ line-height: 2rem;
81
+ align-self: center;
82
+ padding: 0.25rem;
83
+ }
84
+
85
+ > button,
86
+ .spacer {
87
+ &:first-child {
88
+ border-radius: 0.3rem 0 0 0.3rem;
89
+ }
90
+
91
+ &:not(:first-child):not(:last-child) {
92
+ border-radius: 0;
93
+ }
94
+
95
+ &:last-child {
96
+ border-radius: 0 0.3rem 0.3rem 0;
97
+ }
98
+ }
99
+
100
+ &.vertical {
101
+ grid-auto-flow: row;
102
+
103
+ > .text {
104
+ justify-self: center;
105
+ }
106
+
107
+ > button,
108
+ .spacer {
109
+ &:first-child {
110
+ border-radius: 0.3rem 0.3rem 0 0;
111
+ }
112
+
113
+ &:last-child {
114
+ border-radius: 0 0 0.3rem 0.3rem;
115
+ }
116
+ }
117
+ }
118
+ }
119
+
120
+ @keyframes flash-background {
121
+ 50% {
122
+ background-color: var(--bg700);
123
+ }
124
+ }
125
+
126
+ @keyframes flash-border {
127
+ 50% {
128
+ border-color: var(--bg600);
129
+ }
130
+ }
@@ -8,7 +8,7 @@
8
8
  font-size: 1.1rem;
9
9
  border-style: solid;
10
10
  border-color: transparent;
11
- border-width: 0 0 0 2px;
11
+ border-width: 0 0 0 var(--border-width);
12
12
  padding: 0.2rem 0.4rem 0.2rem 1rem;
13
13
 
14
14
  &.flash {
@@ -16,11 +16,11 @@
16
16
  }
17
17
 
18
18
  &:focus {
19
- border-color: var(--light-alpha70);
19
+ border-color: var(--bg600);
20
20
  }
21
21
 
22
22
  &:active {
23
- background-color: var(--light-alpha70);
23
+ background-color: var(--bg600);
24
24
  animation-play-state: paused;
25
25
  }
26
26
  }
@@ -28,26 +28,20 @@
28
28
  .commands {
29
29
  position: relative;
30
30
  display: grid;
31
- gap: 6px;
32
- margin: 0.5rem;
31
+ gap: var(--gap);
33
32
 
34
33
  &:before,
35
34
  &:after {
36
- box-shadow: $box-shadow;
35
+ box-shadow: var(--box-shadow);
37
36
  position: absolute;
38
37
  content: "";
39
- background: var(--default-alpha70);
38
+ background: var(--bg900);
40
39
  }
41
40
 
42
41
  &:not(.vertical) {
43
- @extend %h2;
44
42
  grid-auto-flow: column;
45
- text-align: center;
46
- align-items: center;
47
- line-height: 3.6rem;
48
- height: 3.6rem;
49
- padding-left: 1.5rem;
50
- padding-right: 1.5rem;
43
+ padding-left: calc(1rem + var(--gap));
44
+ padding-right: calc(1rem + var(--gap));
51
45
 
52
46
  &:before,
53
47
  &:after {
@@ -74,8 +68,8 @@
74
68
  &.vertical {
75
69
  grid-auto-flow: row;
76
70
  min-width: 12rem;
77
- padding-top: 1.5rem;
78
- padding-bottom: 1.5rem;
71
+ padding-top: calc(1rem + var(--gap));
72
+ padding-bottom: calc(1rem + var(--gap));
79
73
 
80
74
  &:before,
81
75
  &:after {
@@ -97,13 +91,24 @@
97
91
  > div {
98
92
  min-height: 3.6rem;
99
93
  }
94
+
95
+ // attempt for mobile view
96
+ //@media screen and (max-width: 768px) {
97
+ //min-width: 2rem;
98
+ //width: 3.6rem;
99
+ //> button,
100
+ //> div {
101
+ //min-width: auto;
102
+ //color: transparent;
103
+ //}
104
+ //}
100
105
  }
101
106
 
102
107
  > button,
103
108
  > div {
104
109
  box-sizing: border-box;
105
- background-color: var(--default-alpha70);
106
- box-shadow: $box-shadow;
110
+ background-color: var(--bg900);
111
+ box-shadow: var(--box-shadow);
107
112
  }
108
113
 
109
114
  > button {
@@ -115,8 +120,9 @@
115
120
  }
116
121
  }
117
122
 
118
- @keyframes flash {
119
- 50% {
120
- background-color: var(--light-alpha70);
121
- }
122
- }
123
+ //Old, has been moved to _command.scss
124
+ //@keyframes flash {
125
+ //50% {
126
+ //background-color: var(--bg600);
127
+ //}
128
+ //}
package/scss/_corner.scss CHANGED
@@ -1,45 +1,45 @@
1
1
  @mixin corner($location, $style: "default") {
2
- --border-width: 2px;
2
+ --corner-border-width: var(--border-width);
3
3
 
4
4
  content: "";
5
5
  border-style: solid;
6
- border-color: var(--default);
6
+ border-color: var(--bg800);
7
7
  position: absolute;
8
8
  height: 1rem;
9
9
  width: 1rem;
10
10
  z-index: 2;
11
11
 
12
12
  @if $style == "light" {
13
- --border-width: 1px;
13
+ --corner-border-width: var(--border-width-sm);
14
14
 
15
- border-color: var(--light-alpha40);
15
+ border-color: var(--bg700);
16
16
  height: 0.75rem;
17
17
  width: 0.75rem;
18
18
  }
19
19
 
20
20
  @if $location == "top-left" {
21
- border-width: var(--border-width) 0 0 var(--border-width);
21
+ border-width: var(--corner-border-width) 0 0 var(--corner-border-width);
22
22
  border-radius: 0.3rem 0 0 0;
23
23
  left: 0;
24
24
  top: 0;
25
25
  }
26
26
 
27
27
  @if $location == "top-right" {
28
- border-width: var(--border-width) var(--border-width) 0 0;
28
+ border-width: var(--corner-border-width) var(--corner-border-width) 0 0;
29
29
  border-radius: 0 0.3rem 0 0;
30
30
  right: 0;
31
31
  top: 0;
32
32
  }
33
33
 
34
34
  @if $location == "bottom-left" {
35
- border-width: 0 0 var(--border-width) var(--border-width);
35
+ border-width: 0 0 var(--corner-border-width) var(--corner-border-width);
36
36
  border-radius: 0 0 0 0.3rem;
37
37
  left: 0;
38
38
  bottom: 0;
39
39
  }
40
40
 
41
41
  @if $location == "bottom-right" {
42
- border-width: 0 var(--border-width) var(--border-width) 0;
42
+ border-width: 0 var(--corner-border-width) var(--corner-border-width) 0;
43
43
  border-radius: 0 0 0.3rem 0;
44
44
  right: 0;
45
45
  bottom: 0;
@@ -0,0 +1,33 @@
1
+ :root {
2
+ --font-family: "Open Sans", sans-serif;
3
+ --font-size: 16px;
4
+ --box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
5
+ --gap-sm: 4px;
6
+ --gap: 6px;
7
+ --spacing: 0.8rem;
8
+ --border-width-sm: 0.08rem;
9
+ --border-width: 0.15rem;
10
+ --focus-border-width: 0.15rem;
11
+
12
+ @media screen and (min-width: 768px) {
13
+ --font-size: 14px;
14
+ }
15
+ }
16
+
17
+ html {
18
+ font-family: var(--font-family);
19
+ font-weight: 400;
20
+ }
21
+
22
+ html,
23
+ body {
24
+ font-size: var(--font-size);
25
+ height: 100%;
26
+ min-height: 100%;
27
+ }
28
+
29
+ body {
30
+ padding: var(--spacing);
31
+ background: var(--bg-body);
32
+ color: var(--fg100);
33
+ }
package/scss/_input.scss CHANGED
@@ -1,18 +1,17 @@
1
1
  .input {
2
2
  border-radius: 0.3rem;
3
- box-shadow: $box-shadow;
3
+ box-shadow: var(--box-shadow);
4
4
  outline: none;
5
- border: 1px solid var(--light-alpha40);
6
- color: var(--fg);
5
+ border: var(--border-width-sm) solid var(--bg700);
6
+ color: var(--fg100);
7
7
  font-family: inherit;
8
8
  background-color: transparent;
9
9
  transition: border-color 0.15s ease-in-out;
10
10
  padding: 0.8rem;
11
- margin: 0.8rem;
12
11
  font-size: 1.1rem;
13
12
 
14
13
  &:focus {
15
- border: 1px solid var(--light-alpha70);
14
+ border: var(--border-width-sm) solid var(--bg600);
16
15
  }
17
16
  &:disabled {
18
17
  opacity: 0.4;
package/scss/_panel.scss CHANGED
@@ -2,16 +2,22 @@
2
2
 
3
3
  .panel {
4
4
  background: var(--panel-background);
5
- box-shadow: $box-shadow;
5
+ box-shadow: var(--box-shadow);
6
6
  border-radius: 0.3rem;
7
7
  display: grid;
8
8
  grid-template-rows: auto 1fr auto;
9
9
  overflow: auto;
10
+ // This margin is ok here and necessary bc of the box shadow of the panel
11
+ // without a margin, the box shadow could be cut off if there is no space between panels
12
+ // so it is the responsibility of the panel to ensure this
10
13
  margin: 0.5rem;
11
14
 
12
15
  > header {
13
16
  position: relative;
14
- @extend %h3;
17
+ //@extend %h3; --> TODO use font-size token
18
+ @extend %header;
19
+ font-size: 1.5rem;
20
+
15
21
  padding: 0.4rem 0.6rem;
16
22
 
17
23
  &:before {
@@ -20,10 +26,6 @@
20
26
  &:after {
21
27
  @include corner("top-right");
22
28
  }
23
-
24
- &:empty {
25
- padding: 0.2rem;
26
- }
27
29
  }
28
30
 
29
31
  > article {
@@ -32,15 +34,15 @@
32
34
  overflow: auto;
33
35
 
34
36
  &::-webkit-scrollbar {
35
- width: 2px;
37
+ width: var(--border-width);
36
38
  background: transparent;
37
39
  }
38
40
  &::-webkit-scrollbar-thumb {
39
41
  min-width: 1rem;
40
42
  border-style: solid;
41
43
  border-color: transparent;
42
- border-width: 2px 2px 1px 2px;
43
- background: var(--default);
44
+ border-width: var(--border-width);
45
+ background: var(--bg800);
44
46
  box-sizing: border-box;
45
47
  background-clip: border-box;
46
48
  }
@@ -48,7 +50,7 @@
48
50
  > footer {
49
51
  position: relative;
50
52
 
51
- color: var(--footer-color);
53
+ color: var(--fg200);
52
54
  padding: 0.4rem 0.6rem;
53
55
  font-size: 0.75rem;
54
56
  text-align: right;
@@ -59,9 +61,5 @@
59
61
  &:after {
60
62
  @include corner("bottom-right");
61
63
  }
62
-
63
- &:empty {
64
- padding: 0.2rem;
65
- }
66
64
  }
67
65
  }