fulldev-ui 0.4.10 → 0.4.11

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 (49) hide show
  1. package/package.json +3 -2
  2. package/pnpm-lock.yaml +3640 -2909
  3. package/public/images/og-image.png +0 -0
  4. package/src/blocks/Contact.astro +6 -4
  5. package/src/blocks/Intro.astro +5 -3
  6. package/src/blocks/Prices.astro +6 -4
  7. package/src/components/Avatar.astro +18 -16
  8. package/src/components/Badge.astro +33 -31
  9. package/src/components/Bento.astro +16 -14
  10. package/src/components/Button.astro +77 -75
  11. package/src/components/Card.astro +47 -45
  12. package/src/components/Carousel.astro +27 -25
  13. package/src/components/Checkbox.astro +12 -10
  14. package/src/components/Column.astro +35 -33
  15. package/src/components/Dialog.astro +19 -17
  16. package/src/components/Drawer.astro +39 -37
  17. package/src/components/Footer.astro +39 -37
  18. package/src/components/Grid.astro +9 -7
  19. package/src/components/Header.astro +58 -52
  20. package/src/components/Heading.astro +30 -28
  21. package/src/components/Icon.astro +15 -13
  22. package/src/components/Image.astro +93 -91
  23. package/src/components/Input.astro +51 -49
  24. package/src/components/Label.astro +11 -9
  25. package/src/components/Link.astro +34 -32
  26. package/src/components/List.astro +14 -12
  27. package/src/components/Masonry.astro +17 -15
  28. package/src/components/Rating.astro +15 -13
  29. package/src/components/Root.astro +8 -3
  30. package/src/components/Row.astro +17 -15
  31. package/src/components/Section.astro +62 -60
  32. package/src/components/Select.astro +59 -57
  33. package/src/components/Sidebar.astro +16 -13
  34. package/src/components/Split.astro +26 -24
  35. package/src/components/Spread.astro +18 -16
  36. package/src/components/Switch.astro +50 -48
  37. package/src/components/Table.astro +50 -48
  38. package/src/components/Tagline.astro +8 -6
  39. package/src/components/Text.astro +11 -9
  40. package/src/components/Textarea.astro +44 -42
  41. package/src/components/Toc.astro +16 -13
  42. package/src/components/Wrap.astro +16 -14
  43. package/src/components/experimental/Price.astro +11 -9
  44. package/src/components/experimental/Prose.astro +114 -112
  45. package/src/components/experimental/Window.astro +58 -56
  46. package/src/content/pages/index.mdx +1 -1
  47. package/src/content/pages/overview/frameworks.mdx +8 -17
  48. package/src/content/pages/overview/introduction.mdx +1 -1
  49. package/src/css/custom.css +0 -5
package/src/components/Text.astro CHANGED
@@ -28,16 +28,18 @@ const { as = 'p', color = 'base', html, text, ...rest } = Astro.props
28
28
  </Root>
29
29
 
30
30
  <style is:global lang="scss">
