fulldev-ui 0.3.35 → 0.4.0-beta.0

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 (287) hide show
  1. package/.github/ISSUE_TEMPLATE/bug_report.yml +57 -0
  2. package/.github/ISSUE_TEMPLATE/config.yml +5 -0
  3. package/.github/ISSUE_TEMPLATE/feature_request.yml +39 -0
  4. package/.github/pull_request_template.md +23 -0
  5. package/.github/workflows/github-releases-to-discord.yml +21 -0
  6. package/.prettierignore +15 -0
  7. package/.prettierrc.yaml +34 -0
  8. package/.vscode/extensions.json +4 -0
  9. package/.vscode/launch.json +11 -0
  10. package/.vscode/settings.json +23 -0
  11. package/CHANGELOG.md +100 -0
  12. package/CONTRIBUTING.md +102 -0
  13. package/LICENCE +21 -0
  14. package/README.md +9 -6
  15. package/astro.config.ts +44 -0
  16. package/package.json +41 -27
  17. package/pnpm-lock.yaml +6229 -0
  18. package/public/favicon/android-chrome-192x192.png +0 -0
  19. package/public/favicon/android-chrome-512x512.png +0 -0
  20. package/public/favicon/apple-touch-icon.png +0 -0
  21. package/public/favicon/browserconfig.xml +9 -0
  22. package/public/favicon/favicon-16x16.png +0 -0
  23. package/public/favicon/favicon-32x32.png +0 -0
  24. package/public/favicon/favicon.ico +0 -0
  25. package/public/favicon/mstile-150x150.png +0 -0
  26. package/public/favicon/safari-pinned-tab.svg +17 -0
  27. package/public/favicon/site.webmanifest +19 -0
  28. package/public/images/avatar-placeholder.jpg +0 -0
  29. package/public/images/avatars/1.jpeg +0 -0
  30. package/public/images/avatars/2.jpeg +0 -0
  31. package/public/images/avatars/3.jpeg +0 -0
  32. package/public/images/avatars/300/1.jpeg +0 -0
  33. package/public/images/avatars/300/2.jpeg +0 -0
  34. package/public/images/avatars/300/3.jpeg +0 -0
  35. package/public/images/avatars/300/4.jpeg +0 -0
  36. package/public/images/avatars/4.jpeg +0 -0
  37. package/public/images/avatars/5.jpeg +0 -0
  38. package/public/images/avatars/500/1.jpeg +0 -0
  39. package/public/images/avatars/500/2.jpeg +0 -0
  40. package/public/images/avatars/500/3.jpeg +0 -0
  41. package/public/images/avatars/500/4.jpeg +0 -0
  42. package/public/images/avatars/6.jpeg +0 -0
  43. package/public/images/avatars/7.jpeg +0 -0
  44. package/public/images/avatars/8.jpeg +0 -0
  45. package/public/images/block-code.png +0 -0
  46. package/public/images/blocks/colleagues.png +0 -0
  47. package/public/images/blocks/content.png +0 -0
  48. package/public/images/blocks/cta.png +0 -0
  49. package/public/images/blocks/features.png +0 -0
  50. package/public/images/blocks/footer.png +0 -0
  51. package/public/images/blocks/header.png +0 -0
  52. package/public/images/blocks/hero.png +0 -0
  53. package/public/images/blocks/intro.png +0 -0
  54. package/public/images/blocks/posts.png +0 -0
  55. package/public/images/blocks/prices.png +0 -0
  56. package/public/images/blocks/reviews.png +0 -0
  57. package/public/images/component-code.png +0 -0
  58. package/public/images/logo-placeholder.svg +1 -0
  59. package/public/images/placeholder-center.webp +0 -0
  60. package/public/images/placeholder-landscape-dark.png +0 -0
  61. package/public/images/placeholder-landscape.webp +0 -0
  62. package/public/images/placeholder-portrait.webp +0 -0
  63. package/public/images/placeholder-right.webp +0 -0
  64. package/public/images/placeholder.webp +0 -0
  65. package/siteicon.png +0 -0
  66. package/src/blocks/Categories.astro +12 -0
  67. package/src/blocks/Colleagues.astro +12 -0
  68. package/src/blocks/Contact.astro +152 -0
  69. package/src/blocks/Content.astro +12 -0
  70. package/src/blocks/Cta.astro +14 -0
  71. package/src/blocks/Features.astro +11 -0
  72. package/src/blocks/Footer.astro +7 -0
  73. package/src/blocks/Header.astro +7 -0
  74. package/src/blocks/Hero.astro +16 -0
  75. package/src/blocks/Intro.astro +19 -0
  76. package/src/blocks/Jobs.astro +12 -0
  77. package/src/blocks/Posts.astro +11 -0
  78. package/src/blocks/Prices.astro +22 -0
  79. package/src/blocks/Product.astro +64 -0
  80. package/src/blocks/Products.astro +11 -0
  81. package/src/blocks/Reviews.astro +13 -0
  82. package/src/components/{base/Avatar.astro → Avatar.astro} +7 -11
  83. package/src/components/{base/Badge.astro → Badge.astro} +36 -22
  84. package/src/components/{structure/Bento.astro → Bento.astro} +6 -9
  85. package/src/components/Block.astro +157 -0
  86. package/src/components/Blocks.astro +5 -0
  87. package/src/components/Box.astro +60 -0
  88. package/src/components/Button.astro +140 -0
  89. package/src/components/Card.astro +212 -0
  90. package/src/components/{structure/Carousel.astro → Carousel.astro} +13 -16
  91. package/src/components/Checkbox.astro +63 -0
  92. package/src/components/{structure/Column.astro → Column.astro} +18 -9
  93. package/src/components/Dialog.astro +65 -0
  94. package/src/components/Drawer.astro +99 -0
  95. package/src/components/Footer.astro +144 -0
  96. package/src/components/{structure/Grid.astro → Grid.astro} +7 -10
  97. package/src/components/Head.astro +85 -0
  98. package/src/components/Header.astro +204 -0
  99. package/src/components/Heading.astro +79 -0
  100. package/src/components/{base/Icon.astro → Icon.astro} +7 -9
  101. package/src/components/{base/Image.astro → Image.astro} +32 -30
  102. package/src/components/Input.astro +119 -0
  103. package/src/components/{typography/Label.astro → Label.astro} +12 -12
  104. package/src/components/{typography/Link.astro → Link.astro} +15 -13
  105. package/src/components/List.astro +41 -0
  106. package/src/components/{structure/Masonry.astro → Masonry.astro} +9 -11
  107. package/src/components/Rating.astro +82 -0
  108. package/src/components/{_Component.astro → Root.astro} +9 -11
  109. package/src/components/{structure/Row.astro → Row.astro} +6 -9
  110. package/src/components/Search.astro +62 -0
  111. package/src/components/Section.astro +274 -0
  112. package/src/components/Select.astro +144 -0
  113. package/src/components/Sidebar.astro +71 -0
  114. package/src/components/{structure/Split.astro → Split.astro} +6 -9
  115. package/src/components/{structure/Spread.astro → Spread.astro} +6 -9
  116. package/src/components/Switch.astro +114 -0
  117. package/src/components/Table.astro +121 -0
  118. package/src/components/Tagline.astro +35 -0
  119. package/src/components/Text.astro +43 -0
  120. package/src/components/Textarea.astro +105 -0
  121. package/src/components/Toc.astro +52 -0
  122. package/src/components/{structure/Wrap.astro → Wrap.astro} +5 -10
  123. package/src/components/docs/DecorativeBox.astro +15 -0
  124. package/src/components/docs/PropsTable.astro +95 -0
  125. package/src/components/experimental/Channel.astro +15 -10
  126. package/src/components/experimental/Form.astro +34 -0
  127. package/src/components/experimental/Gallery.astro +180 -0
  128. package/src/components/experimental/GalleryVertical.astro +161 -0
  129. package/src/components/{base → experimental}/Logo.astro +3 -5
  130. package/src/components/experimental/Price.astro +17 -15
  131. package/src/components/experimental/Prose.astro +154 -0
  132. package/src/components/{base → experimental}/Video.astro +1 -1
  133. package/src/components/experimental/Window.astro +173 -0
  134. package/src/content/config.ts +16 -13
  135. package/src/content/pages/_changelog.mdx +10 -0
  136. package/src/content/pages/_segment/footer.mdx +244 -0
  137. package/src/content/pages/_segment/header.mdx +210 -0
  138. package/src/content/pages/base/_dialog.mdx +17 -0
  139. package/src/content/pages/base/_drawer.mdx +17 -0
  140. package/src/content/pages/base/_image.mdx +14 -0
  141. package/src/content/pages/base/_switch.mdx +33 -0
  142. package/src/content/pages/base/badge.mdx +70 -0
  143. package/src/content/pages/base/button.mdx +71 -0
  144. package/src/content/pages/base/card.mdx +114 -0
  145. package/src/content/pages/base/checkbox.mdx +43 -0
  146. package/src/content/pages/base/icon.mdx +54 -0
  147. package/src/content/pages/base/input.mdx +67 -0
  148. package/src/content/pages/base/rating.mdx +66 -0
  149. package/src/content/pages/base/section.mdx +79 -0
  150. package/src/content/pages/base/select.mdx +77 -0
  151. package/src/content/pages/base/table.mdx +133 -0
  152. package/src/content/pages/base/textarea.mdx +73 -0
  153. package/src/content/pages/blocks/_banner.mdx +13 -0
  154. package/src/content/pages/blocks/_categories.mdx +149 -0
  155. package/src/content/pages/blocks/_jobs.mdx +37 -0
  156. package/src/content/pages/blocks/_product.mdx +29 -0
  157. package/src/content/pages/blocks/_products.mdx +55 -0
  158. package/src/content/pages/blocks/_stats.mdx +34 -0
  159. package/src/content/pages/blocks/colleagues.mdx +42 -0
  160. package/src/content/pages/blocks/content.mdx +101 -0
  161. package/src/content/pages/blocks/cta.mdx +192 -0
  162. package/src/content/pages/blocks/features.mdx +134 -0
  163. package/src/content/pages/blocks/footer.mdx +71 -0
  164. package/src/content/pages/blocks/header.mdx +192 -0
  165. package/src/content/pages/blocks/hero.mdx +97 -0
  166. package/src/content/pages/blocks/intro.mdx +132 -0
  167. package/src/content/pages/blocks/posts.mdx +40 -0
  168. package/src/content/pages/blocks/prices.mdx +126 -0
  169. package/src/content/pages/blocks/reviews.mdx +249 -0
  170. package/src/content/pages/blocks.mdx +10 -0
  171. package/src/content/pages/index.mdx +65 -0
  172. package/src/content/pages/overview/frameworks.mdx +180 -0
  173. package/src/content/pages/overview/installation.mdx +20 -0
  174. package/src/content/pages/overview/integration.mdx +37 -0
  175. package/src/content/pages/overview/introduction.mdx +20 -0
  176. package/src/content/pages/overview/theming.mdx +83 -0
  177. package/src/content/pages/structure/_row.mdx +23 -0
  178. package/src/content/pages/structure/_wrap.mdx +25 -0
  179. package/src/content/pages/structure/carousel.mdx +31 -0
  180. package/src/content/pages/structure/column.mdx +21 -0
  181. package/src/content/pages/structure/grid.mdx +26 -0
  182. package/src/content/pages/structure/masonry.mdx +32 -0
  183. package/src/content/pages/structure/split.mdx +21 -0
  184. package/src/content/pages/structure/spread.mdx +21 -0
  185. package/src/content/pages/typography/_tagline.mdx +36 -0
  186. package/src/content/pages/typography/heading.mdx +74 -0
  187. package/src/content/pages/typography/label.mdx +42 -0
  188. package/src/content/pages/typography/link.mdx +63 -0
  189. package/src/content/pages/typography/list.mdx +52 -0
  190. package/src/content/pages/typography/text.mdx +62 -0
  191. package/src/content/records/record.yml +1 -0
  192. package/src/content/settings/base.yml +48 -0
  193. package/src/content/settings/components.yml +27 -0
  194. package/src/css/color.css +6 -67
  195. package/src/css/custom.css +59 -0
  196. package/src/css/size.css +130 -0
  197. package/src/css/space.css +47 -26
  198. package/src/css/styles.css +4 -2
  199. package/src/env.d.ts +1 -1
  200. package/src/integration/generate-colors.ts +637 -0
  201. package/src/integration/index.ts +158 -0
  202. package/src/integration/tailwind-plugin.ts +80 -0
  203. package/src/integration/unocss-preset.ts +84 -0
  204. package/src/layouts/BlockLayout.astro +24 -0
  205. package/src/layouts/BlockOverviewLayout.astro +39 -0
  206. package/src/layouts/ComponentLayout.astro +23 -0
  207. package/src/layouts/JobsLayout.astro +40 -0
  208. package/src/layouts/Layout.astro +168 -0
  209. package/src/layouts/OverviewLayout.astro +45 -0
  210. package/src/layouts/PageLayout.astro +32 -0
  211. package/src/layouts/PostLayout.astro +32 -0
  212. package/src/layouts/ProductLayout.astro +31 -0
  213. package/src/pages/[...page].astro +41 -0
  214. package/src/schemas/base.ts +81 -0
  215. package/src/schemas/block.ts +15 -0
  216. package/src/schemas/card.ts +3 -0
  217. package/src/schemas/page.ts +43 -0
  218. package/src/schemas/utils.ts +22 -0
  219. package/src/utils/mergeEntries.ts +28 -0
  220. package/tsconfig.json +10 -1
  221. package/.astro/settings.json +0 -5
  222. package/.astro/types.d.ts +0 -147
  223. package/.env +0 -1
  224. package/astro.config.mjs +0 -6
  225. package/src/components/_Block.astro +0 -20
  226. package/src/components/_Blocks.astro +0 -11
  227. package/src/components/_Children.astro +0 -31
  228. package/src/components/_archive/Body.astro +0 -37
  229. package/src/components/_archive/Main.astro +0 -28
  230. package/src/components/_archive/Nav.astro +0 -50
  231. package/src/components/_todo/Form.astro +0 -36
  232. package/src/components/_todo/Prose.astro +0 -139
  233. package/src/components/_todo/Writeup.astro +0 -24
  234. package/src/components/base/Button.astro +0 -123
  235. package/src/components/base/Rating.astro +0 -47
  236. package/src/components/base/checkbox/Checkbox.astro +0 -52
  237. package/src/components/base/checkbox/CheckboxElement.astro +0 -31
  238. package/src/components/base/input/Input.astro +0 -79
  239. package/src/components/base/input/InputElement.astro +0 -69
  240. package/src/components/base/radio/Radio.astro +0 -66
  241. package/src/components/base/radio/RadioElement.astro +0 -34
  242. package/src/components/base/select/Select.astro +0 -90
  243. package/src/components/base/select/SelectElement.astro +0 -56
  244. package/src/components/base/select/SelectOption.astro +0 -32
  245. package/src/components/base/switch/Switch.astro +0 -55
  246. package/src/components/base/switch/SwitchElement.astro +0 -84
  247. package/src/components/base/table/Table.astro +0 -57
  248. package/src/components/base/table/TableBody.astro +0 -38
  249. package/src/components/base/table/TableCell.astro +0 -30
  250. package/src/components/base/table/TableFooter.astro +0 -48
  251. package/src/components/base/table/TableHead.astro +0 -31
  252. package/src/components/base/table/TableHeader.astro +0 -44
  253. package/src/components/base/table/TableRow.astro +0 -46
  254. package/src/components/base/textarea/Textarea.astro +0 -79
  255. package/src/components/base/textarea/TextareaElement.astro +0 -68
  256. package/src/components/segment/Box.astro +0 -46
  257. package/src/components/segment/Card.astro +0 -114
  258. package/src/components/segment/Footer.astro +0 -94
  259. package/src/components/segment/Header.astro +0 -100
  260. package/src/components/segment/Section.astro +0 -103
  261. package/src/components/segment/_regels.md +0 -32
  262. package/src/components/typography/Heading.astro +0 -66
  263. package/src/components/typography/List.astro +0 -47
  264. package/src/components/typography/ListItem.astro +0 -36
  265. package/src/components/typography/Paragraph.astro +0 -36
  266. package/src/components/typography/Tagline.astro +0 -36
  267. package/src/components/typography/Text.astro +0 -37
  268. package/src/components/utility/Head.astro +0 -83
  269. package/src/components/utility/Layout.astro +0 -46
  270. package/src/content/pages/index.md +0 -2
  271. package/src/css/color.scss +0 -289
  272. package/src/css/size.scss +0 -296
  273. package/src/css/utils.scss +0 -16
  274. package/src/index.ts +0 -71
  275. package/src/integration/integration.ts +0 -88
  276. package/src/integration/tailwind.ts +0 -34
  277. package/src/integration/unocss.ts +0 -38
  278. /package/src/{_archive → utils/_archive}/Childmorphic.ts +0 -0
  279. /package/src/{_archive → utils/_archive}/getAllCollections.ts +0 -0
  280. /package/src/{_archive → utils/_archive}/getCollectionCascade.ts +0 -0
  281. /package/src/{_archive → utils/_archive}/getPathname.ts +0 -0
  282. /package/src/{_archive → utils/_archive}/staticPageSchema.ts +0 -0
  283. /package/src/{_archive → utils/_archive}/transform/transform.ts +0 -0
  284. /package/src/{_archive → utils/_archive}/transform/transformCasing.ts +0 -0
  285. /package/src/{_archive → utils/_archive}/transform/transformReferences.ts +0 -0
  286. /package/src/{_archive → utils/_archive}/transform/transformSelfs.ts +0 -0
  287. /package/src/{_archive → utils/_archive}/transform/transformUnderscores.ts +0 -0
