@latitude-ui/widgets 0.0.15 → 0.0.20

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 (10) hide show
  1. package/package.json +3 -2
  2. package/styles/_colors.scss +99 -0
  3. package/styles/_defaults.scss +135 -0
  4. package/styles/_index.scss +11 -0
  5. package/styles/_typography.scss +37 -0
  6. package/styles/button/_index.scss +199 -0
  7. package/styles/forms/_index.scss +888 -0
  8. package/styles/icons/_index.scss +34 -0
  9. package/styles/list/_index.scss +0 -0
  10. package/styles/listbox/_index.scss +30 -0
package/package.json CHANGED
@@ -1,7 +1,8 @@
1
1
  {
2
2
  "name": "@latitude-ui/widgets",
3
- "version": "0.0.15",
3
+ "version": "0.0.20",
4
4
  "description": "UI Widgets",
5
+ "private": false,
5
6
  "keywords": [
6
7
  "component",
7
8
  "directive"
@@ -69,7 +70,7 @@
69
70
  }
70
71
  },
71
72
  "peerDependencies": {
72
- "@latitude-ui/toolbox": "^0.0.1",
73
+ "@latitude-ui/stdlib": "^0.0.1",
73
74
  "@angular/common": "^20.0.0",
74
75
  "@angular/core": "^20.0.0",
75
76
  "@maskito/core": "^3.9.0",
package/styles/_colors.scss ADDED
@@ -0,0 +1,99 @@
1
+ $icon-color: #6d6e6f !default;
2
+ $icon-color-hover: #1e1f21 !default;
3
+ $icon-color-active: #1e1f21 !default;
4
+ $icon-color-strong: #6d6e6f !default;
5
+ $icon-color-disabled: #afabac !default;
6
+ $icon-color-foreground: #ffffff !default;
7
+
8
+ $text-color: #1e1f21 !default;
9
+ $text-color-strong: #555555 !default;
10
+ $text-color-subtle: #6d6e6f !default;
11
+ $text-color-subtle-hover: #1e1f21 !default;
12
+ $text-color-disabled: #afabac !default;
13
+ $text-color-foreground: #ffffff !default;
14
+
15
+ $shadow-color: rgba(109, 110, 111, .1) !default;
16
+ $shadow-color-weak: rgba(109, 110, 111, .08) !default;
17
+ $shadow-color-strong: rgba(109, 110, 111, .12) !default;
18
+
19
+ $outline-color: #edeae9 !default;
20
+ $outline-color-hover: #afabac !default;
21
+ $outline-color-active: #6d6e6f !default;
22
+ $outline-color-strong: #cfcbcb !default;
23
+
24
+ $background-color: #ffffff !default;
25
+ $background-color-hover: rgba(55, 23, 23, .03) !default;
26
+ $background-color-active: rgba(55, 23, 23, .05) !default;
27
+ $background-color-strong: #f5f3f3 !default;
28
+ $background-color-subtle: #f9f8f8 !default;
29
+ $background-color-subtle-hover: rgba(55, 23, 23, .05) !default;
30
+ $background-color-subtle-active: rgba(55, 23, 23, .06) !default;
31
+
32
+ $primary-color: #4573d2 !default;
33
+ $primary-color-hover: #426dc6 !default;
34
+ $primary-color-active: #3f66ba !default;
35
+
36
+ $primary-color-weak: #f1f2fc !default;
37
+ $primary-color-weak-hover: #e7e9fc !default;
38
+ $primary-color-weak-active: #dbe0fd !default;
39
+
40
+ $danger-color: #fa5252 !default;
41
+ $danger-color-hover: #fa5252 !default;
42
+ $danger-color-active: #fa5252 !default;
43
+
44
+ $box-shadow-small: 0 0 0 1px #edeae9, 0 1px 4px 0 rgba(109, 110, 111, .08);
45
+ $box-shadow-medium: 0 0 0 1px #edeae9, 0 3px 8px 0 rgba(109, 110, 111, .1);
46
+ $box-shadow-medium-hover: 0 0 0 1px #afabac, 0 3px 8px 0 rgba(109, 110, 111, .1);
47
+ $box-shadow-medium-active: 0 0 0 1px #6d6e6f, 0 3px 8px 0 rgba(109, 110, 111, .1);
48
+ $box-shadow-large: 0 0 0 1px #edeae9, 0 6px 12px 0 rgba(109, 110, 111, .12);
49
+
50
+ :root {
51
+ --lat-icon-color: #{$icon-color};
52
+ --lat-icon-color-hover: #{$icon-color-hover};
53
+ --lat-icon-color-active: #{$icon-color-active};
54
+ --lat-icon-color-strong: #{$icon-color-strong};
55
+ --lat-icon-color-disabled: #{$icon-color-disabled};
56
+ --lat-icon-color-foreground: #{$icon-color-foreground};
57
+
58
+ --lat-text-color: #{$text-color};
59
+ --lat-text-color-strong: #{$text-color-strong};
60
+ --lat-text-color-subtle: #{$text-color-subtle};
61
+ --lat-text-color-subtle-hover: #{$text-color-subtle-hover};
62
+ --lat-text-color-disabled: #{$text-color-disabled};
63
+ --lat-text-color-foreground: #{$text-color-foreground};
64
+
65
+ --lat-shadow-color: #{$shadow-color};
66
+ --lat-shadow-color-weak: #{$shadow-color-weak};
67
+ --lat-shadow-color-strong: #{$shadow-color-strong};
68
+
69
+ --lat-outline-color: #{$outline-color};
70
+ --lat-outline-color-hover: #{$outline-color-hover};
71
+ --lat-outline-color-active: #{$outline-color-active};
72
+ --lat-outline-color-strong: #{$outline-color-strong};
73
+
74
+ --lat-background-color: #{$background-color};
75
+ --lat-background-color-hover: #{$background-color-hover};
76
+ --lat-background-color-active: #{$background-color-active};
77
+ --lat-background-color-strong: #{$background-color-strong};
78
+ --lat-background-color-subtle: #{$background-color-subtle};
79
+ --lat-background-color-subtle-hover: #{$background-color-subtle-hover};
80
+ --lat-background-color-subtle-active: #{$background-color-subtle-active};
81
+
82
+ --lat-primary-color: #{$primary-color};
83
+ --lat-primary-color-hover: #{$primary-color-hover};
84
+ --lat-primary-color-active: #{$primary-color-active};
85
+
86
+ --lat-primary-color-weak: #{$primary-color-weak};
87
+ --lat-primary-color-weak-hover: #{$primary-color-weak-hover};
88
+ --lat-primary-color-weak-active: #{$primary-color-weak-active};
89
+
90
+ --lat-danger-color: #{$danger-color};
91
+ --lat-danger-color-hover: #{$danger-color-hover};
92
+ --lat-danger-color-active: #{$danger-color-active};
93
+
94
+ --lat-box-shadow-small: #{$box-shadow-small};
95
+ --lat-box-shadow-medium: #{$box-shadow-medium};
96
+ --lat-box-shadow-medium-hover: #{$box-shadow-medium-hover};
97
+ --lat-box-shadow-medium-active: #{$box-shadow-medium-active};
98
+ --lat-box-shadow-large: #{$box-shadow-large};
99
+ }
package/styles/_defaults.scss ADDED
@@ -0,0 +1,135 @@
1
+
2
+
3
+ *,
4
+ ::before,
5
+ ::after {
6
+ box-sizing: border-box;
7
+ }
8
+
9
+ html {
10
+ font-family: var(--lat-font-family-sans, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'), sans-serif;
11
+
12
+ font-size: 16px;
13
+ font-weight: var(--lat-font-weight-normal, 450);
14
+ line-height: 24px;
15
+
16
+ -webkit-text-size-adjust: 100%;
17
+ tab-size: 4;
18
+ }
19
+
20
+
21
+ body {
22
+ margin: 0;
23
+ }
24
+
25
+ b,
26
+ strong {
27
+ font-weight: bolder;
28
+ }
29
+
30
+
31
+ code,
32
+ kbd,
33
+ samp,
34
+ pre {
35
+ font-family: var(--lat-font-famiy-monospace, ui-monospace, SFMono-Regular, inherit Consolas, 'Liberation Mono', Menlo), monospace;
36
+ font-size: 1em;
37
+ }
38
+
39
+
40
+ small {
41
+ font-size: 80%;
42
+ }
43
+
44
+
45
+ sub,
46
+ sup {
47
+ font-size: 75%;
48
+ line-height: 0;
49
+ position: relative;
50
+ vertical-align: baseline;
51
+ }
52
+
53
+ sub {
54
+ bottom: -0.25em;
55
+ }
56
+
57
+ sup {
58
+ top: -0.5em;
59
+ }
60
+
61
+
62
+ table {
63
+ border-color: currentcolor;
64
+ }
65
+
66
+
67
+ button,
68
+ input,
69
+ optgroup,
70
+ select,
71
+ textarea {
72
+ font-family: inherit;
73
+ font-size: 100%;
74
+ line-height: 1.15;
75
+ margin: 0;
76
+ }
77
+
78
+
79
+ button,
80
+ [type='button'],
81
+ [type='reset'],
82
+ [type='submit'] {
83
+ -webkit-appearance: button;
84
+ }
85
+
86
+
87
+ legend {
88
+ padding: 0;
89
+ }
90
+
91
+
92
+ progress {
93
+ vertical-align: baseline;
94
+ }
95
+
96
+
97
+ ::-webkit-inner-spin-button,
98
+ ::-webkit-outer-spin-button {
99
+ height: auto;
100
+ }
101
+
102
+
103
+ [type='search'] {
104
+ -webkit-appearance: textfield;
105
+ outline-offset: -2px;
106
+ }
107
+
108
+
109
+ ::-webkit-search-decoration {
110
+ -webkit-appearance: none;
111
+ }
112
+
113
+
114
+ ::-webkit-file-upload-button {
115
+ -webkit-appearance: button;
116
+ font: inherit;
117
+ }
118
+
119
+
120
+ summary {
121
+ display: list-item;
122
+ }
123
+
124
+ .lat-root {
125
+ display: flex;
126
+
127
+ overflow: hidden;
128
+ box-sizing: border-box;
129
+
130
+ width: var(--lat-layout-width, 100vw);
131
+ height: var(--lat-layout-height, 100vw);
132
+ }
133
+
134
+
135
+
package/styles/_index.scss ADDED
@@ -0,0 +1,11 @@
1
+ @use "colors";
2
+ @use "typography";
3
+
4
+ @use "defaults";
5
+
6
+ @use "button";
7
+ @use "icons";
8
+ @use "listbox";
9
+
10
+ @use "forms";
11
+
package/styles/_typography.scss ADDED
@@ -0,0 +1,37 @@
1
+ $font-family-sans: "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !default;
2
+ $font-family-monospace: "Berkeley Mono", "SFMono Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
3
+
4
+ $font-size-tiny: 0.625rem !default;
5
+ $font-size-small: 0.75rem !default;
6
+ $font-size-normal: 0.875rem !default;
7
+ $font-size-medium: 1rem !default;
8
+ $font-size-large: 1.25rem !default;
9
+
10
+ $font-weight-light: 300 !default;
11
+ $font-weight-normal: 400 !default;
12
+ $font-weight-medium: 500 !default;
13
+ $font-weight-semibold: 600 !default;
14
+ $font-weight-bold: 700 !default;
15
+
16
+
17
+ :root {
18
+ --lat-font-family-sans: #{$font-family-sans};
19
+ --lat-font-family-monospace: #{$font-family-monospace};
20
+
21
+ --lat-font-size-tiny: #{$font-size-tiny};
22
+ --lat-font-size-small: #{$font-size-small};
23
+ --lat-font-size-normal: #{$font-size-normal};
24
+ --lat-font-size-medium: #{$font-size-medium};
25
+ --lat-font-size-large: #{$font-size-large};
26
+
27
+ --lat-font-weight-light: #{$font-weight-light};
28
+ --lat-font-weight-normal: #{$font-weight-normal};
29
+ --lat-font-weight-medium: #{$font-weight-medium};
30
+ --lat-font-weight-semibold: #{$font-weight-semibold};
31
+ --lat-font-weight-bold: #{$font-weight-bold};
32
+
33
+ --lat-font-size: var(--lat-font-size-medium);
34
+ --lat-font-family: var(--lat-font-family-sans);
35
+ --lat-font-weight: var(--lat-font-weight-normal);
36
+
37
+ }
package/styles/button/_index.scss ADDED
@@ -0,0 +1,199 @@
1
+
2
+ lat-button {
3
+ overflow: hidden;
4
+ position: relative;
5
+
6
+ box-sizing: border-box;
7
+
8
+ display: inline-flex;
9
+
10
+ gap: 4px;
11
+ flex-shrink: 0;
12
+
13
+ align-items: center;
14
+ justify-content: center;
15
+
16
+ margin: 0;
17
+ padding: 0;
18
+
19
+ outline: none;
20
+
21
+ cursor: pointer;
22
+ user-select: none;
23
+ white-space: nowrap;
24
+ vertical-align: top;
25
+ text-decoration: none;
26
+ touch-action: manipulation;
27
+
28
+ border-width: 0;
29
+ border-color: transparent;
30
+ border-style: solid;
31
+ border-radius: 4px;
32
+
33
+ font-family: var(--lat-font-family-sans), sans-serif;
34
+ font-weight: var(--lat-font-weight-normal);
35
+ line-height: normal;
36
+
37
+ transition-property: background, border, color, fill, opacity;
38
+ transition-duration: 0.2s;
39
+
40
+ &[data-size] {
41
+ height: var(--lat-button-height);
42
+ padding: var(--lat-button-padding);
43
+ font-size: var(--lat-button-font-size);
44
+ line-height: var(--lat-button-line-height);
45
+ }
46
+
47
+ &[data-onlyicon="true"] {
48
+ width: var(--lat-button-height);
49
+ min-width: var(--lat-button-height);
50
+ }
51
+
52
+ &[data-size="sm"] {
53
+ --lat-button-height: 24px;
54
+ --lat-button-padding: 0 8px;
55
+ --lat-button-font-size: 12px;
56
+ --lat-button-line-height: 24px;
57
+ }
58
+
59
+ &[data-size="md"] {
60
+ --lat-button-height: 28px;
61
+ --lat-button-padding: 0 8px;
62
+ --lat-button-font-size: 12px;
63
+ --lat-button-line-height: 28px;
64
+ }
65
+
66
+ &[data-size="lg"] {
67
+ --lat-button-height: 32px;
68
+ --lat-button-padding: 0 10px;
69
+ --lat-button-font-size: 14px;
70
+ --lat-button-line-height: 32px;
71
+ }
72
+
73
+ &[data-variant="action"] {
74
+ fill: #ffffff;
75
+ color: #ffffff;
76
+ border-width: 1px;
77
+ border-style: solid;
78
+ border-color: var(--lat-primary-color);
79
+ background-color: var(--lat-primary-color);
80
+
81
+ &:hover {
82
+ fill: #ffffff;
83
+ color: #ffffff;
84
+ border-color: var(--lat-primary-color-hover);
85
+ background-color: var(--lat-primary-color-hover);
86
+ }
87
+
88
+ &:active {
89
+ fill: #ffffff;
90
+ color: #ffffff;
91
+ border-color: var(--lat-primary-color-active);
92
+ background-color: var(--lat-primary-color-active);
93
+ }
94
+
95
+ &:focus-visible {
96
+ }
97
+ }
98
+
99
+ &[data-variant="default"] {
100
+ fill: var(--lat-icon-color);
101
+ color: var(--lat-text-color);
102
+ border-width: 1px;
103
+ border-style: solid;
104
+ border-color: var(--lat-outline-color-strong);
105
+ background-color: #ffffff;
106
+
107
+ &:hover {
108
+ fill: var(--lat-icon-hover);
109
+ color: var(--lat-text-color);
110
+ border-color: var(--lat-outline-color-hover);
111
+ background-color: var(--lat-background-color-subtle);
112
+ }
113
+
114
+ &:active {
115
+ fill: var(--lat-icon-hover);
116
+ color: var(--lat-text-color);
117
+ border-color: var(--lat-outline-color-active);
118
+ background-color: var(--lat-background-color-strong);
119
+ }
120
+
121
+ &:focus-visible {
122
+ }
123
+ }
124
+
125
+ &[data-variant="text"] {
126
+ fill: var(--lat-text-color);
127
+ color: var(--lat-text-color);
128
+ border-color: transparent;
129
+ background-color: transparent;
130
+
131
+ &:hover {
132
+ fill: var(--lat-text-color);
133
+ color: var(--lat-text-color);
134
+ border-color: var(--lat-background-color-hover);
135
+ background-color: var(--lat-background-color-hover);
136
+ }
137
+
138
+ &:active {
139
+ fill: var(--lat-text-color);
140
+ color: var(--lat-text-color);
141
+ border-color: var(--lat-background-color-active);
142
+ background-color: var(--lat-background-color-active);
143
+ }
144
+
145
+ &:focus-visible {
146
+ }
147
+ }
148
+
149
+ &[data-variant="subtle"] {
150
+ fill: var(--lat-text-color-subtle);
151
+ color: var(--lat-text-color-subtle);
152
+ border-color: transparent;
153
+ background-color: transparent;
154
+
155
+ &:hover {
156
+ fill: var(--lat-text-color);
157
+ color: var(--lat-text-color);
158
+ border-color: var(--lat-background-color-subtle-hover);
159
+ background-color: var(--lat-background-color-subtle-hover);
160
+ }
161
+
162
+ &:active {
163
+ fill: var(--lat-text-color);
164
+ color: var(--lat-text-color);
165
+ border-color: var(--lat-background-color-subtle-active);
166
+ background-color: var(--lat-background-color-subtle-active);
167
+ }
168
+
169
+ &:focus-visible {
170
+ }
171
+ }
172
+
173
+ &[data-variant="danger"] {
174
+
175
+ }
176
+
177
+ &[data-variant="success"] {
178
+
179
+ }
180
+
181
+ &[aria-disabled="true"] {
182
+ cursor: not-allowed;
183
+
184
+ fill: var(--lat-text-color-disabled);
185
+ color: var(--lat-text-color-disabled);
186
+ background: #ffffff;
187
+ border-color: var(--lat-outline-color);
188
+
189
+ &:hover,
190
+ &:active,
191
+ &:focus-visible {
192
+ fill: var(--lat-text-color-disabled);
193
+ color: var(--lat-text-color-disabled);
194
+ background: #ffffff;
195
+ border-color: var(--lat-outline-color);
196
+ }
197
+ }
198
+
199
+ }