31
- .text {
32
- margin: 0;
33
- max-width: calc(var(--space-4) * 44);
34
- color: var(--color-11);
35
- font-weight: var(--font-weight);
36
- font-size: var(--text-3);
37
- line-height: 1.625;
31
+ @layer fulldev {
32
+ .text {
33
+ margin: 0;
34
+ max-width: calc(var(--space-4) * 44);
35
+ color: var(--color-11);
36
+ font-weight: var(--font-weight);
37
+ font-size: var(--text-3);
38
+ line-height: 1.625;
38
39
 
39
- &.lead {
40
- font-size: var(--text-4);
40
+ &.lead {
41
+ font-size: var(--text-4);
42
+ }
41
43
  }
42
44
  }
43
45
  </style>
package/src/components/Textarea.astro CHANGED
@@ -48,57 +48,59 @@ const {
48
48
  </Root>
49
49
 
50
50
  <style is:global lang="scss">
51
- .textarea {
52
- display: flex;
53
- position: relative;
54
- flex-direction: column;
55
- gap: var(--space-1);
56
- width: 100%;
57
-
58
- textarea {
51
+ @layer fulldev {
52
+ .textarea {
59
53
  display: flex;
60
54
  position: relative;
61
- align-items: center;
62
- outline: none;
63
- border: 1px solid var(--color-6);
64
- border-radius: var(--radius-1);
65
- background-color: transparent;
66
- padding: var(--space-4);
55
+ flex-direction: column;
56
+ gap: var(--space-1);
67
57
  width: 100%;
68
- height: calc((var(--text-2) + 2 * var(--space-4)) * 2);
69
- min-height: calc((var(--text-2) + 2 * var(--space-4)) * 2);
70
- resize: vertical;
71
- color: var(--color-11);
72
- font-weight: 400;
73
- font-size: var(--text-2);
74
- line-height: 1.25;
75
-
76
- &.radius-none {
77
- border-radius: 0;
78
- }
79
58
 
80
- &.radius-auto {
59
+ textarea {
60
+ display: flex;
61
+ position: relative;
62
+ align-items: center;
63
+ outline: none;
64
+ border: 1px solid var(--color-6);
81
65
  border-radius: var(--radius-1);
82
- }
83
-
84
- &::placeholder {
66
+ background-color: transparent;
67
+ padding: var(--space-4);
68
+ width: 100%;
69
+ height: calc((var(--text-2) + 2 * var(--space-4)) * 2);
70
+ min-height: calc((var(--text-2) + 2 * var(--space-4)) * 2);
71
+ resize: vertical;
85
72
  color: var(--color-11);
86
- }
73
+ font-weight: 400;
74
+ font-size: var(--text-2);
75
+ line-height: 1.25;
87
76
 
88
- &:hover {
89
- outline: none;
90
- }
77
+ &.radius-none {
78
+ border-radius: 0;
79
+ }
91
80
 
92
- &:focus {
93
- outline: none;
94
- box-shadow: inset 0 0 0 2px var(--color-7);
95
- border-color: var(--color-7);
96
- }
81
+ &.radius-auto {
82
+ border-radius: var(--radius-1);
83
+ }
84
+
85
+ &::placeholder {
86
+ color: var(--color-11);
87
+ }
88
+
89
+ &:hover {
90
+ outline: none;
91
+ }
92
+
93
+ &:focus {
94
+ outline: none;
95
+ box-shadow: inset 0 0 0 2px var(--color-7);
96
+ border-color: var(--color-7);
97
+ }
97
98
 
98
- &:disabled {
99
- opacity: 50%;
100
- cursor: not-allowed;
101
- pointer-events: none;
99
+ &:disabled {
100
+ opacity: 50%;
101
+ cursor: not-allowed;
102
+ pointer-events: none;
103
+ }
102
104
  }
103
105
  }
104
106
  }
package/src/components/Toc.astro CHANGED
@@ -32,21 +32,24 @@ const { toc, headings } = Astro.props
32
32
  </Column>
33
33
 
34
34
  <style lang="scss" is:global>
35
- .toc {
36
- display: none !important;
37
- box-sizing: border-box;
38
- border-left: 1px solid var(--color-a6);
39
- padding: var(--space-6) 0 var(--space-6) min(var(--space-5), var(--gutter));
40
- height: 100vh;
41
- max-height: 100vh;
42
- overflow-y: auto;
35
+ @layer fulldev {
36
+ .toc {
37
+ display: none !important;
38
+ box-sizing: border-box;
39
+ border-left: 1px solid var(--color-a6);
40
+ padding: var(--space-6) 0 var(--space-6)
41
+ min(var(--space-5), var(--gutter));
42
+ height: 100vh;
43
+ max-height: 100vh;
44
+ overflow-y: auto;
43
45
 
44
- .toc-link {
45
- font-size: var(--text-2);
46
- }
46
+ .toc-link {
47
+ font-size: var(--text-2);
48
+ }
47
49
 
48
- @media (min-width: 1024px) {
49
- display: flex !important;
50
+ @media (min-width: 1024px) {
51
+ display: flex !important;
52
+ }
50
53
  }
51
54
  }
52
55
  </style>
package/src/components/Wrap.astro CHANGED
@@ -18,23 +18,25 @@ const { align = 'center', ...rest } = Astro.props
18
18
  </Root>
19
19
 
20
20
  <style is:global lang="scss">
21
- .wrap {
22
- display: flex;
23
- flex-wrap: wrap;
24
- justify-content: stretch;
25
- gap: var(--space-2);
21
+ @layer fulldev {
22
+ .wrap {
23
+ display: flex;
24
+ flex-wrap: wrap;
25
+ justify-content: stretch;
26
+ gap: var(--space-2);
26
27
 
27
- &.align-start {
28
- align-items: flex-start;
29
- text-align: left;
30
- }
28
+ &.align-start {
29
+ align-items: flex-start;
30
+ text-align: left;
31
+ }
31
32
 
32
- &.align-center {
33
- align-items: center;
34
- }
33
+ &.align-center {
34
+ align-items: center;
35
+ }
35
36
 
36
- &.align-end {
37
- align-items: flex-end;
37
+ &.align-end {
38
+ align-items: flex-end;
39
+ }
38
40
  }
39
41
  }
40
42
  </style>
package/src/components/experimental/Price.astro CHANGED
@@ -16,7 +16,7 @@ const { as = 'p', value, ...rest } = Astro.props
16
16
  value && (
17
17
  <Root
18
18
  if={value}
19
- class:list='price']}
19
+ class:list="price"
20
20
  {as}
21
21
  {...rest}
22
22
  >
@@ -26,13 +26,15 @@ const { as = 'p', value, ...rest } = Astro.props
26
26
  }
27
27
 
28
28
  <style is:global lang="scss">
29
- .price {
30
- margin: 0;
31
- max-width: calc(var(--space-4) * 44);
32
- color: var(--color-12);
33
- font-weight: var(--font-weight);
34
- font-size: var(--text-5);
35
- line-height: 1.25;
36
- font-family: var(--font-family);
29
+ @layer fulldev {
30
+ .price {
31
+ margin: 0;
32
+ max-width: calc(var(--space-4) * 44);
33
+ color: var(--color-12);
34
+ font-weight: var(--font-weight);
35
+ font-size: var(--text-5);
36
+ line-height: 1.25;
37
+ font-family: var(--font-family);
38
+ }
37
39
  }
38
40
  </style>
package/src/components/experimental/Prose.astro CHANGED
@@ -16,139 +16,141 @@ const { as = 'div', ...rest } = Astro.props
16
16
  </Root>
17
17
 
18
18
  <style is:global lang="scss">
19
- .prose {
20
- width: 100%;
21
- scroll-margin-top: var(--space-6);
22
- color: var(--color-11);
23
- font-weight: var(--font-weight);
24
- font-size: var(--text-3);
25
- line-height: 1.7;
26
- font-family: var(--font-family);
27
-
28
- > {
29
- .astro-code,
30
- .window,
31
- .table {
32
- margin-top: var(--space-5);
33
- }
34
-
35
- * {
36
- margin: 0;
37
- }
38
-
39
- p {
40
- margin-top: var(--space-4);
41
- }
42
-
43
- h1,
44
- h2,
45
- h3,
46
- h4,
47
- h5,
48
- h6 {
49
- color: var(--color-12);
50
- font-weight: 700;
51
- line-height: 1.2;
52
- }
19
+ @layer fulldev {
20
+ .prose {
21
+ width: 100%;
22
+ scroll-margin-top: var(--space-6);
23
+ color: var(--color-11);
24
+ font-weight: var(--font-weight);
25
+ font-size: var(--text-3);
26
+ line-height: 1.7;
27
+ font-family: var(--font-family);
28
+
29
+ > {
30
+ .astro-code,
31
+ .window,
32
+ .table {
33
+ margin-top: var(--space-5);
34
+ }
53
35
 
54
- h1 {
55
- margin-top: var(--space-6);
56
- scroll-margin-top: var(--space-6);
57
- font-size: var(--text-8);
58
- }
36
+ * {
37
+ margin: 0;
38
+ }
59
39
 
60
- h2 {
61
- margin-top: var(--space-6);
62
- scroll-margin-top: var(--space-6);
63
- font-size: var(--text-7);
64
- }
40
+ p {
41
+ margin-top: var(--space-4);
42
+ }
65
43
 
66
- h3 {
67
- margin-top: var(--space-6);
68
- scroll-margin-top: var(--space-6);
69
- font-size: var(--text-6);
70
- }
44
+ h1,
45
+ h2,
46
+ h3,
47
+ h4,
48
+ h5,
49
+ h6 {
50
+ color: var(--color-12);
51
+ font-weight: 700;
52
+ line-height: 1.2;
53
+ }
71
54
 
72
- h4 {
73
- margin-top: var(--space-5);
74
- scroll-margin-top: var(--space-5);
75
- font-size: var(--text-5);
76
- }
55
+ h1 {
56
+ margin-top: var(--space-6);
57
+ scroll-margin-top: var(--space-6);
58
+ font-size: var(--text-8);
59
+ }
77
60
 
78
- h5 {
79
- margin-top: var(--space-5);
80
- scroll-margin-top: var(--space-5);
81
- font-size: var(--text-4);
82
- }
61
+ h2 {
62
+ margin-top: var(--space-6);
63
+ scroll-margin-top: var(--space-6);
64
+ font-size: var(--text-7);
65
+ }
83
66
 
84
- h6 {
85
- margin-top: var(--space-5);
86
- scroll-margin-top: var(--space-5);
87
- font-size: var(--text-3);
88
- }
67
+ h3 {
68
+ margin-top: var(--space-6);
69
+ scroll-margin-top: var(--space-6);
70
+ font-size: var(--text-6);
71
+ }
89
72
 
90
- *:first-child {
91
- margin-top: 0;
92
- }
93
- }
73
+ h4 {
74
+ margin-top: var(--space-5);
75
+ scroll-margin-top: var(--space-5);
76
+ font-size: var(--text-5);
77
+ }
94
78
 
95
- .display {
96
- display: grid;
97
- width: 100%;
98
- max-width: none;
79
+ h5 {
80
+ margin-top: var(--space-5);
81
+ scroll-margin-top: var(--space-5);
82
+ font-size: var(--text-4);
83
+ }
99
84
 
100
- table {
101
- h1,
102
- h2,
103
- h3,
104
- h4,
105
- h5,
106
85
  h6 {
107
- margin: var(--space-2) 0;
86
+ margin-top: var(--space-5);
87
+ scroll-margin-top: var(--space-5);
88
+ font-size: var(--text-3);
89
+ }
108
90
 
109
- font: 600 var(--text-3) 'Saira';
91
+ *:first-child {
92
+ margin-top: 0;
93
+ }
94
+ }
110
95
 
111
- & + p {
112
- color: var(--hue11);
96
+ .display {
97
+ display: grid;
98
+ width: 100%;
99
+ max-width: none;
100
+
101
+ table {
102
+ h1,
103
+ h2,
104
+ h3,
105
+ h4,
106
+ h5,
107
+ h6 {
108
+ margin: var(--space-2) 0;
109
+
110
+ font: 600 var(--text-3) 'Saira';
111
+
112
+ & + p {
113
+ color: var(--hue11);
114
+ }
113
115
  }
114
116
  }
115
117
  }
116
- }
117
118
 
118
- table {
119
- margin: var(--space-5) 0;
120
- border: 1px solid var(--border);
121
- border-radius: var(--radius-1) !important;
122
- border-collapse: collapse;
123
- width: 100%;
124
- }
119
+ table {
120
+ margin: var(--space-5) 0;
121
+ border: 1px solid var(--border);
122
+ border-radius: var(--radius-1) !important;
123
+ border-collapse: collapse;
124
+ width: 100%;
125
+ }
125
126
 
126
- th {
127
- border-bottom: 1px solid var(--border);
128
- background: var(--raised-background) !important;
129
- color: var(--muted-foreground) !important;
130
- font-weight: 500 !important;
131
- font-size: var(--text-3) !important;
132
- }
127
+ th {
128
+ border-bottom: 1px solid var(--border);
129
+ background: var(--raised-background) !important;
130
+ color: var(--muted-foreground) !important;
131
+ font-weight: 500 !important;
132
+ font-size: var(--text-3) !important;
133
+ }
133
134
 
134
- td {
135
- color: var(--muted-foreground) !important;
136
- }
135
+ td {
136
+ color: var(--muted-foreground) !important;
137
+ }
137
138
 
138
- th,
139
- td {
140
- padding: var(--space-2);
141
- }
139
+ th,
140
+ td {
141
+ padding: var(--space-2);
142
+ }
142
143
 
143
- table a {
144
- color: var(--solid) !important;
145
- font-size: var(--text-3) !important;
146
- line-height: 1 !important;
147
- white-space: nowrap;
148
- }
144
+ table a {
145
+ color: var(--solid) !important;
146
+ font-size: var(--text-3) !important;
147
+ line-height: 1 !important;
148
+ white-space: nowrap;
149
+ }
149
150
 
150
- table a:hover {
151
- text-decoration: underline;
151
+ table a:hover {
152
+ text-decoration: underline;
153
+ }
152
154
  }
153
155
  }
154
156
  </style>
package/src/components/experimental/Window.astro CHANGED
@@ -52,80 +52,82 @@ const isComponent =
52
52
  }
53
53
 
54
54
  <style lang="scss" is:global>
55
- .window {
56
- display: flex;
57
- flex-direction: column;
58
- align-items: flex-start;
59
- width: 100%;
60
-
61
- .code-container {
55
+ @layer fulldev {
56
+ .window {
57
+ display: flex;
58
+ flex-direction: column;
59
+ align-items: flex-start;
62
60
  width: 100%;
63
61
 
64
- .astro-code {
65
- margin: 0;
66
- background-color: var(--base-2) !important;
67
- padding: var(--space-5);
68
- }
69
- }
62
+ .code-container {
63
+ width: 100%;
70
64
 
71
- &.component {
72
- border: 1px solid var(--base-6);
73
- border-radius: var(--radius-2);
74
- overflow: hidden;
75
-
76
- .example-container {
77
- display: flex;
78
- flex-direction: column;
79
- align-items: start;
80
- gap: var(--space-4);
81
- padding: var(--space-5);
65
+ .astro-code {
66
+ margin: 0;
67
+ background-color: var(--base-2) !important;
68
+ padding: var(--space-5);
69
+ }
82
70
  }
83
71
 
84
- .code-container {
85
- border: none;
86
- border-top: 1px solid var(--base-6);
87
- border-radius: 0px;
72
+ &.component {
73
+ border: 1px solid var(--base-6);
74
+ border-radius: var(--radius-2);
75
+ overflow: hidden;
76
+
77
+ .example-container {
78
+ display: flex;
79
+ flex-direction: column;
80
+ align-items: start;
81
+ gap: var(--space-4);
82
+ padding: var(--space-5);
83
+ }
88
84
 
89
- .astro-code {
85
+ .code-container {
90
86
  border: none;
87
+ border-top: 1px solid var(--base-6);
91
88
  border-radius: 0px;
89
+
90
+ .astro-code {
91
+ border: none;
92
+ border-radius: 0px;
93
+ }
92
94
  }
93
95
  }
94
- }
95
96
 
96
- &.block {
97
- gap: var(--space-2);
98
- padding-top: var(--space-7);
99
- padding-bottom: var(--space-7);
97
+ &.block {
98
+ gap: var(--space-2);
99
+ padding-top: var(--space-7);
100
+ padding-bottom: var(--space-7);
100
101
 
101
- .button-header {
102
- padding: 0 var(--gutter);
103
- }
104
-
105
- .code-container {
106
- display: none;
107
- padding: 0 var(--gutter);
108
- max-width: calc(100% - (2 * var(--gutter)));
109
- }
102
+ .button-header {
103
+ padding: 0 var(--gutter);
104
+ }
110
105
 
111
- .window-toggle {
112
- display: none;
113
- visibility: hidden;
114
- opacity: 0;
115
- }
106
+ .code-container {
107
+ display: none;
108
+ padding: 0 var(--gutter);
109
+ max-width: calc(100% - (2 * var(--gutter)));
110
+ }
116
111
 
117
- .window-toggle:checked {
118
- & ~ .example-container {
112
+ .window-toggle {
119
113
  display: none;
114
+ visibility: hidden;
115
+ opacity: 0;
120
116
  }
121
- & ~ .code-container {
122
- display: block;
117
+
118
+ .window-toggle:checked {
119
+ & ~ .example-container {
120
+ display: none;
121
+ }
122
+ & ~ .code-container {
123
+ display: block;
124
+ }
123
125
  }
124
- }
125
126
 
126
- .example-container {
127
- border-top: 1px solid var(--base-6);
128
- width: 100%;
127
+ .example-container {
128
+ border-top: 1px solid var(--base-6);
129
+ width: 100%;
130
+ }
129
131
  }
130
132
  }
131
133
  }
package/src/content/pages/index.mdx CHANGED
@@ -39,7 +39,7 @@ sections:
39
39
  _bookshop_name: Content
40
40
  color: brand
41
41
  label: Components
42
- heading: Or built your own, with easy to use components
42
+ heading: Or build your own, with easy to use components
43
43
  text: our rich set of components make it easy to build your own blocks with great customizability through props and global theming.
44
44
  image: /images/component-code.png
45
45
  reverse: odd