@avakhula/ui 0.0.10

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 (194) hide show
  1. package/.babelrc.json +14 -0
  2. package/.eslintrc.cjs +15 -0
  3. package/.nvmrc +1 -0
  4. package/.prettierrc.json +1 -0
  5. package/.storybook/intelliboardTheme.js +10 -0
  6. package/.storybook/main.js +25 -0
  7. package/.storybook/manager.js +7 -0
  8. package/.storybook/preview-head.html +11 -0
  9. package/.storybook/preview.js +24 -0
  10. package/.storybook/scss-loader.scss +6 -0
  11. package/.storybook/withSource.js +97 -0
  12. package/README.md +35 -0
  13. package/dist/favicon.ico +0 -0
  14. package/dist/index.mjs +19366 -0
  15. package/dist/index.umd.js +209 -0
  16. package/dist/style.css +1 -0
  17. package/index.html +21 -0
  18. package/package.json +63 -0
  19. package/public/favicon.ico +0 -0
  20. package/src/App.vue +37 -0
  21. package/src/EventEmmiter.js +19 -0
  22. package/src/assets/scss/mixins/dropdown-list-item.scss +45 -0
  23. package/src/assets/scss/mixins/tooltip-position.scss +147 -0
  24. package/src/assets/scss/mixins.scss +21 -0
  25. package/src/assets/scss/reset.scss +12 -0
  26. package/src/assets/scss/style.scss +73 -0
  27. package/src/assets/scss/typography.scss +155 -0
  28. package/src/assets/scss/variables/colors.scss +115 -0
  29. package/src/assets/scss/variables/shadows.scss +17 -0
  30. package/src/components/Accordion/Accordion.scss +94 -0
  31. package/src/components/Accordion/Accordion.stories.js +41 -0
  32. package/src/components/Accordion/Accordion.vue +104 -0
  33. package/src/components/Accordion/readme.mdx +38 -0
  34. package/src/components/Alert/Alert.stories.js +69 -0
  35. package/src/components/Alert/Alert.vue +131 -0
  36. package/src/components/Alert/alert.scss +166 -0
  37. package/src/components/Alert/constants.js +6 -0
  38. package/src/components/Alert/readme.mdx +63 -0
  39. package/src/components/Badge/Badge.stories.js +53 -0
  40. package/src/components/Badge/Badge.vue +58 -0
  41. package/src/components/Badge/readme.mdx +38 -0
  42. package/src/components/Breadcrumbs/Breadcrumbs.vue +98 -0
  43. package/src/components/Breadcrumbs/breadcrumbs.scss +77 -0
  44. package/src/components/Breadcrumbs/breadcrumbs.stories.js +37 -0
  45. package/src/components/Button/Button.stories.js +124 -0
  46. package/src/components/Button/Button.vue +165 -0
  47. package/src/components/Button/button.scss +217 -0
  48. package/src/components/Button/constants.js +8 -0
  49. package/src/components/Button/readme.mdx +118 -0
  50. package/src/components/ButtonGroup/ButtonGroup.stories.js +27 -0
  51. package/src/components/ButtonGroup/ButtonGroup.vue +24 -0
  52. package/src/components/ButtonGroup/readme.mdx +10 -0
  53. package/src/components/Dropdown/Dropdown.spec.js +90 -0
  54. package/src/components/Dropdown/Dropdown.stories.js +48 -0
  55. package/src/components/Dropdown/Dropdown.vue +313 -0
  56. package/src/components/Dropdown/DropdownDivider.vue +15 -0
  57. package/src/components/Dropdown/DropdownItem.vue +59 -0
  58. package/src/components/Dropdown/DropdownList.stories.js +174 -0
  59. package/src/components/Dropdown/DropdownList.vue +93 -0
  60. package/src/components/Dropdown/constants.js +10 -0
  61. package/src/components/Dropdown/readme.mdx +88 -0
  62. package/src/components/Form/CharactersCount.vue +55 -0
  63. package/src/components/Form/Checkbox/Checkbox.scss +226 -0
  64. package/src/components/Form/Checkbox/Checkbox.stories.js +63 -0
  65. package/src/components/Form/Checkbox/Checkbox.vue +128 -0
  66. package/src/components/Form/Checkbox/readme.mdx +69 -0
  67. package/src/components/Form/CheckboxGroup/CheckboxGroup.stories.js +64 -0
  68. package/src/components/Form/CheckboxGroup/CheckboxGroup.vue +87 -0
  69. package/src/components/Form/CheckboxGroup/readme.mdx +56 -0
  70. package/src/components/Form/DatePicker/DatePicker.scss +479 -0
  71. package/src/components/Form/DatePicker/DatePicker.stories.js +78 -0
  72. package/src/components/Form/DatePicker/DatePicker.vue +284 -0
  73. package/src/components/Form/DatePicker/Icons/chevron-back.js +5 -0
  74. package/src/components/Form/DatePicker/Icons/chevron-forward.js +5 -0
  75. package/src/components/Form/DatePicker/readme.mdx +115 -0
  76. package/src/components/Form/FormGroup/FormGroup.stories.js +48 -0
  77. package/src/components/Form/FormGroup/FormGroup.vue +61 -0
  78. package/src/components/Form/FormGroup/FormGroupSet.stories.js +32 -0
  79. package/src/components/Form/FormGroup/FormGroupSet.vue +75 -0
  80. package/src/components/Form/Input/Input.stories.js +137 -0
  81. package/src/components/Form/Input/Input.vue +231 -0
  82. package/src/components/Form/Input/constants.js +5 -0
  83. package/src/components/Form/Input/input.scss +133 -0
  84. package/src/components/Form/Input/readme.mdx +68 -0
  85. package/src/components/Form/Label/Label.stories.js +29 -0
  86. package/src/components/Form/Label/Label.vue +87 -0
  87. package/src/components/Form/Label/readme.mdx +25 -0
  88. package/src/components/Form/PhoneInput/PhoneInput.stories.js +43 -0
  89. package/src/components/Form/PhoneInput/PhoneInput.vue +105 -0
  90. package/src/components/Form/PhoneInput/phoneInput.scss +197 -0
  91. package/src/components/Form/PhoneInput/readme.mdx +37 -0
  92. package/src/components/Form/Radio/Radio.stories.js +34 -0
  93. package/src/components/Form/Radio/Radio.vue +109 -0
  94. package/src/components/Form/Radio/radio.scss +187 -0
  95. package/src/components/Form/Radio/readme.mdx +48 -0
  96. package/src/components/Form/TextEditor/TextEditor.stories.js +58 -0
  97. package/src/components/Form/TextEditor/TextEditor.vue +305 -0
  98. package/src/components/Form/TextEditor/icons/svg/chevron-down.svg +3 -0
  99. package/src/components/Form/TextEditor/icons/toolbarIcons.js +111 -0
  100. package/src/components/Form/TextEditor/plugins/alphabetList.js +43 -0
  101. package/src/components/Form/TextEditor/readme.mdx +59 -0
  102. package/src/components/Form/TextEditor/textEditor.scss +684 -0
  103. package/src/components/Form/Textarea/Textarea.spec.js +107 -0
  104. package/src/components/Form/Textarea/Textarea.stories.js +68 -0
  105. package/src/components/Form/Textarea/Textarea.vue +102 -0
  106. package/src/components/Form/Textarea/readme.mdx +45 -0
  107. package/src/components/Form/Textarea/textarea.scss +84 -0
  108. package/src/components/Form/Toggle/Toggle.stories.js +44 -0
  109. package/src/components/Form/Toggle/Toggle.vue +122 -0
  110. package/src/components/Form/Toggle/readme.mdx +39 -0
  111. package/src/components/Form/Toggle/toggle.scss +166 -0
  112. package/src/components/Icon.vue +41 -0
  113. package/src/components/IconButton/IconButton.scss +91 -0
  114. package/src/components/IconButton/IconButton.stories.js +115 -0
  115. package/src/components/IconButton/IconButton.vue +100 -0
  116. package/src/components/IconButton/constants.js +14 -0
  117. package/src/components/IconButton/readme.mdx +66 -0
  118. package/src/components/List.vue +150 -0
  119. package/src/components/Modal/Modal.stories.js +48 -0
  120. package/src/components/Modal/Modal.vue +231 -0
  121. package/src/components/Modal/readme.mdx +76 -0
  122. package/src/components/Pagination/LimitSelector.vue +73 -0
  123. package/src/components/Pagination/Pagination.stories.js +54 -0
  124. package/src/components/Pagination/Pagination.vue +227 -0
  125. package/src/components/Pagination/pagination.scss +189 -0
  126. package/src/components/Popover/Popover.stories.js +46 -0
  127. package/src/components/Popover/Popover.vue +81 -0
  128. package/src/components/Popover/constants.js +14 -0
  129. package/src/components/Popover/popover.scss +26 -0
  130. package/src/components/Popover/readme.mdx +42 -0
  131. package/src/components/ProgressBar/ProgressBar.stories.js +90 -0
  132. package/src/components/ProgressBar/ProgressBar.vue +58 -0
  133. package/src/components/ProgressBar/constants.js +6 -0
  134. package/src/components/ProgressBar/progressBar.scss +116 -0
  135. package/src/components/ProgressBar/readme.mdx +67 -0
  136. package/src/components/Sorting/Sorting.stories.js +35 -0
  137. package/src/components/Sorting/Sorting.vue +128 -0
  138. package/src/components/Sorting/constants.js +10 -0
  139. package/src/components/Sorting/sorting.scss +87 -0
  140. package/src/components/SplitButton/SplitButton.stories.js +39 -0
  141. package/src/components/SplitButton/SplitButton.vue +132 -0
  142. package/src/components/SplitButton/SplitButtonItem.vue +34 -0
  143. package/src/components/SplitButton/constants.js +4 -0
  144. package/src/components/SplitButton/readme.mdx +77 -0
  145. package/src/components/SplitButton/splitButton.scss +161 -0
  146. package/src/components/StatusIndicator/StatusIndicator.stories.js +40 -0
  147. package/src/components/StatusIndicator/StatusIndicator.vue +52 -0
  148. package/src/components/StatusIndicator/constants.js +10 -0
  149. package/src/components/StatusIndicator/icons.js +48 -0
  150. package/src/components/StatusIndicator/readme.mdx +21 -0
  151. package/src/components/Table/Cells/Cell.vue +71 -0
  152. package/src/components/Table/Cells/CheckboxCell.vue +48 -0
  153. package/src/components/Table/Row.vue +26 -0
  154. package/src/components/Table/Table.stories.js +59 -0
  155. package/src/components/Table/Table.vue +36 -0
  156. package/src/components/Tabs/Tab.vue +37 -0
  157. package/src/components/Tabs/TabDropdown.vue +93 -0
  158. package/src/components/Tabs/Tabs.stories.js +57 -0
  159. package/src/components/Tabs/Tabs.vue +94 -0
  160. package/src/components/Tabs/tabs.scss +157 -0
  161. package/src/components/TagPill/TagPill.stories.js +30 -0
  162. package/src/components/TagPill/TagPill.vue +133 -0
  163. package/src/components/TagPill/constants.js +9 -0
  164. package/src/components/TagPill/readme.mdx +37 -0
  165. package/src/components/ToggleTip/ToggleTip.stories.js +98 -0
  166. package/src/components/ToggleTip/ToggleTip.vue +112 -0
  167. package/src/components/ToggleTip/constants.js +14 -0
  168. package/src/components/ToggleTip/readme.mdx +46 -0
  169. package/src/components/ToggleTip/toggleTip.scss +55 -0
  170. package/src/components/Tooltip/Tooltip.stories.js +56 -0
  171. package/src/components/Tooltip/Tooltip.vue +49 -0
  172. package/src/components/Tooltip/readme.mdx +43 -0
  173. package/src/components/TreeSelect/Option.vue +325 -0
  174. package/src/components/TreeSelect/Select.stories.js +349 -0
  175. package/src/components/TreeSelect/Select.vue +909 -0
  176. package/src/components/TreeSelect/TreeSelect.stories.js +270 -0
  177. package/src/components/TreeSelect/scss/option.scss +204 -0
  178. package/src/components/TreeSelect/scss/select.scss +166 -0
  179. package/src/constants/events.js +2 -0
  180. package/src/constants/keyCodes.js +8 -0
  181. package/src/directives/outside/outside.js +81 -0
  182. package/src/directives/outside/outside.stories.js +29 -0
  183. package/src/directives/outside/readme.mdx +24 -0
  184. package/src/helpers/generateUID.js +3 -0
  185. package/src/helpers/getHrefFromID.js +3 -0
  186. package/src/helpers/multiLineOverflows.js +3 -0
  187. package/src/helpers/removeEvents.js +9 -0
  188. package/src/index.js +49 -0
  189. package/src/main.js +12 -0
  190. package/src/stories/link.readme.mdx +57 -0
  191. package/src/stories/link.stories.js +59 -0
  192. package/static/Logo.svg +25 -0
  193. package/static/docks/button.pdf +147566 -0
  194. package/vite.config.js +47 -0
