@imaginario27/air-ui-ds 1.0.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 (220) hide show
  1. package/assets/css/defaults.css +55 -0
  2. package/assets/css/main.css +238 -0
  3. package/assets/css/theme/colors.css +106 -0
  4. package/assets/css/theme/primitives.css +105 -0
  5. package/assets/css/theme/ui-theme.css +454 -0
  6. package/assets/images/placeholders/missing-image-placeholder.png +0 -0
  7. package/components/accordions/Accordion.vue +31 -0
  8. package/components/accordions/AccordionGroup.vue +78 -0
  9. package/components/accordions/AccordionItem.vue +39 -0
  10. package/components/action-panels/ActionPanel.vue +49 -0
  11. package/components/alerts/Alert.vue +159 -0
  12. package/components/avatars/Avatar.vue +152 -0
  13. package/components/avatars/AvatarStack.vue +97 -0
  14. package/components/avatars/AvatarStackCounter.vue +74 -0
  15. package/components/badges/Badge.vue +221 -0
  16. package/components/badges/BadgeStack.vue +110 -0
  17. package/components/badges/IconBadge.vue +57 -0
  18. package/components/badges/IconTextBadge.vue +50 -0
  19. package/components/breadcrumbs/Breadcrumbs.vue +54 -0
  20. package/components/buttons/ActionButton.vue +395 -0
  21. package/components/buttons/ActionIconButton.vue +283 -0
  22. package/components/buttons/AlertButton.vue +125 -0
  23. package/components/buttons/AlertIconButton.vue +105 -0
  24. package/components/buttons/PaginationButton.vue +45 -0
  25. package/components/buttons/options/OptionButton.vue +61 -0
  26. package/components/buttons/options/OptionButtonGroup.vue +155 -0
  27. package/components/buttons/options/OptionButtonSlider.vue +154 -0
  28. package/components/buttons/toggle/ToggleButton.vue +142 -0
  29. package/components/buttons/toggle/ToggleButtonGroup.vue +73 -0
  30. package/components/cards/Card.vue +33 -0
  31. package/components/cards/CardActions.vue +5 -0
  32. package/components/cards/CardBody.vue +5 -0
  33. package/components/cards/CardFooter.vue +20 -0
  34. package/components/cards/CardHeader.vue +5 -0
  35. package/components/cards/CardTitle.vue +13 -0
  36. package/components/cards/specific/ContactDetailsCard.vue +47 -0
  37. package/components/cards/specific/FeatureCard.vue +59 -0
  38. package/components/cards/specific/HelpTopicCard.vue +62 -0
  39. package/components/cards/specific/MetricCard.vue +42 -0
  40. package/components/cards/specific/TestimonialCard.vue +57 -0
  41. package/components/cards/specific/subscription/CurrentActiveSubscriptionCard.vue +105 -0
  42. package/components/cards/specific/subscription/SubscriptionPlanCard.vue +178 -0
  43. package/components/cards/specific/subscription/UniqueSubscriptionPlanCard.vue +106 -0
  44. package/components/collapsibles/Collapsible.vue +33 -0
  45. package/components/content/ContentItem.vue +144 -0
  46. package/components/content/ContentItemImage.vue +125 -0
  47. package/components/dividers/Divider.vue +35 -0
  48. package/components/dividers/TextLineDivider.vue +58 -0
  49. package/components/dropdowns/DropdownMenu.vue +207 -0
  50. package/components/dropdowns/DropdownMenuActions.vue +11 -0
  51. package/components/dropdowns/DropdownMenuItem.vue +240 -0
  52. package/components/dropdowns/DropdownSelect.vue +469 -0
  53. package/components/dropdowns/DropdownSelectItem.vue +182 -0
  54. package/components/empty-states/EmptyState.vue +170 -0
  55. package/components/features/Feature.vue +77 -0
  56. package/components/forms/DataDetails.vue +7 -0
  57. package/components/forms/DataDetailsActions.vue +23 -0
  58. package/components/forms/DataDetailsFieldGroup.vue +35 -0
  59. package/components/forms/DataDetailsRow.vue +22 -0
  60. package/components/forms/Form.vue +25 -0
  61. package/components/forms/FormActions.vue +23 -0
  62. package/components/forms/FormFieldGroup.vue +35 -0
  63. package/components/forms/FormRow.vue +22 -0
  64. package/components/forms/fields/ButtonField.vue +119 -0
  65. package/components/forms/fields/CheckboxField.vue +205 -0
  66. package/components/forms/fields/DataField.vue +99 -0
  67. package/components/forms/fields/FileUploadField.vue +326 -0
  68. package/components/forms/fields/InputField.vue +371 -0
  69. package/components/forms/fields/OptionButtonsGroupField.vue +120 -0
  70. package/components/forms/fields/RepeaterField.vue +109 -0
  71. package/components/forms/fields/SearchField.vue +184 -0
  72. package/components/forms/fields/SelectField.vue +233 -0
  73. package/components/forms/fields/SliderField.vue +759 -0
  74. package/components/forms/fields/SwitchField.vue +257 -0
  75. package/components/forms/fields/TextareaField.vue +205 -0
  76. package/components/forms/fields/ToggleButtonsGroupField.vue +65 -0
  77. package/components/forms/fields/radio/RadioButtonField.vue +238 -0
  78. package/components/forms/fields/radio/RadioField.vue +157 -0
  79. package/components/forms/fields/radio/RadioGroupField.vue +156 -0
  80. package/components/icons/ContainedIcon.vue +130 -0
  81. package/components/images/QRCode.vue +124 -0
  82. package/components/layouts/ContainerWrapper.vue +13 -0
  83. package/components/layouts/ContentBody.vue +30 -0
  84. package/components/layouts/Grid.vue +25 -0
  85. package/components/layouts/Heading.vue +159 -0
  86. package/components/layouts/MainContent.vue +26 -0
  87. package/components/layouts/MaxWidthContainer.vue +15 -0
  88. package/components/layouts/Overtitle.vue +25 -0
  89. package/components/layouts/headers/CompactHeader.vue +181 -0
  90. package/components/layouts/headers/PageHeader.vue +102 -0
  91. package/components/layouts/headers/WebAppHeader.vue +54 -0
  92. package/components/layouts/section/Section.vue +90 -0
  93. package/components/layouts/section/SectionBody.vue +12 -0
  94. package/components/layouts/section/SectionHeader.vue +12 -0
  95. package/components/layouts/section/SectionTitle.vue +13 -0
  96. package/components/lists/List.vue +69 -0
  97. package/components/lists/ListItem.vue +58 -0
  98. package/components/loaders/Loading.vue +83 -0
  99. package/components/loaders/LoadingScreen.vue +285 -0
  100. package/components/modals/DangerModalDialog.vue +149 -0
  101. package/components/modals/InfoModalDialog.vue +143 -0
  102. package/components/modals/ModalActions.vue +22 -0
  103. package/components/modals/ModalContent.vue +5 -0
  104. package/components/modals/ModalDescription.vue +5 -0
  105. package/components/modals/ModalDialog.vue +122 -0
  106. package/components/modals/ModalHeaderGroup.vue +19 -0
  107. package/components/modals/ModalHeadings.vue +5 -0
  108. package/components/modals/ModalSubtitle.vue +14 -0
  109. package/components/modals/ModalTitle.vue +14 -0
  110. package/components/modals/SuccessModalDialog.vue +90 -0
  111. package/components/modules/AppLogo.vue +46 -0
  112. package/components/modules/SVGImage.vue +44 -0
  113. package/components/navigation/links/NavLink.vue +112 -0
  114. package/components/navigation/nav-menu/NavFooterMenu.vue +91 -0
  115. package/components/navigation/nav-menu/NavMenu.vue +36 -0
  116. package/components/navigation/nav-menu/NavMenuItem.vue +44 -0
  117. package/components/navigation/nav-sidebar/BottomUserNavBar.vue +83 -0
  118. package/components/navigation/nav-sidebar/NavSidebar.vue +172 -0
  119. package/components/navigation/nav-sidebar/NavSidebarMenu.vue +14 -0
  120. package/components/navigation/nav-sidebar/NavSidebarMenuItem.vue +76 -0
  121. package/components/navigation/nav-sidebar/NavSidebarMenuSectionTitle.vue +54 -0
  122. package/components/navigation/table-of-contents/TableOfContents.vue +35 -0
  123. package/components/navigation/table-of-contents/TableOfContentsItem.vue +40 -0
  124. package/components/navigation/table-of-contents/TableOfContentsSidebar.vue +29 -0
  125. package/components/pagination/ButtonPagination.vue +274 -0
  126. package/components/pagination/RowsPerPage.vue +60 -0
  127. package/components/pagination/SimplePagination.vue +97 -0
  128. package/components/password/SecurePasswordCondition.vue +41 -0
  129. package/components/password/SecurePasswordConditions.vue +83 -0
  130. package/components/placeholders/ContentPlaceholder.vue +41 -0
  131. package/components/popovers/Popover.vue +128 -0
  132. package/components/rating/InteractiveRating.vue +94 -0
  133. package/components/rating/Rating.vue +60 -0
  134. package/components/rating/RatingItem.vue +54 -0
  135. package/components/skeletons/Skeleton.vue +11 -0
  136. package/components/spinners/Spinner.vue +13 -0
  137. package/components/steppers/CircleStepper.vue +122 -0
  138. package/components/steppers/Step.vue +72 -0
  139. package/components/steppers/StepIndicator.vue +228 -0
  140. package/components/steppers/TabStepper.vue +126 -0
  141. package/components/steppers/vertical-stepper/VerticalStep.vue +223 -0
  142. package/components/steppers/vertical-stepper/VerticalStepper.vue +63 -0
  143. package/components/tables/Table.vue +26 -0
  144. package/components/tables/TableBody.vue +5 -0
  145. package/components/tables/TableCell.vue +34 -0
  146. package/components/tables/TableCellActions.vue +7 -0
  147. package/components/tables/TableHeader.vue +5 -0
  148. package/components/tables/TableHeaderCell.vue +15 -0
  149. package/components/tables/TableRow.vue +14 -0
  150. package/components/tables/TableWrapper.vue +12 -0
  151. package/components/tabs/Tab.vue +145 -0
  152. package/components/tabs/TabBar.vue +64 -0
  153. package/components/tabs/TabContent.vue +5 -0
  154. package/components/tabs/TabsContainer.vue +5 -0
  155. package/components/transitions/HorizontalExpansionTransition.vue +12 -0
  156. package/components/transitions/VerticalExpansionTransition.vue +14 -0
  157. package/components/users/Author.vue +113 -0
  158. package/components/users/User.vue +53 -0
  159. package/composables/useAccordion.ts +12 -0
  160. package/composables/useDarkMode.ts +9 -0
  161. package/composables/useDropdownMenu.ts +25 -0
  162. package/composables/useForm.ts +134 -0
  163. package/composables/useFormValidationMode.ts +11 -0
  164. package/composables/useIsMobile.ts +27 -0
  165. package/composables/useMobileSidebar.ts +32 -0
  166. package/composables/useShiki.ts +12 -0
  167. package/composables/useTableOfContents.ts +50 -0
  168. package/composables/useToastifyConfig.ts +7 -0
  169. package/eslint.config.mjs +14 -0
  170. package/models/constants/app.ts +8 -0
  171. package/models/constants/form.ts +22 -0
  172. package/models/enums/alerts.ts +6 -0
  173. package/models/enums/aspect-ratios.ts +9 -0
  174. package/models/enums/avatars.ts +21 -0
  175. package/models/enums/badges.ts +10 -0
  176. package/models/enums/buttons.ts +38 -0
  177. package/models/enums/colors.ts +9 -0
  178. package/models/enums/content.ts +4 -0
  179. package/models/enums/counters.ts +4 -0
  180. package/models/enums/dividers.ts +9 -0
  181. package/models/enums/dropdowns.ts +18 -0
  182. package/models/enums/effects.ts +6 -0
  183. package/models/enums/emptyPlaceholders.ts +5 -0
  184. package/models/enums/formFields.ts +19 -0
  185. package/models/enums/formValidations.ts +4 -0
  186. package/models/enums/headings.ts +11 -0
  187. package/models/enums/icons.ts +22 -0
  188. package/models/enums/images.ts +16 -0
  189. package/models/enums/lists.ts +10 -0
  190. package/models/enums/loaders.ts +15 -0
  191. package/models/enums/navigation.ts +18 -0
  192. package/models/enums/order.ts +10 -0
  193. package/models/enums/orientations.ts +4 -0
  194. package/models/enums/pages.ts +10 -0
  195. package/models/enums/positions.ts +21 -0
  196. package/models/enums/rating.ts +12 -0
  197. package/models/enums/sections.ts +8 -0
  198. package/models/enums/selects.ts +16 -0
  199. package/models/enums/sliders.ts +4 -0
  200. package/models/enums/steppers.ts +20 -0
  201. package/models/enums/tabs.ts +11 -0
  202. package/models/enums/triggers.ts +4 -0
  203. package/models/types/accordions.ts +6 -0
  204. package/models/types/avatars.ts +4 -0
  205. package/models/types/badges.ts +4 -0
  206. package/models/types/buttons.ts +26 -0
  207. package/models/types/dropdowns.ts +20 -0
  208. package/models/types/forms.ts +14 -0
  209. package/models/types/navigation.ts +11 -0
  210. package/models/types/pagination.ts +4 -0
  211. package/models/types/pdfExportTable.ts +6 -0
  212. package/models/types/radio.ts +9 -0
  213. package/models/types/selects.ts +14 -0
  214. package/models/types/steppers.ts +17 -0
  215. package/models/types/tableOfContent.ts +6 -0
  216. package/models/types/tabs.ts +7 -0
  217. package/nuxt.config.ts +40 -0
  218. package/package.json +57 -0
  219. package/plugins/vue3-toastify.ts +14 -0
  220. package/tsconfig.json +7 -0