@@ -1,36 +0,0 @@
1
- ---
2
- import type { HTMLTag, Polymorphic } from 'astro/types'
3
- import Component from '../_Component.astro'
4
-
5
- type Props<As extends HTMLTag = 'p'> = Polymorphic<{ as: As }> & {
6
- size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
7
- color?: 'base' | 'brand'
8
- contrast?: boolean
9
- html?: string
10
- text?: string
11
- }
12
-
13
- const { as = 'p', ...rest } = Astro.props
14
- ---
15
-
16
- <Component
17
- class:list={['paragraph']}
18
- {as}
19
- {...rest}
20
- >
21
- <slot />
22
- </Component>
23
-
24
- <style is:global lang="scss">
25
- @import '../../css/utils.scss';
26
-
27
- @include component('paragraph') {
28
- margin: 0;
29
- max-width: calc(var(--space-4) * 36);
30
- color: var(--text);
31
- font-weight: var(--font-weight);
32
- font-size: var(--text-2);
33
- line-height: 1.625;
34
- font-family: var(--font-family);
35
- }
36
- </style>
@@ -1,36 +0,0 @@
1
- ---
2
- import type { HTMLTag, Polymorphic } from 'astro/types'
3
- import Component from '../_Component.astro'
4
-
5
- type Props<As extends HTMLTag = 'span'> = Polymorphic<{ as: As }> & {
6
- size?: 'sm' | 'md' | 'lg'
7
- color?: 'base' | 'brand'
8
- contrast?: boolean
9
- html?: string
10
- text?: string
11
- }
12
-
13
- const { as = 'span', ...rest } = Astro.props
14
- ---
15
-
16
- <Component
17
- class:list={['tagline']}
18
- {as}
19
- {...rest}
20
- >
21
- <slot />
22
- </Component>
23
-
24
- <style is:global lang="scss">
25
- @import '../../css/utils.scss';
26
-
27
- @include component('tagline') {
28
- margin: 0;
29
- max-width: calc(var(--space-4) * 36);
30
- color: var(--text);
31
- font-weight: var(--font-weight);
32
- font-size: var(--text-1);
33
- line-height: 1.25;
34
- font-family: var(--font-family);
35
- }
36
- </style>
@@ -1,37 +0,0 @@
1
- ---
2
- import type { HTMLTag, Polymorphic } from 'astro/types'
3
- import Component from '../_Component.astro'
4
-
5
- type Props<As extends HTMLTag = 'p'> = Polymorphic<{ as: As }> & {
6
- size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
7
- color?: 'base' | 'brand'
8
- contrast?: boolean
9
- html?: string
10
- text?: string
11
- }
12
-
13
- const { html, as = html ? 'div' : 'p', ...rest } = Astro.props
14
- ---
15
-
16
- <Component
17
- class:list={['text']}
18
- {as}
19
- {html}
20
- {...rest}
21
- >
22
- <slot />
23
- </Component>
24
-
25
- <style is:global lang="scss">
26
- @import '../../css/utils.scss';
27
-
28
- @include component('text') {
29
- margin: 0;
30
- max-width: calc(var(--space-4) * 36);
31
- color: var(--text, var(--color-11));
32
- font-weight: var(--font-weight);
33
- font-size: var(--text-2);
34
- line-height: 1.625;
35
- font-family: var(--font-family);
36
- }
37
- </style>
@@ -1,83 +0,0 @@
1
- ---
2
- import { SEO } from 'astro-seo'
3
- import { ViewTransitions } from 'astro:transitions'
4
-
5
- type Props = {
6
- title?: string
7
- description?: string
8
- image?: string
9
- }
10
-
11
- const { title, description, image } = Astro.props
12
- ---
13
-
14
- <head>
15
- <meta charset="UTF-8" />
16
- <meta
17
- content="width=device-width, initial-scale=1, viewport-fit=cover"
18
- name="viewport"
19
- />
20
- <meta
21
- name="generator"
22
- content={Astro.generator}
23
- />
24
-
25
- <ViewTransitions />
26
- <SEO
27
- title={title || undefined}
28
- description={description || undefined}
29
- openGraph={title && image
30
- ? {
31
- basic: {
32
- title: title,
33
- type: 'website',
34
- image: Astro.site + image,
35
- },
36
- image: {
37
- url: Astro.site + image,
38
- alt: title,
39
- },
40
- }
41
- : undefined}
42
- />
43
-
44
- <!-- Favicon -->
45
- <link
46
- rel="apple-touch-icon"
47
- sizes="76x76"
48
- href="/favicon/apple-touch-icon.png"
49
- />
50
- <link
51
- rel="icon"
52
- type="image/png"
53
- sizes="32x32"
54
- href="/favicon/favicon-32x32.png"
55
- />
56
- <link
57
- rel="icon"
58
- type="image/png"
59
- sizes="16x16"
60
- href="/favicon/favicon-16x16.png"
61
- />
62
- <link
63
- rel="manifest"
64
- href="/favicon/site.webmanifest"
65
- />
66
- <link
67
- rel="mask-icon"
68
- href="/favicon/safari-pinned-tab.svg"
69
- />
70
- <link
71
- rel="shortcut icon"
72
- href="/favicon/favicon.ico"
73
- />
74
- <meta
75
- name="msapplication-config"
76
- content="/favicon/browserconfig.xml"
77
- />
78
- <meta
79
- name="theme-color"
80
- content="#000000"
81
- />
82
- <slot />
83
- </head>
@@ -1,46 +0,0 @@
1
- ---
2
- import type { ComponentProps } from 'astro/types'
3
- import Component from '../_Component.astro'
4
- import Body from '../_archive/Body.astro'
5
- import Head from './Head.astro'
6
-
7
- interface Props extends ComponentProps<typeof Component> {
8
- title?: ComponentProps<typeof Head>['title']
9
- description?: ComponentProps<typeof Head>['description']
10
- image?: ComponentProps<typeof Head>['image']
11
- meta?: ComponentProps<typeof Head>
12
- head?: ComponentProps<typeof Head>
13
- body?: ComponentProps<typeof Body>
14
- }
15
-
16
- const { title, description, image, theme, meta, head, body, ...rest } =
17
- Astro.props
18
- ---
19
-
20
- <Component
21
- class={[
22
- 'layout',
23
- {
24
- [`theme-${theme}`]: theme,
25
- },
26
- ]}
27
- as="html"
28
- if={true}
29
- {...rest}
30
- >
31
- <Head
32
- {title}
33
- {description}
34
- {image}
35
- {...meta}
36
- {...head}
37
- />
38
- <Body
39
- if={true}
40
- {theme}
41
- {...body}
42
- >
43
- <slot name="before" />
44
- <slot />
45
- </Body>
46
- </Component>
@@ -1,2 +0,0 @@
1
- ---
2
- ---
@@ -1,289 +0,0 @@
1
- :where(:root),
2
- :where(.theme-light),
3
- [data-theme='light'] {
4
- --brand-1: #fbf9f8;
5
- --brand-2: #fff1ec;
6
- --brand-3: #ffe6db;
7
- --brand-4: #ffd3c2;
8
- --brand-5: #ffc4ad;
9
- --brand-6: #ffb397;
10
- --brand-7: #ff9e7e;
11
- --brand-8: #f5845f;
12
- --brand-9: #f50;
13
- --brand-10: #ed4d00;
14
- --brand-11: #ca4900;
15
- --brand-12: #5b2a1a;
16
- --brand-contrast: #fff;
17
-
18
- --base-1: #f9f9fa;
19
- --base-2: #f5f6f8;
20
- --base-3: #ececf0;
21
- --base-4: #e3e4e9;
22
- --base-5: #dcdde2;
23
- --base-6: #d4d5dc;
24
- --base-7: #c8cad2;
25
- --base-8: #b5b7c2;
26
- --base-9: #878994;
27
- --base-10: #7c7e89;
28
- --base-11: #5e6068;
29
- --base-12: #1e1f24;
30
- --base-contrast: #ffffff;
31
-
32
- color-scheme: light;
33
- }
34
-
35
- :where(.theme-dark),
36
- [data-theme='dark'] {
37
- --brand-1: #160f0d;
38
- --brand-2: #201511;
39
- --brand-3: #38190f;
40
- --brand-4: #4f1602;
41
- --brand-5: #5e1e07;
42
- --brand-6: #6f2c15;
43
- --brand-7: #873c23;
44
- --brand-8: #ae4d2c;
45
- --brand-9: #f50;
46
- --brand-10: #ed4d00;
47
- --brand-11: #ff976f;
48
- --brand-12: #ffd8c9;
49
- --brand-contrast: #fff;
50
-
51
- --base-1: #101113;
52
- --base-2: #18191b;
53
- --base-3: #212225;
54
- --base-4: #282a2d;
55
- --base-5: #2e3135;
56
- --base-6: #373a3f;
57
- --base-7: #44474e;
58
- --base-8: #5c616a;
59
- --base-9: #696e77;
60
- --base-10: #777b84;
61
- --base-11: #b0b4ba;
62
- --base-12: #edeef0;
63
- --base-contrast: #ffffff;
64
-
65
- color-scheme: dark;
66
- }
67
-
68
- /* --------------------------- */
69
- /* Generate colors */
70
- /* --------------------------- */
71
-
72
- // @mixin selector($selector,
73
- // $selectors: $selector) {
74
- // #{$selectors},
75
- // #{$selector},
76
- // #{$selector}
77
- // :is(
78
- // [class*='theme-'],
79
- // [class*='color-'],
80
- // [class*='variant-'],
81
- // .contrast
82
- // ):not(
83
- // #{$selector}
84
- // [class*='color-']
85
- // :is([class*='theme-'], [class*='variant-'], .contrast)
86
- // )
87
- // :not(
88
- // #{$selector}
89
- // [class*='color-']:is([class*='theme-'], [class*='variant-'], .contrast)
90
- // ) {
91
- // @content;
92
- // }
93
- // }
94
-
95
- // :where(:root),
96
- // :where(.theme-light),
97
- // :where(.theme-dark),
98
- // .color-base,
99
- // .color-base
100
- // .full:not(.color-base [class*='color-']):not(
101
- // .color-base [class*='color-'] .full
102
- // ) {
103
- // --color-1: var(--base-1);
104
- // --color-2: var(--base-2);
105
- // --color-3: var(--base-3);
106
- // --color-4: var(--base-4);
107
- // --color-5: var(--base-5);
108
- // --color-6: var(--base-6);
109
- // --color-7: var(--base-7);
110
- // --color-8: var(--base-8);
111
- // --color-9: var(--base-9);
112
- // --color-10: var(--base-10);
113
- // --color-11: var(--base-11);
114
- // --color-12: var(--base-12);
115
- // --color-contrast: var(--base-contrast);
116
- // }
117
-
118
- // .color-brand,
119
- // .color-brand
120
- // .full:not(.color-brand [class*='color-']):not(
121
- // .color-brand [class*='color-'] .full
122
- // ) {
123
- // --color-1: var(--brand-1);
124
- // --color-2: var(--brand-2);
125
- // --color-3: var(--brand-3);
126
- // --color-4: var(--brand-4);
127
- // --color-5: var(--brand-5);
128
- // --color-6: var(--brand-6);
129
- // --color-7: var(--brand-7);
130
- // --color-8: var(--brand-8);
131
- // --color-9: var(--brand-9);
132
- // --color-10: var(--brand-10);
133
- // --color-11: var(--brand-11);
134
- // --color-12: var(--brand-12);
135
- // --color-contrast: var(--brand-contrast);
136
- // }
137
-
138
- // * {
139
- // --background: var(--color-1);
140
- // --border: var(--color-6);
141
- // --text: var(--color-11);
142
-
143
- // &:where(.contrast &, .contrast) {
144
- // --text: var(--color-12);
145
- // }
146
- // }
147
-
148
- // .variant-solid,
149
- // .variant-solid
150
- // .full:not(.variant-solid [class*='variant-']):not(
151
- // .variant-solid [class*='variant-'] .full
152
- // ) {
153
- // --background: var(--color-9);
154
- // --border: transparent;
155
- // --text: var(--color-contrast);
156
-
157
- // &:is(.contrast &, .contrast) {
158
- // --text: var(--color-1);
159
- // --background: var(--color-12);
160
- // }
161
-
162
- // &:is(a, button, [href]) {
163
- // &:hover {
164
- // --background: var(--color-10);
165
-
166
- // &:is(.contrast &, .contrast) {
167
- // --background: var(--color-12);
168
- // }
169
- // }
170
- // }
171
- // }
172
-
173
- // .variant-surface,
174
- // .variant-surface
175
- // .full:not(.variant-surface [class*='variant-']):not(
176
- // .variant-surface [class*='variant-'] .full
177
- // ) {
178
- // --background: var(--color-3);
179
- // --border: var(--color-7);
180
- // --text: var(--color-11);
181
-
182
- // &:is(.contrast &, .contrast) {
183
- // --text: var(--color-12);
184
- // }
185
-
186
- // &:is(a, button, [href]) {
187
- // &:hover {
188
- // --background: var(--color-4);
189
- // --border: var(--color-8);
190
- // }
191
-
192
- // &:active {
193
- // --background: var(--color-5);
194
- // }
195
- // }
196
- // }
197
-
198
- // .variant-soft,
199
- // .variant-soft
200
- // .full:not(.variant-soft [class*='variant-']):not(
201
- // .variant-soft [class*='variant-'] .full
202
- // ) {
203
- // --background: var(--color-3);
204
- // --border: transparent;
205
- // --text: var(--color-11);
206
-
207
- // &:is(.contrast &, .contrast) {
208
- // --text: var(--color-12);
209
- // }
210
-
211
- // &:is(a, button, [href]) {
212
- // &:hover {
213
- // --background: var(--color-4);
214
- // }
215
-
216
- // &:active {
217
- // --background: var(--color-5);
218
- // }
219
- // }
220
- // }
221
-
222
- // .variant-outline,
223
- // .variant-outline
224
- // .full:not(.variant-outline [class*='variant-']):not(
225
- // .variant-outline [class*='variant-'] .full
226
- // ) {
227
- // --background: transparent;
228
- // --border: var(--color-7);
229
- // --text: var(--color-11);
230
-
231
- // &:is(.contrast &, .contrast) {
232
- // --text: var(--color-12);
233
- // }
234
-
235
- // &:is(a, button, [href]) {
236
- // &:hover {
237
- // --background: var(--color-3);
238
- // --border: var(--color-8);
239
- // }
240
-
241
- // &:active {
242
- // --background: var(--color-5);
243
- // }
244
- // }
245
- // }
246
-
247
- // .variant-ghost,
248
- // .variant-ghost
249
- // .full:not(.variant-ghost [class*='variant-']):not(
250
- // .variant-ghost [class*='variant-'] .full
251
- // ) {
252
- // --background: transparent;
253
- // --border: transparent;
254
- // --text: var(--color-11);
255
-
256
- // &:is(.contrast &, .contrast) {
257
- // --text: var(--color-12);
258
- // }
259
-
260
- // &:is(a, button, [href]) {
261
- // &:hover {
262
- // --background: var(--color-3);
263
- // }
264
-
265
- // &:active {
266
- // --background: var(--color-4);
267
- // }
268
- // }
269
- // }
270
-
271
- // .variant-subtle,
272
- // .variant-subtle
273
- // .full:not(.variant-subtle [class*='variant-']):not(
274
- // .variant-subtle [class*='variant-'] .full
275
- // ) {
276
- // --background: var(--color-2);
277
- // --border: var(--color-6);
278
- // --text: var(--color-11);
279
-
280
- // &:is(.contrast &, .contrast) {
281
- // --text: var(--color-12);
282
- // }
283
-
284
- // &:is(a, button, [href]) {
285
- // &:hover {
286
- // --border: var(--color-8);
287
- // }
288
- // }
289
- // }