package/index.html ADDED
@@ -0,0 +1,21 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" href="/favicon.ico" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Vite App</title>
8
+ </head>
9
+ <body>
10
+ <div id="app"></div>
11
+ <script
12
+ type="module"
13
+ src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
14
+ ></script>
15
+ <script
16
+ nomodule
17
+ src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
18
+ ></script>
19
+ <script type="module" src="/src/main.js"></script>
20
+ </body>
21
+ </html>
package/package.json ADDED
@@ -0,0 +1,63 @@
1
+ {
2
+ "name": "@avakhula/ui",
3
+ "version": "0.0.10",
4
+ "main": "dist/index.umd.js",
5
+ "module": "dist/index.mjs",
6
+ "source": "src/index.js",
7
+ "publishConfig": {
8
+ "access": "public",
9
+ "registry": "https://registry.npmjs.org/"
10
+ },
11
+ "scripts": {
12
+ "dev": "vite",
13
+ "build": "vite build",
14
+ "preview": "vite preview",
15
+ "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --ignore-path .gitignore",
16
+ "test:unit": "vitest",
17
+ "test:unit:coverage": "vitest run --coverage",
18
+ "storybook": "storybook dev 6006",
19
+ "build-storybook": "storybook build"
20
+ },
21
+ "dependencies": {
22
+ "@vueup/vue-quill": "^1.1.0",
23
+ "mitt": "^3.0.0",
24
+ "vue": "^3.2.45"
25
+ },
26
+ "devDependencies": {
27
+ "@babel/core": "^7.20.7",
28
+ "@babel/preset-env": "^7.21.4",
29
+ "@rushstack/eslint-patch": "^1.1.4",
30
+ "@storybook/addon-a11y": "^7.0.1",
31
+ "@storybook/addon-actions": "^7.0.1",
32
+ "@storybook/addon-docs": "^7.0.1",
33
+ "@storybook/addon-essentials": "^7.0.1",
34
+ "@storybook/addon-interactions": "^7.0.1",
35
+ "@storybook/addon-links": "^7.0.1",
36
+ "@storybook/addon-mdx-gfm": "^7.0.2",
37
+ "@storybook/testing-library": "^0.0.14-next.2",
38
+ "@storybook/vue3": "^7.0.1",
39
+ "@storybook/vue3-vite": "^7.0.2",
40
+ "@vitejs/plugin-vue": "^4.0.0",
41
+ "@vitest/coverage-c8": "^0.28.4",
42
+ "@vue/eslint-config-prettier": "^7.0.0",
43
+ "@vue/test-utils": "^2.2.10",
44
+ "babel-loader": "^8.3.0",
45
+ "eslint": "^8.22.0",
46
+ "eslint-plugin-storybook": "^0.6.10",
47
+ "eslint-plugin-vue": "^9.3.0",
48
+ "flatpickr": "^4.6.13",
49
+ "jsdom": "^21.1.0",
50
+ "lodash.kebabcase": "^4.1.1",
51
+ "mark.js": "^8.11.1",
52
+ "prettier": "^2.7.1",
53
+ "react": "^18.2.0",
54
+ "react-dom": "^18.2.0",
55
+ "sass": "^1.57.1",
56
+ "sass-loader": "^13.2.0",
57
+ "storybook": "^7.0.2",
58
+ "vite": "^4.0.0",
59
+ "vitest": "^0.28.4",
60
+ "vue-loader": "^16.8.3",
61
+ "vue-tel-input": "^8.1.1"
62
+ }
63
+ }
package/public/favicon.ico ADDED
Binary file
package/src/App.vue ADDED
@@ -0,0 +1,37 @@
1
+ <template>
2
+ <button @click="onClick">
3
+ test
4
+ </button>
5
+
6
+ <ib-modal :active="active" @close="onClose" :class-list="'test'">
7
+ <template #body>
8
+ test
9
+ </template>
10
+ </ib-modal>
11
+
12
+ </template>
13
+
14
+ <script>
15
+ import IbModal from "./components/Modal/Modal.vue"
16
+
17
+ export default {
18
+ components: {
19
+ IbModal,
20
+ },
21
+ data() {
22
+ return {
23
+ active: true,
24
+ };
25
+ },
26
+ methods: {
27
+ onClick() {
28
+ this.active = true;
29
+ },
30
+
31
+ onClose() {
32
+ console.log("close");
33
+ this.active = false;
34
+ }
35
+ },
36
+ };
37
+ </script>
package/src/EventEmmiter.js ADDED
@@ -0,0 +1,19 @@
1
+ import mitt from "mitt";
2
+
3
+ export default class {
4
+ constructor() {
5
+ this.provider = mitt();
6
+ }
7
+
8
+ $on(event, callback) {
9
+ this.provider.on(event, callback);
10
+ }
11
+
12
+ $off(event, callback) {
13
+ this.provider.off(event, callback);
14
+ }
15
+
16
+ $emit(event, args) {
17
+ this.provider.emit(event, args);
18
+ }
19
+ }
package/src/assets/scss/mixins/dropdown-list-item.scss ADDED
@@ -0,0 +1,45 @@
1
+ @import "../variables/colors.scss";
2
+ @import "../typography.scss";
3
+ @import "../mixins.scss";
4
+
5
+ @mixin DropdownListItem {
6
+ .ib-dropdown-item {
7
+ @include Ib-H4-regular;
8
+ padding: 8.5px 15px 13px;
9
+ background-color: transparent;
10
+ border: none;
11
+ border-left: 2px solid transparent;
12
+ display: inline-block;
13
+ text-decoration: none;
14
+ text-align: start;
15
+ outline: none;
16
+ color: $neutral-900;
17
+ min-width: 100%;
18
+ width: max-content;
19
+ max-width: inherit;
20
+ cursor: pointer;
21
+ transition: background-color 0.3s, border-color 0.3s;
22
+ @include lineClamp(1);
23
+
24
+ p {
25
+ @include lineClamp(1);
26
+ }
27
+
28
+ &:hover {
29
+ background-color: $gray-100;
30
+ }
31
+
32
+ &:focus {
33
+ @include focus();
34
+ }
35
+
36
+ &.active {
37
+ background-color: $gray-100;
38
+ border-left-color: $blue-900;
39
+
40
+ &:hover {
41
+ background-color: $blue-50;
42
+ }
43
+ }
44
+ }
45
+ }
package/src/assets/scss/mixins/tooltip-position.scss ADDED
@@ -0,0 +1,147 @@
1
+ @mixin TooltipPosition {
2
+ &::before {
3
+ content: "";
4
+ width: 0;
5
+ height: 0;
6
+ border-style: solid;
7
+ border-width: 4px 4px 0 4px;
8
+ border-color: $background transparent transparent transparent;
9
+ position: absolute;
10
+ }
11
+
12
+ &.ib {
13
+ &-top-Left {
14
+ bottom: calc(100% + 5px);
15
+ right: calc(50% - 14px);
16
+
17
+ &::before {
18
+ bottom: -4px;
19
+ right: 10px;
20
+ }
21
+ }
22
+
23
+ &-top-center {
24
+ bottom: calc(100% + 5px);
25
+ right: 50%;
26
+ transform: translateX(50%);
27
+
28
+ &::before {
29
+ bottom: -4px;
30
+ right: 50%;
31
+ transform: translateX(50%);
32
+ }
33
+ }
34
+
35
+ &-top-right {
36
+ bottom: calc(100% + 5px);
37
+ left: calc(50% - 14px);
38
+
39
+ &::before {
40
+ bottom: -4px;
41
+ left: 10px;
42
+ }
43
+ }
44
+
45
+ &-right-top {
46
+ left: calc(100% + 5px);
47
+ bottom: calc(50% - 14px);
48
+
49
+ &::before {
50
+ left: -6px;
51
+ bottom: 10px;
52
+ transform: rotate(90deg);
53
+ }
54
+ }
55
+
56
+ &-right-center {
57
+ bottom: 50%;
58
+ transform: translateY(50%);
59
+ left: calc(100% + 5px);
60
+
61
+ &::before {
62
+ left: -8px;
63
+ top: 50%;
64
+ transform: rotate(90deg) translateY(-50%);
65
+ }
66
+ }
67
+
68
+ &-right-bottom {
69
+ left: calc(100% + 5px);
70
+ top: calc(50% - 10px);
71
+
72
+ &::before {
73
+ top: 10px;
74
+ left: -6px;
75
+ transform: rotate(90deg);
76
+ }
77
+ }
78
+
79
+ &-bottom-left {
80
+ top: calc(100% + 5px);
81
+ right: calc(50% - 14px);
82
+
83
+ &::before {
84
+ top: -4px;
85
+ right: 10px;
86
+ transform: rotate(180deg);
87
+ }
88
+ }
89
+
90
+ &-bottom-center {
91
+ top: calc(100% + 5px);
92
+ right: 50%;
93
+ transform: translateX(50%);
94
+
95
+ &::before {
96
+ top: -4px;
97
+ right: 50%;
98
+ transform: rotate(180deg) translateX(-50%);
99
+ }
100
+ }
101
+
102
+ &-bottom-right {
103
+ top: calc(100% + 5px);
104
+ left: calc(50% - 14px);
105
+
106
+ &::before {
107
+ top: -4px;
108
+ left: 10px;
109
+ transform: rotate(180deg);
110
+ }
111
+ }
112
+
113
+ &-left-top {
114
+ right: calc(100% + 5px);
115
+ bottom: calc(50% - 14px);
116
+
117
+ &::before {
118
+ right: -6px;
119
+ bottom: 10px;
120
+ transform: rotate(-90deg);
121
+ }
122
+ }
123
+
124
+ &-left-center {
125
+ bottom: 50%;
126
+ transform: translateY(50%);
127
+ right: calc(100% + 5px);
128
+
129
+ &::before {
130
+ right: -8px;
131
+ top: 50%;
132
+ transform: rotate(-90deg) translateY(-50%);
133
+ }
134
+ }
135
+
136
+ &-left-bottom {
137
+ right: calc(100% + 5px);
138
+ top: calc(50% - 10px);
139
+
140
+ &::before {
141
+ top: 10px;
142
+ right: -6px;
143
+ transform: rotate(-90deg);
144
+ }
145
+ }
146
+ }
147
+ }
package/src/assets/scss/mixins.scss ADDED
@@ -0,0 +1,21 @@
1
+ @import "./variables/colors.scss";
2
+
3
+ @mixin outline($offset: -2px, $color: $blue-700) {
4
+ outline-offset: $offset;
5
+ outline: 2px solid $color!important;
6
+ }
7
+
8
+ @mixin focus($offset: -2px, $color: $blue-700) {
9
+ @include outline($offset, $color);
10
+
11
+ &:not(:focus-visible) {
12
+ outline: none!important;
13
+ }
14
+ }
15
+
16
+ @mixin lineClamp($lines: 2) {
17
+ display: -webkit-box;
18
+ -webkit-box-orient: vertical;
19
+ -webkit-line-clamp: $lines;
20
+ overflow: hidden;
21
+ }
package/src/assets/scss/reset.scss ADDED
@@ -0,0 +1,12 @@
1
+ *,
2
+ *::before,
3
+ *::after {
4
+ box-sizing: border-box;
5
+ box-sizing: border-box;
6
+ -moz-box-sizing: border-box;
7
+ -webkit-box-sizing: border-box;
8
+ }
9
+
10
+ p {
11
+ margin: 0;
12
+ }
package/src/assets/scss/style.scss ADDED
@@ -0,0 +1,73 @@
1
+ @import "./reset.scss";
2
+ @import "./mixins.scss";
3
+ @import "./variables/colors.scss";
4
+ @import "./typography.scss";
5
+
6
+ body,
7
+ textarea::placeholder,
8
+ input::placeholder,
9
+ textarea,
10
+ button {
11
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
12
+ "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
13
+ "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
14
+ }
15
+
16
+ .ib-link {
17
+ @include Ib-P1-regular;
18
+ }
19
+
20
+ .ib-standalone-link {
21
+ text-decoration: none;
22
+ @include Ib-H4-medium;
23
+ height: 36px;
24
+ border-bottom: 1px solid transparent;
25
+ display: inline-flex;
26
+ align-items: center;
27
+
28
+ .ib-icon {
29
+ margin-left: 5px;
30
+ font-size: 16px;
31
+ }
32
+ }
33
+
34
+ .ib-standalone-link,
35
+ .ib-link {
36
+ color: $blue-800;
37
+ transition: color 0.3s;
38
+ text-underline-offset: 4px;
39
+ text-decoration-color: $blue-800;
40
+
41
+ &:hover {
42
+ text-decoration: underline;
43
+ text-decoration-color: $blue-700;
44
+ color: $blue-700;
45
+ }
46
+
47
+ &:active {
48
+ text-decoration: underline;
49
+ text-decoration-color: $blue-900;
50
+ color: $blue-900;
51
+ }
52
+
53
+ &:focus {
54
+ text-decoration: underline;
55
+ border-radius: 4px;
56
+ @include outline(4px);
57
+ }
58
+
59
+ &:visited {
60
+ color: $purple-500;
61
+ text-decoration-color: $purple-500;
62
+
63
+ &:hover {
64
+ text-decoration-color: $purple-400;
65
+ color: $purple-400;
66
+ }
67
+
68
+ &:active {
69
+ color: $purple-800;
70
+ text-decoration-color: $purple-800;
71
+ }
72
+ }
73
+ }
package/src/assets/scss/typography.scss ADDED
@@ -0,0 +1,155 @@
1
+ @mixin Ib-H1-medium {
2
+ font-weight: 500;
3
+ font-size: 26px;
4
+ line-height: 35px;
5
+ letter-spacing: 0.02em;
6
+ }
7
+
8
+ @mixin Ib-H2-medium {
9
+ font-weight: 500;
10
+ font-size: 20px;
11
+ line-height: 27px;
12
+ letter-spacing: 0.02em;
13
+ }
14
+
15
+ @mixin Ib-H3-medium {
16
+ font-weight: 500;
17
+ font-size: 16px;
18
+ line-height: 21px;
19
+ letter-spacing: 0.02em;
20
+ }
21
+
22
+ @mixin Ib-H4 {
23
+ font-style: normal;
24
+ font-size: 14px;
25
+ line-height: 19px;
26
+ letter-spacing: 0.02em;
27
+ }
28
+
29
+ @mixin Ib-H4-regular {
30
+ @include Ib-H4;
31
+ font-weight: 400;
32
+ }
33
+
34
+ @mixin Ib-H4-medium {
35
+ @include Ib-H4;
36
+ font-weight: 500;
37
+ }
38
+
39
+ @mixin Ib-H4-regular-italic {
40
+ @include Ib-H4;
41
+ font-style: italic;
42
+ font-weight: 400;
43
+ }
44
+
45
+ @mixin Ib-H5 {
46
+ font-style: normal;
47
+ font-size: 12px;
48
+ line-height: 16px;
49
+ letter-spacing: 0.02em;
50
+ }
51
+
52
+ @mixin Ib-H5-regular {
53
+ @include Ib-H5;
54
+ font-weight: 400;
55
+ }
56
+
57
+ @mixin Ib-H5-medium {
58
+ @include Ib-H5;
59
+ font-weight: 500;
60
+ }
61
+
62
+ @mixin Ib-H6 {
63
+ font-style: normal;
64
+ font-size: 10px;
65
+ line-height: 12px;
66
+ letter-spacing: 0.02em;
67
+ }
68
+
69
+ @mixin Ib-H6-regular {
70
+ @include Ib-H6;
71
+ font-weight: 400;
72
+ }
73
+
74
+ @mixin Ib-H6-medium {
75
+ @include Ib-H6;
76
+ font-weight: 500;
77
+ }
78
+
79
+
80
+ @mixin Ib-P1 {
81
+ font-style: normal;
82
+ font-size: 14px;
83
+ line-height: 22px;
84
+ letter-spacing: 0.02em;
85
+ }
86
+
87
+ @mixin Ib-P1-regular {
88
+ @include Ib-P1;
89
+ font-weight: 400;
90
+ }
91
+
92
+ @mixin Ib-P1-medium {
93
+ @include Ib-P1;
94
+ font-weight: 500;
95
+ }
96
+
97
+ .Ib-H1-medium {
98
+ @include Ib-H1-medium;
99
+ }
100
+
101
+ .Ib-H2-medium {
102
+ @include Ib-H2-medium;
103
+ }
104
+
105
+ .Ib-H3-medium {
106
+ @include Ib-H3-medium;
107
+ }
108
+
109
+ .Ib-H4 {
110
+ @include Ib-H4;
111
+ }
112
+
113
+ .Ib-H4-regular {
114
+ @include Ib-H4-regular;
115
+ }
116
+
117
+ .Ib-H4-medium {
118
+ @include Ib-H4-medium;
119
+ }
120
+
121
+ .Ib-H4-regular-italic {
122
+ @include Ib-H4-regular-italic;
123
+ }
124
+
125
+ .Ib-H5 {
126
+ @include Ib-H5;
127
+ }
128
+
129
+ .Ib-H5-regular {
130
+ @include Ib-H5-regular;
131
+ }
132
+
133
+ .Ib-H5-medium {
134
+ @include Ib-H5-medium;
135
+ }
136
+
137
+ .Ib-H6 {
138
+ @include Ib-H6;
139
+ }
140
+
141
+ .Ib-H6-regular {
142
+ @include Ib-H6-regular;
143
+ }
144
+
145
+ .Ib-H6-medium {
146
+ @include Ib-H6-medium;
147
+ }
148
+
149
+ .Ib-P1-medium {
150
+ @include Ib-P1-regular;
151
+ }
152
+
153
+ .Ib-P1-regular {
154
+ @include Ib-P1-medium;
155
+ }
package/src/assets/scss/variables/colors.scss ADDED
@@ -0,0 +1,115 @@
1
+ $blue-900: #0057C2;
2
+ $blue-800: #0060D6;
3
+ $blue-700: #0369E8;
4
+ $blue-600: #0085FC;
5
+ $blue-500: #0093FF;
6
+ $blue-400: #23A3FF;
7
+ $blue-300: #A6CEFF;
8
+ $blue-200: #D9EAFF;
9
+ $blue-100: #ECF4FF;
10
+ $blue-50: #F2F5FE;
11
+
12
+ $gray-900: #3B424B;
13
+ $gray-800: #4A5561;
14
+ $gray-700: #5A6877;
15
+ $gray-600: #677788;
16
+ $gray-500: #8296AB;
17
+ $gray-400: #B3C2D3;
18
+ $gray-300: #CFD5E7;
19
+ $gray-200: #E7EAF3;
20
+ $gray-100: #F2F3F5;
21
+ $gray-50: #F8F9FC;
22
+
23
+ $white: #FFFFFF;
24
+ $white-t20: rgba($white, 0.2);
25
+
26
+ $black: #000000;
27
+ $black-t20: rgba($black, 0.2);
28
+
29
+ $neutral-900: #1A1A1A;
30
+ $neutral-800: #3A3A3A;
31
+ $neutral-700: #595959;
32
+ $neutral-600: #606060;
33
+ $neutral-500: #B2B2B2;
34
+ $neutral-400: #B4B4B4;
35
+ $neutral-300: #D8D8D8;
36
+ $neutral-200: #E8E8E8;
37
+ $neutral-100: #F2F2F2;
38
+ $neutral-50: #F9F9F9;
39
+
40
+ $red-900: #B9091F;
41
+ $red-800: #C8182E;
42
+ $red-700: #D91A33;
43
+ $red-600: #E72C3A;
44
+ $red-500: #F6363B;
45
+ $red-400: #F04B55;
46
+ $red-300: #E66F76;
47
+ $red-200: #EF989C;
48
+ $red-100: #FFE9E9;
49
+ $red-50: #FFF5F2;
50
+
51
+ $purple-900: #2D00B9;
52
+ $purple-800: #4A00C2;
53
+ $purple-700: #5A0CC8;
54
+ $purple-600: #6919D0;
55
+ $purple-500: #7800D6;
56
+ $purple-400: #990BF0;
57
+ $purple-300: #A06CE4;
58
+ $purple-200: #BB98EB;
59
+ $purple-100: #D6C1F3;
60
+ $purple-50: #F0E6FA;
61
+
62
+ $yellow-900: #ED7A00;
63
+ $yellow-800: #F0A30C;
64
+ $yellow-700: #F1BC19;
65
+ $yellow-600: #F2D323;
66
+ $yellow-500: #F0E327;
67
+ $yellow-400: #F3E84C;
68
+ $yellow-300: #F6ED6E;
69
+ $yellow-200: #F8F298;
70
+ $yellow-100: #FBF7C1;
71
+ $yellow-50: #FFFEEB;
72
+
73
+ $brown-900: #582422;
74
+ $brown-800: #69322C;
75
+ $brown-700: #783F33;
76
+ $brown-600: #894B3D;
77
+ $brown-500: #965544;
78
+ $brown-400: #C27C69;
79
+ $brown-300: #BF8778;
80
+ $brown-200: #DBA79A;
81
+ $brown-100: #F5C7BB;
82
+ $brown-50: #FFE5D6;
83
+
84
+ $green-900: #006025;
85
+ $green-800: #0D7F39;
86
+ $green-700: #199044;
87
+ $green-600: #25A24F;
88
+ $green-500: #2EB159;
89
+ $green-400: #53BD72;
90
+ $green-300: #73C98A;
91
+ $green-200: #9DD8AC;
92
+ $green-100: #DCF9D2;
93
+ $green-50: #F5FFF2;
94
+
95
+ $indigo-900: #362D5E;
96
+ $indigo-800: #443E71;
97
+ $indigo-700: #4C477E;
98
+ $indigo-600: #54518A;
99
+ $indigo-500: #5B5993;
100
+ $indigo-400: #7172A2;
101
+ $indigo-300: #898CB2;
102
+ $indigo-200: #A9ACC9;
103
+ $indigo-100: #CACCDF;
104
+ $indigo-50: #EAEBF2;
105
+
106
+ $navy-900: #36497C;
107
+ $navy-800: #45659C;
108
+ $navy-700: #4D75AF;
109
+ $navy-600: #4E79AD;
110
+ $navy-500: #5786C1;
111
+ $navy-400: #6EA3D5;
112
+ $navy-300: #81B3DC;
113
+ $navy-200: #A0C8E7;
114
+ $navy-100: #C3DDF1;
115
+ $navy-50: #E6F1F9;