package/assets/css/defaults.css ADDED
@@ -0,0 +1,55 @@
1
+
2
+ html {
3
+ scroll-behavior: smooth;
4
+ }
5
+
6
+ body {
7
+ font-family: 'Inter', sans-serif;
8
+ font-size: 16px;
9
+ color: var(--color-text-default);
10
+ overflow-x: hidden; /* Fix when sidebar open */
11
+ background-color: var(--color-background-surface);
12
+ }
13
+
14
+ /* Locks and unlocks the background scroll while modal is open */
15
+ html.modal-open,
16
+ body.modal-open {
17
+ overflow: hidden !important;
18
+ }
19
+
20
+ aside {
21
+ nav {
22
+ .router-link-active, .router-link-active svg {
23
+ color: var(--color-text-primary-brand-on-neutral-hover-bg);
24
+ }
25
+
26
+ .router-link-active {
27
+ background: var(--color-background-neutral-hover);
28
+ }
29
+ }
30
+ }
31
+
32
+ .responsive-svg svg {
33
+ width: 100%;
34
+ height: auto;
35
+ }
36
+
37
+ a:hover,
38
+ button:hover {
39
+ cursor: pointer;
40
+ }
41
+
42
+ button:disabled {
43
+ cursor: not-allowed;
44
+ opacity: var(--opacity-disabled);
45
+ }
46
+
47
+ /* DROPZONE */
48
+ .custom-dropzone-preview-wrapper .dropzone-wrapper {
49
+ border: none!important;
50
+ padding: 0!important;
51
+ }
52
+
53
+ .vue3-toastify__toast-container {
54
+ z-index: 99999 !important;
55
+ }
package/assets/css/main.css ADDED
@@ -0,0 +1,238 @@
1
+ @import "tailwindcss";
2
+ @import "./theme/primitives.css";
3
+ @import "./theme/colors.css";
4
+ @import "./theme/ui-theme.css";
5
+ @import "./defaults.css";
6
+
7
+ @theme {
8
+ /* Disables Tailwind default colors */
9
+ /* --color-*: initial; */
10
+
11
+ --color-background-container-surface: var(--color-background-container-surface);
12
+ --color-background-overlay: var(--color-background-overlay);
13
+ --color-background-surface: var(--color-background-surface);
14
+ --color-background-danger-bold: var(--color-background-danger-bold);
15
+ --color-background-danger-subtler: var(--color-background-danger-subtler);
16
+ --color-background-danger-subtlest: var(--color-background-danger-subtlest);
17
+ --color-background-delete-default: var(--color-background-delete-default);
18
+ --color-background-delete-hover: var(--color-background-delete-hover);
19
+ --color-background-delete-on-neutral-hover: var(--color-background-delete-on-neutral-hover);
20
+ --color-background-delete-soft: var(--color-background-delete-soft);
21
+ --color-background-delete-soft-hover: var(--color-background-delete-soft-hover);
22
+ --color-background-info-bold: var(--color-background-info-bold);
23
+ --color-background-info-subtler: var(--color-background-info-subtler);
24
+ --color-background-info-subtlest: var(--color-background-info-subtlest);
25
+ --color-background-neutral-active: var(--color-background-neutral-active);
26
+ --color-background-neutral-bold: var(--color-background-neutral-bold);
27
+ --color-background-neutral-default: var(--color-background-neutral-default);
28
+ --color-background-neutral-disabled: var(--color-background-neutral-disabled);
29
+ --color-background-neutral-filled-transparent: var(--color-background-neutral-filled-transparent);
30
+ --color-background-neutral-hover: var(--color-background-neutral-hover);
31
+ --color-background-neutral-hover-subtle: var(--color-background-neutral-hover-subtle);
32
+ --color-background-neutral-sublter: var(--color-background-neutral-sublter);
33
+ --color-background-neutral-subtle: var(--color-background-neutral-subtle);
34
+ --color-background-neutral-subtlest: var(--color-background-neutral-subtlest);
35
+ --color-background-neutral-subtlest-on-container-surface: var(--color-background-neutral-subtlest-on-container-surface);
36
+ --color-background-neutral-filled-default: var(--color-background-neutral-filled-default);
37
+ --color-background-neutral-filled-hover: var(--color-background-neutral-filled-hover);
38
+ --color-background-primary-brand-active: var(--color-background-primary-brand-active);
39
+ --color-background-primary-brand-checked: var(--color-background-primary-brand-checked);
40
+ --color-background-primary-brand-checked-subtlest: var(--color-background-primary-brand-checked-subtlest);
41
+ --color-background-primary-brand-default: var(--color-background-primary-brand-default);
42
+ --color-background-primary-brand-hover: var(--color-background-primary-brand-hover);
43
+ --color-background-primary-brand-on-checked-subtle-bg: var(--color-background-primary-brand-on-checked-subtle-bg);
44
+ --color-background-primary-brand-soft: var(--color-background-primary-brand-soft);
45
+ --color-background-primary-brand-soft-hover: var(--color-background-primary-brand-soft-hover);
46
+ --color-background-primary-brand-subtle-active: var(--color-background-primary-brand-subtle-active);
47
+ --color-background-secondary-brand-checked: var(--color-background-secondary-brand-checked);
48
+ --color-background-secondary-brand-checked-subtlest: var(--color-background-secondary-brand-checked-subtlest);
49
+ --color-background-secondary-brand-default: var(--color-background-secondary-brand-default);
50
+ --color-background-secondary-brand-hover: var(--color-background-secondary-brand-hover);
51
+ --color-background-secondary-brand-on-checked-subtle-bg: var(--color-background-secondary-brand-on-checked-subtle-bg);
52
+ --color-background-secondary-brand-soft: var(--color-background-secondary-brand-soft);
53
+ --color-background-success-bold: var(--color-background-success-bold);
54
+ --color-background-success-subtler: var(--color-background-success-subtler);
55
+ --color-background-success-subtlest: var(--color-background-success-subtlest);
56
+ --color-background-warning-bold: var(--color-background-warning-bold);
57
+ --color-background-warning-subtler: var(--color-background-warning-subtler);
58
+ --color-background-warning-subtlest: var(--color-background-warning-subtlest);
59
+ --color-border-danger: var(--color-border-danger);
60
+ --color-border-default: var(--color-border-default);
61
+ --color-border-error: var(--color-border-error);
62
+ --color-border-inactive: var(--color-border-inactive);
63
+ --color-border-info: var(--color-border-info);
64
+ --color-border-secondary-brand: var(--color-border-secondary-brand);
65
+ --color-border-success: var(--color-border-success);
66
+ --color-border-warning: var(--color-border-warning);
67
+ --color-border-delete-default: var(--color-border-delete-default);
68
+ --color-border-delete-subtle: var(--color-border-delete-subtle);
69
+ --color-border-neutral-disabled: var(--color-border-neutral-disabled);
70
+ --color-border-neutral-hover: var(--color-border-neutral-hover);
71
+ --color-border-neutral-on-filled: var(--color-border-neutral-on-filled);
72
+ --color-border-neutral-stacked: var(--color-border-neutral-stacked);
73
+ --color-border-neutral-subtle: var(--color-border-neutral-subtle);
74
+ --color-border-primary-brand-active: var(--color-border-primary-brand-active);
75
+ --color-border-primary-brand-default: var(--color-border-primary-brand-default);
76
+ --color-border-primary-brand-hover: var(--color-border-primary-brand-hover);
77
+ --color-chart-variant-five: var(--color-chart-variant-five);
78
+ --color-chart-variant-four: var(--color-chart-variant-four);
79
+ --color-chart-variant-one: var(--color-chart-variant-one);
80
+ --color-chart-variant-six: var(--color-chart-variant-six);
81
+ --color-chart-variant-three: var(--color-chart-variant-three);
82
+ --color-chart-variant-two: var(--color-chart-variant-two);
83
+ --color-icon-danger: var(--color-icon-danger);
84
+ --color-icon-danger-subtle: var(--color-icon-danger-subtle);
85
+ --color-icon-default: var(--color-icon-default);
86
+ --color-icon-delete: var(--color-icon-delete);
87
+ --color-icon-error: var(--color-icon-error);
88
+ --color-icon-info: var(--color-icon-info);
89
+ --color-icon-info-subtle-strong: var(--color-icon-info-subtle-strong);
90
+ --color-icon-rating: var(--color-icon-rating);
91
+ --color-icon-success: var(--color-icon-success);
92
+ --color-icon-success-subtle: var(--color-icon-success-subtle);
93
+ --color-icon-warning: var(--color-icon-warning);
94
+ --color-icon-warning-on-bg: var(--color-icon-warning-on-bg);
95
+ --color-icon-warning-subtle: var(--color-icon-warning-subtle);
96
+ --color-icon-neutral-disabled: var(--color-icon-neutral-disabled);
97
+ --color-icon-neutral-inactive: var(--color-icon-neutral-inactive);
98
+ --color-icon-neutral-on-filled-bg: var(--color-icon-neutral-on-filled-bg);
99
+ --color-icon-neutral-on-filled-secondary-brand-bg: var(--color-icon-neutral-on-filled-secondary-brand-bg);
100
+ --color-icon-neutral-on-monochrome-active-bg: var(--color-icon-neutral-on-monochrome-active-bg);
101
+ --color-icon-neutral-on-monochrome-hover-bg: var(--color-icon-neutral-on-monochrome-hover-bg);
102
+ --color-icon-neutral-on-neutral-bg: var(--color-icon-neutral-on-neutral-bg);
103
+ --color-icon-neutral-on-primary-brand-soft-bg: var(--color-icon-neutral-on-primary-brand-soft-bg);
104
+ --color-icon-neutral-on-subtlest-bg: var(--color-icon-neutral-on-subtlest-bg);
105
+ --color-icon-neutral-subtle: var(--color-icon-neutral-subtle);
106
+ --color-icon-neutral-subtle-on-subtler-bg: var(--color-icon-neutral-subtle-on-subtler-bg);
107
+ --color-icon-neutral-subtler: var(--color-icon-neutral-subtler);
108
+ --color-icon-neutral-subtlest: var(--color-icon-neutral-subtlest);
109
+ --color-icon-primary-brand-active: var(--color-icon-primary-brand-active);
110
+ --color-icon-primary-brand-default: var(--color-icon-primary-brand-default);
111
+ --color-icon-primary-brand-hover: var(--color-icon-primary-brand-hover);
112
+ --color-icon-primary-brand-on-neutral-hover-bg: var(--color-icon-primary-brand-on-neutral-hover-bg);
113
+ --color-icon-primary-brand-on-soft-bg: var(--color-icon-primary-brand-on-soft-bg);
114
+ --color-icon-primary-brand-rating: var(--color-icon-primary-brand-rating);
115
+ --color-icon-secondary-brand-active: var(--color-icon-secondary-brand-active);
116
+ --color-icon-secondary-brand-default: var(--color-icon-secondary-brand-default);
117
+ --color-text-danger: var(--color-text-danger);
118
+ --color-text-default: var(--color-text-default);
119
+ --color-text-delete: var(--color-text-delete);
120
+ --color-text-error: var(--color-text-error);
121
+ --color-text-info: var(--color-text-info);
122
+ --color-text-success: var(--color-text-success);
123
+ --color-text-warning: var(--color-text-warning);
124
+ --color-text-warning-on-bg: var(--color-text-warning-on-bg);
125
+ --color-text-neutral-disabled: var(--color-text-neutral-disabled);
126
+ --color-text-neutral-inactive: var(--color-text-neutral-inactive);
127
+ --color-text-neutral-on-filled: var(--color-text-neutral-on-filled);
128
+ --color-text-neutral-on-monochrome-active-bg: var(--color-text-neutral-on-monochrome-active-bg);
129
+ --color-text-neutral-on-monochrome-hover-bg: var(--color-text-neutral-on-monochrome-hover-bg);
130
+ --color-text-neutral-on-neutral-bg: var(--color-text-neutral-on-neutral-bg);
131
+ --color-text-neutral-on-neutral-filled-bg: var(--color-text-neutral-on-neutral-filled-bg);
132
+ --color-text-neutral-on-primary-brand-soft-bg: var(--color-text-neutral-on-primary-brand-soft-bg);
133
+ --color-text-neutral-subtle: var(--color-text-neutral-subtle);
134
+ --color-text-neutral-subtle-on-disabled-bg: var(--color-text-neutral-subtle-on-disabled-bg);
135
+ --color-text-neutral-subtle-on-subtler-bg: var(--color-text-neutral-subtle-on-subtler-bg);
136
+ --color-text-neutral-subtler: var(--color-text-neutral-subtler);
137
+ --color-text-neutral-subtlest: var(--color-text-neutral-subtlest);
138
+ --color-text-primary-brand-active: var(--color-text-primary-brand-active);
139
+ --color-text-primary-brand-default: var(--color-text-primary-brand-default);
140
+ --color-text-primary-brand-hover: var(--color-text-primary-brand-hover);
141
+ --color-text-primary-brand-on-checked-subtlest: var(--color-text-primary-brand-on-checked-subtlest);
142
+ --color-text-primary-brand-on-neutral-hover-bg: var(--color-text-primary-brand-on-neutral-hover-bg);
143
+ --color-text-primary-brand-on-soft-bg: var(--color-text-primary-brand-on-soft-bg);
144
+ --color-text-secondary-brand-default: var(--color-text-secondary-brand-default);
145
+ --color-text-secondary-brand-on-checked-subtlest: var(--color-text-secondary-brand-on-checked-subtlest);
146
+ --color-text-secondary-brand-on-soft-bg: var(--color-text-secondary-brand-on-soft-bg);
147
+ --color-theme-danger-100: var(--color-theme-danger-100);
148
+ --color-theme-danger-200: var(--color-theme-danger-200);
149
+ --color-theme-danger-300: var(--color-theme-danger-300);
150
+ --color-theme-danger-400: var(--color-theme-danger-400);
151
+ --color-theme-danger-50: var(--color-theme-danger-50);
152
+ --color-theme-danger-500: var(--color-theme-danger-500);
153
+ --color-theme-danger-600: var(--color-theme-danger-600);
154
+ --color-theme-danger-700: var(--color-theme-danger-700);
155
+ --color-theme-danger-800: var(--color-theme-danger-800);
156
+ --color-theme-danger-900: var(--color-theme-danger-900);
157
+ --color-theme-danger-950: var(--color-theme-danger-950);
158
+ --color-theme-info-100: var(--color-theme-info-100);
159
+ --color-theme-info-200: var(--color-theme-info-200);
160
+ --color-theme-info-300: var(--color-theme-info-300);
161
+ --color-theme-info-400: var(--color-theme-info-400);
162
+ --color-theme-info-50: var(--color-theme-info-50);
163
+ --color-theme-info-500: var(--color-theme-info-500);
164
+ --color-theme-info-600: var(--color-theme-info-600);
165
+ --color-theme-info-700: var(--color-theme-info-700);
166
+ --color-theme-info-800: var(--color-theme-info-800);
167
+ --color-theme-info-900: var(--color-theme-info-900);
168
+ --color-theme-info-950: var(--color-theme-info-950);
169
+ --color-theme-neutral-100: var(--color-theme-neutral-100);
170
+ --color-theme-neutral-200: var(--color-theme-neutral-200);
171
+ --color-theme-neutral-300: var(--color-theme-neutral-300);
172
+ --color-theme-neutral-400: var(--color-theme-neutral-400);
173
+ --color-theme-neutral-50: var(--color-theme-neutral-50);
174
+ --color-theme-neutral-500: var(--color-theme-neutral-500);
175
+ --color-theme-neutral-600: var(--color-theme-neutral-600);
176
+ --color-theme-neutral-700: var(--color-theme-neutral-700);
177
+ --color-theme-neutral-800: var(--color-theme-neutral-800);
178
+ --color-theme-neutral-900: var(--color-theme-neutral-900);
179
+ --color-theme-neutral-950: var(--color-theme-neutral-950);
180
+ --color-theme-neutral-black: var(--color-theme-neutral-black);
181
+ --color-theme-neutral-white: var(--color-theme-neutral-white);
182
+ --color-theme-primary-brand-100: var(--color-theme-primary-brand-100);
183
+ --color-theme-primary-brand-200: var(--color-theme-primary-brand-200);
184
+ --color-theme-primary-brand-300: var(--color-theme-primary-brand-300);
185
+ --color-theme-primary-brand-400: var(--color-theme-primary-brand-400);
186
+ --color-theme-primary-brand-50: var(--color-theme-primary-brand-50);
187
+ --color-theme-primary-brand-500: var(--color-theme-primary-brand-500);
188
+ --color-theme-primary-brand-600: var(--color-theme-primary-brand-600);
189
+ --color-theme-primary-brand-700: var(--color-theme-primary-brand-700);
190
+ --color-theme-primary-brand-800: var(--color-theme-primary-brand-800);
191
+ --color-theme-primary-brand-900: var(--color-theme-primary-brand-900);
192
+ --color-theme-primary-brand-950: var(--color-theme-primary-brand-950);
193
+ --color-theme-secondary-brand-100: var(--color-theme-secondary-brand-100);
194
+ --color-theme-secondary-brand-200: var(--color-theme-secondary-brand-200);
195
+ --color-theme-secondary-brand-300: var(--color-theme-secondary-brand-300);
196
+ --color-theme-secondary-brand-400: var(--color-theme-secondary-brand-400);
197
+ --color-theme-secondary-brand-50: var(--color-theme-secondary-brand-50);
198
+ --color-theme-secondary-brand-500: var(--color-theme-secondary-brand-500);
199
+ --color-theme-secondary-brand-600: var(--color-theme-secondary-brand-600);
200
+ --color-theme-secondary-brand-700: var(--color-theme-secondary-brand-700);
201
+ --color-theme-secondary-brand-800: var(--color-theme-secondary-brand-800);
202
+ --color-theme-secondary-brand-900: var(--color-theme-secondary-brand-900);
203
+ --color-theme-secondary-brand-950: var(--color-theme-secondary-brand-950);
204
+ --color-theme-success-100: var(--color-theme-success-100);
205
+ --color-theme-success-200: var(--color-theme-success-200);
206
+ --color-theme-success-300: var(--color-theme-success-300);
207
+ --color-theme-success-400: var(--color-theme-success-400);
208
+ --color-theme-success-50: var(--color-theme-success-50);
209
+ --color-theme-success-500: var(--color-theme-success-500);
210
+ --color-theme-success-600: var(--color-theme-success-600);
211
+ --color-theme-success-700: var(--color-theme-success-700);
212
+ --color-theme-success-800: var(--color-theme-success-800);
213
+ --color-theme-success-900: var(--color-theme-success-900);
214
+ --color-theme-success-950: var(--color-theme-success-950);
215
+ --color-theme-warning-100: var(--color-theme-warning-100);
216
+ --color-theme-warning-200: var(--color-theme-warning-200);
217
+ --color-theme-warning-300: var(--color-theme-warning-300);
218
+ --color-theme-warning-400: var(--color-theme-warning-400);
219
+ --color-theme-warning-50: var(--color-theme-warning-50);
220
+ --color-theme-warning-500: var(--color-theme-warning-500);
221
+ --color-theme-warning-600: var(--color-theme-warning-600);
222
+ --color-theme-warning-700: var(--color-theme-warning-700);
223
+ --color-theme-warning-800: var(--color-theme-warning-800);
224
+ --color-theme-warning-900: var(--color-theme-warning-900);
225
+ --color-theme-warning-950: var(--color-theme-warning-950);
226
+
227
+ --opacity-disabled: var(--opacity-disabled);
228
+ --radius-button: var(--radius-button);
229
+ --spacing-column-gap: var(--spacing-column-gap);
230
+ --spacing-content-body-bottom-padding: var(--spacing-content-body-bottom-padding);
231
+ --spacing-content-side-padding: var(--spacing-content-side-padding);
232
+ --spacing-content-side-padding-mobile: var(--spacing-content-side-padding-mobile);
233
+ --spacing-section-xs: var(--spacing-section-xs);
234
+ --spacing-section-sm: var(--spacing-section-sm);
235
+ --spacing-section-md: var(--spacing-section-md);
236
+ --spacing-section-lg: var(--spacing-section-lg);
237
+ --spacing-section-xl: var(--spacing-section-xl);
238
+ }
package/assets/css/theme/colors.css ADDED
@@ -0,0 +1,106 @@
1
+ /* Color schemes*/
2
+ :root {
3
+ /* Amber */
4
+ --amber-100: #fef3c6;
5
+ --amber-200: #fee685;
6
+ --amber-300: #ffd230;
7
+ --amber-400: #ffb900;
8
+ --amber-50: #fef9e8;
9
+ --amber-500: #fe9a00;
10
+ --amber-600: #e17100;
11
+ --amber-700: #bb4d00;
12
+ --amber-800: #973c00;
13
+ --amber-900: #7a3306;
14
+ --amber-950: #461901;
15
+
16
+ /* Coral red */
17
+ --coral-red-100: #fee2e2;
18
+ --coral-red-200: #fecaca;
19
+ --coral-red-300: #fca5a5;
20
+ --coral-red-400: #f87171;
21
+ --coral-red-50: #fef2f2;
22
+ --coral-red-500: #ef4444;
23
+ --coral-red-600: #dc2626;
24
+ --coral-red-700: #b91c1c;
25
+ --coral-red-800: #991b1b;
26
+ --coral-red-900: #7f1d1d;
27
+ --coral-red-950: #450a0a;
28
+
29
+ /* Dark blue */
30
+ --dark-blue-100: #dae4ff;
31
+ --dark-blue-200: #bbcdff;
32
+ --dark-blue-300: #93abff;
33
+ --dark-blue-400: #687cff;
34
+ --dark-blue-50: #eaf1ff;
35
+ --dark-blue-500: #454fff;
36
+ --dark-blue-600: #2b25ff;
37
+ --dark-blue-700: #2319e9;
38
+ --dark-blue-800: #1c17b4;
39
+ --dark-blue-900: #1e1d92;
40
+ --dark-blue-950: #131155;
41
+
42
+ /* Emerald */
43
+ --emerald-100: #dcfce8;
44
+ --emerald-200: #bbf7d1;
45
+ --emerald-300: #86efad;
46
+ --emerald-400: #4ade80;
47
+ --emerald-50: #f0fdf5;
48
+ --emerald-500: #22c55e;
49
+ --emerald-600: #16a34a;
50
+ --emerald-700: #15803c;
51
+ --emerald-800: #166533;
52
+ --emerald-900: #14532b;
53
+ --emerald-950: #052e14;
54
+
55
+ /* Gray */
56
+ --gray-100: #efefef;
57
+ --gray-200: #dcdcdc;
58
+ --gray-300: #bdbdbd;
59
+ --gray-400: #989898;
60
+ --gray-50: #f9fafb;
61
+ --gray-500: #7c7c7c;
62
+ --gray-600: #656565;
63
+ --gray-700: #525252;
64
+ --gray-800: #464646;
65
+ --gray-900: #3d3d3d;
66
+ --gray-950: #292929;
67
+
68
+ /* Prussian blue */
69
+ --prussian-blue-100: #dff2ff;
70
+ --prussian-blue-200: #b8e6ff;
71
+ --prussian-blue-300: #79d2ff;
72
+ --prussian-blue-400: #32bcfe;
73
+ --prussian-blue-50: #f0f9ff;
74
+ --prussian-blue-500: #07a5f0;
75
+ --prussian-blue-600: #0083cd;
76
+ --prussian-blue-700: #0068a6;
77
+ --prussian-blue-800: #035889;
78
+ --prussian-blue-900: #094a71;
79
+ --prussian-blue-950: #073657;
80
+
81
+ /* Purlple heart */
82
+ --purple-heart-100: #f6e6ff;
83
+ --purple-heart-200: #eed2ff;
84
+ --purple-heart-300: #e1aeff;
85
+ --purple-heart-400: #cf7bff;
86
+ --purple-heart-50: #fbf4ff;
87
+ --purple-heart-500: #bd49ff;
88
+ --purple-heart-600: #ad25f8;
89
+ --purple-heart-700: #9615db;
90
+ --purple-heart-800: #8017b5;
91
+ --purple-heart-900: #67148f;
92
+ --purple-heart-950: #48006b;
93
+
94
+ /* Wild blue yonder */
95
+ --wild-blue-yonder-100: #eaeef5;
96
+ --wild-blue-yonder-200: #d9e1ec;
97
+ --wild-blue-yonder-300: #c1cce0;
98
+ --wild-blue-yonder-400: #a7b4d2;
99
+ --wild-blue-yonder-50: #f3f6fa;
100
+ --wild-blue-yonder-500: #919cc3;
101
+ --wild-blue-yonder-600: #747daf;
102
+ --wild-blue-yonder-700: #676e9b;
103
+ --wild-blue-yonder-800: #555c7e;
104
+ --wild-blue-yonder-900: #494e66;
105
+ --wild-blue-yonder-950: #2a2d3c;
106
+ }
package/assets/css/theme/primitives.css ADDED
@@ -0,0 +1,105 @@
1
+ /* Primitives */
2
+ :root {
3
+ /* Blur */
4
+ --blur-none: 0rem;
5
+ --blur-sm: 0.25rem;
6
+ --blur-base: 0.5rem;
7
+ --blur-md: 0.75rem;
8
+ --blur-lg: 1rem;
9
+ --blur-xl: 1.5rem;
10
+ --blur-2xl: 2.5rem;
11
+ --blur-3xl: 4rem;
12
+
13
+ /* Border width */
14
+ --border-width-0: 0rem;
15
+ --border-width-base: 0.0625rem;
16
+ --border-width-2: 0.125rem;
17
+ --border-width-4: 0.25rem;
18
+ --border-width-8: 0.5rem;
19
+
20
+ /* Leading */
21
+ --leading-3: 0.75rem;
22
+ --leading-4: 1rem;
23
+ --leading-5: 1.25rem;
24
+ --leading-6: 1.5rem;
25
+ --leading-7: 1.75rem;
26
+ --leading-8: 2rem;
27
+ --leading-9: 2.25rem;
28
+ --leading-10: 2.5rem;
29
+
30
+ /* Opacity */
31
+ --opacity-0: 0;
32
+ --opacity-5: 0.05;
33
+ --opacity-10: 0.1;
34
+ --opacity-15: 0.15;
35
+ --opacity-20: 0.2;
36
+ --opacity-25: 0.25;
37
+ --opacity-30: 0.3;
38
+ --opacity-35: 0.35;
39
+ --opacity-40: 0.4;
40
+ --opacity-45: 0.45;
41
+ --opacity-50: 0.5;
42
+ --opacity-55: 0.55;
43
+ --opacity-60: 0.6;
44
+ --opacity-65: 0.65;
45
+ --opacity-70: 0.7;
46
+ --opacity-75: 0.75;
47
+ --opacity-80: 0.8;
48
+ --opacity-85: 0.85;
49
+ --opacity-90: 0.9;
50
+ --opacity-95: 0.95;
51
+ --opacity-100: 1;
52
+
53
+
54
+ /* Rounded */
55
+ --rounded-none: 0rem;
56
+ --rounded-sm: 0.125rem;
57
+ --rounded-base: 0.25rem;
58
+ --rounded-md: 0.375rem;
59
+ --rounded-lg: 0.5rem;
60
+ --rounded-xl: 0.75rem;
61
+ --rounded-2xl: 1rem;
62
+ --rounded-3xl: 1.5rem;
63
+ --rounded-full: 624.9375rem;
64
+
65
+ /* Space */
66
+ --space-0: 0rem;
67
+ --space-0-half: 0.125rem;
68
+ --space-1: 0.25rem;
69
+ --space-1-half: 0.375rem;
70
+ --space-2: 0.5rem;
71
+ --space-2-half: 0.625rem;
72
+ --space-3: 0.75rem;
73
+ --space-3-half: 0.875rem;
74
+ --space-4: 1rem;
75
+ --space-5: 1.25rem;
76
+ --space-6: 1.5rem;
77
+ --space-7: 1.75rem;
78
+ --space-8: 2rem;
79
+ --space-9: 2.25rem;
80
+ --space-10: 2.5rem;
81
+ --space-11: 2.75rem;
82
+ --space-12: 3rem;
83
+ --space-14: 3.5rem;
84
+ --space-16: 4rem;
85
+ --space-20: 5rem;
86
+ --space-24: 6rem;
87
+ --space-28: 7rem;
88
+ --space-32: 8rem;
89
+ --space-36: 9rem;
90
+
91
+ /* Text */
92
+ --text-xs: 0.75rem;
93
+ --text-sm: 0.875rem;
94
+ --text-base: 1rem;
95
+ --text-lg: 1.125rem;
96
+ --text-xl: 1.25rem;
97
+ --text-2xl: 1.5rem;
98
+ --text-3xl: 1.875rem;
99
+ --text-4xl: 2.25rem;
100
+ --text-5xl: 3rem;
101
+ --text-6xl: 3.75rem;
102
+ --text-7xl: 4.5rem;
103
+ --text-8xl: 6rem;
104
+ --text-9xl: 8rem;
105
+ }