@adnap/krysalicss 0.0.1

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 (172) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +119 -0
  3. package/dist/base/global.css +141 -0
  4. package/dist/base/global.min.css +1 -0
  5. package/dist/base/reset.css +170 -0
  6. package/dist/base/reset.min.css +1 -0
  7. package/dist/element/badge.css +167 -0
  8. package/dist/element/badge.min.css +1 -0
  9. package/dist/element/button.css +250 -0
  10. package/dist/element/button.min.css +1 -0
  11. package/dist/element/checkbox.css +149 -0
  12. package/dist/element/checkbox.min.css +1 -0
  13. package/dist/element/file.css +148 -0
  14. package/dist/element/file.min.css +1 -0
  15. package/dist/element/progress.css +183 -0
  16. package/dist/element/progress.min.css +1 -0
  17. package/dist/element/radio.css +144 -0
  18. package/dist/element/radio.min.css +1 -0
  19. package/dist/element/range.css +183 -0
  20. package/dist/element/range.min.css +1 -0
  21. package/dist/element/select.css +156 -0
  22. package/dist/element/select.min.css +1 -0
  23. package/dist/element/switch.css +186 -0
  24. package/dist/element/switch.min.css +1 -0
  25. package/dist/element/text-input.css +143 -0
  26. package/dist/element/text-input.min.css +1 -0
  27. package/dist/element/textarea.css +145 -0
  28. package/dist/element/textarea.min.css +1 -0
  29. package/dist/helper/breakpoints.css +113 -0
  30. package/dist/helper/breakpoints.min.css +1 -0
  31. package/dist/helper/state.css +126 -0
  32. package/dist/helper/state.min.css +1 -0
  33. package/dist/krysalicss.css +1420 -0
  34. package/dist/krysalicss.css.map +1 -0
  35. package/dist/krysalicss.min.css +1 -0
  36. package/dist/layout/container.css +145 -0
  37. package/dist/layout/container.min.css +1 -0
  38. package/dist/layout/flex.css +135 -0
  39. package/dist/layout/flex.min.css +1 -0
  40. package/dist/layout/grid.css +188 -0
  41. package/dist/layout/grid.min.css +1 -0
  42. package/dist/module/alert.css +166 -0
  43. package/dist/module/alert.min.css +1 -0
  44. package/dist/module/card.css +157 -0
  45. package/dist/module/card.min.css +1 -0
  46. package/dist/module/field.css +138 -0
  47. package/dist/module/field.min.css +1 -0
  48. package/dist/module/modal.css +187 -0
  49. package/dist/module/modal.min.css +1 -0
  50. package/dist/module/navbar.css +256 -0
  51. package/dist/module/navbar.min.css +1 -0
  52. package/dist/module/tabs.css +167 -0
  53. package/dist/module/tabs.min.css +1 -0
  54. package/dist/tokens/dark.json +85 -0
  55. package/dist/tokens/default.json +85 -0
  56. package/dist/tokens/high-contrast.json +85 -0
  57. package/dist/typography/base.css +131 -0
  58. package/dist/typography/base.min.css +1 -0
  59. package/dist/typography/content.css +137 -0
  60. package/dist/typography/content.min.css +1 -0
  61. package/dist/typography/link.css +132 -0
  62. package/dist/typography/link.min.css +1 -0
  63. package/dist/typography/table.css +121 -0
  64. package/dist/typography/table.min.css +1 -0
  65. package/dist/typography/title.css +122 -0
  66. package/dist/typography/title.min.css +1 -0
  67. package/package.json +111 -0
  68. package/src/_index.scss +18 -0
  69. package/src/base/_index.scss +2 -0
  70. package/src/base/global/_index.scss +2 -0
  71. package/src/base/global/_plugin.scss +34 -0
  72. package/src/base/global/_variables.scss +11 -0
  73. package/src/base/reset/_index.scss +2 -0
  74. package/src/base/reset/_plugin.scss +70 -0
  75. package/src/base/reset/_variables.scss +5 -0
  76. package/src/element/_index.scss +11 -0
  77. package/src/element/badge/_index.scss +2 -0
  78. package/src/element/badge/_plugin.scss +44 -0
  79. package/src/element/badge/_variables.scss +19 -0
  80. package/src/element/button/_index.scss +2 -0
  81. package/src/element/button/_plugin.scss +173 -0
  82. package/src/element/button/_variables.scss +36 -0
  83. package/src/element/checkbox/_index.scss +2 -0
  84. package/src/element/checkbox/_plugin.scss +48 -0
  85. package/src/element/checkbox/_variables.scss +24 -0
  86. package/src/element/file/_index.scss +2 -0
  87. package/src/element/file/_plugin.scss +45 -0
  88. package/src/element/file/_variables.scss +27 -0
  89. package/src/element/progress/_index.scss +2 -0
  90. package/src/element/progress/_plugin.scss +96 -0
  91. package/src/element/progress/_variables.scss +19 -0
  92. package/src/element/radio/_index.scss +2 -0
  93. package/src/element/radio/_plugin.scss +47 -0
  94. package/src/element/radio/_variables.scss +16 -0
  95. package/src/element/range/_index.scss +2 -0
  96. package/src/element/range/_plugin.scss +101 -0
  97. package/src/element/range/_variables.scss +19 -0
  98. package/src/element/select/_index.scss +2 -0
  99. package/src/element/select/_plugin.scss +58 -0
  100. package/src/element/select/_variables.scss +26 -0
  101. package/src/element/switch/_index.scss +2 -0
  102. package/src/element/switch/_plugin.scss +105 -0
  103. package/src/element/switch/_variables.scss +28 -0
  104. package/src/element/text-input/_index.scss +2 -0
  105. package/src/element/text-input/_plugin.scss +37 -0
  106. package/src/element/text-input/_variables.scss +22 -0
  107. package/src/element/textarea/_index.scss +2 -0
  108. package/src/element/textarea/_plugin.scss +39 -0
  109. package/src/element/textarea/_variables.scss +22 -0
  110. package/src/helper/_breakpoints.scss +45 -0
  111. package/src/helper/_controls.scss +82 -0
  112. package/src/helper/_index.scss +3 -0
  113. package/src/helper/_state.scss +35 -0
  114. package/src/krysalicss.scss +17 -0
  115. package/src/layout/_index.scss +3 -0
  116. package/src/layout/container/_index.scss +2 -0
  117. package/src/layout/container/_plugin.scss +26 -0
  118. package/src/layout/container/_variables.scss +5 -0
  119. package/src/layout/flex/_index.scss +2 -0
  120. package/src/layout/flex/_plugin.scss +32 -0
  121. package/src/layout/flex/_variables.scss +9 -0
  122. package/src/layout/grid/_index.scss +2 -0
  123. package/src/layout/grid/_plugin.scss +37 -0
  124. package/src/layout/grid/_variables.scss +37 -0
  125. package/src/module/_index.scss +6 -0
  126. package/src/module/alert/_index.scss +2 -0
  127. package/src/module/alert/_plugin.scss +51 -0
  128. package/src/module/alert/_variables.scss +24 -0
  129. package/src/module/card/_index.scss +2 -0
  130. package/src/module/card/_plugin.scss +31 -0
  131. package/src/module/card/_variables.scss +13 -0
  132. package/src/module/field/_index.scss +2 -0
  133. package/src/module/field/_plugin.scss +49 -0
  134. package/src/module/field/_variables.scss +26 -0
  135. package/src/module/modal/_index.scss +2 -0
  136. package/src/module/modal/_plugin.scss +137 -0
  137. package/src/module/modal/_variables.scss +39 -0
  138. package/src/module/navbar/_index.scss +2 -0
  139. package/src/module/navbar/_plugin.scss +186 -0
  140. package/src/module/navbar/_variables.scss +49 -0
  141. package/src/module/tabs/_index.scss +2 -0
  142. package/src/module/tabs/_plugin.scss +106 -0
  143. package/src/module/tabs/_variables.scss +16 -0
  144. package/src/theme/_create.scss +74 -0
  145. package/src/theme/dark.scss +51 -0
  146. package/src/theme/default.scss +45 -0
  147. package/src/theme/high-contrast.scss +53 -0
  148. package/src/typography/_index.scss +5 -0
  149. package/src/typography/base/_index.scss +2 -0
  150. package/src/typography/base/_plugin.scss +21 -0
  151. package/src/typography/base/_variables.scss +15 -0
  152. package/src/typography/content/_index.scss +2 -0
  153. package/src/typography/content/_plugin.scss +39 -0
  154. package/src/typography/content/_variables.scss +1 -0
  155. package/src/typography/link/_index.scss +2 -0
  156. package/src/typography/link/_mixins.scss +29 -0
  157. package/src/typography/link/_plugin.scss +15 -0
  158. package/src/typography/link/_variables.scss +15 -0
  159. package/src/typography/table/_index.scss +2 -0
  160. package/src/typography/table/_plugin.scss +13 -0
  161. package/src/typography/table/_variables.scss +6 -0
  162. package/src/typography/title/_index.scss +2 -0
  163. package/src/typography/title/_plugin.scss +36 -0
  164. package/src/typography/title/_variables.scss +7 -0
  165. package/src/variables/_color.scss +66 -0
  166. package/src/variables/_default.scss +52 -0
  167. package/src/variables/_feature.scss +39 -0
  168. package/src/variables/_global.scss +93 -0
  169. package/src/variables/_index.scss +7 -0
  170. package/src/variables/_responsive.scss +10 -0
  171. package/src/variables/_selector.scss +1 -0
  172. package/src/variables/_size.scss +5 -0
package/dist/helper/state.css ADDED
@@ -0,0 +1,126 @@
1
+ @charset "UTF-8";
2
+ :root {
3
+ --kc-bg: #ffffff;
4
+ --kc-fg: #27282b;
5
+ --kc-link: #1a6347;
6
+ --kc-link-hover: #525a22;
7
+ --kc-link-visited: #8c351a;
8
+ --kc-border-radius: 5px;
9
+ --kc-card-bg: #ffffff;
10
+ --kc-card-fg: #27282b;
11
+ --kc-focus-ring: #1a6347;
12
+ --kc-default-bg: #ffffff;
13
+ --kc-default-fg: #27282b;
14
+ --kc-primary-bg: #247d59;
15
+ --kc-primary-fg: #ffffff;
16
+ --kc-warning-bg: #7a4f10;
17
+ --kc-warning-fg: #ffffff;
18
+ --kc-danger-bg: #8c351a;
19
+ --kc-danger-fg: #ffffff;
20
+ --kc-success-bg: #525a22;
21
+ --kc-success-fg: #ffffff;
22
+ }
23
+
24
+ @media (prefers-color-scheme: light) {
25
+ :root {
26
+ --kc-bg: #ffffff;
27
+ --kc-fg: #27282b;
28
+ --kc-link: #1a6347;
29
+ --kc-link-hover: #525a22;
30
+ --kc-link-visited: #8c351a;
31
+ --kc-border-radius: 5px;
32
+ --kc-card-bg: #ffffff;
33
+ --kc-card-fg: #27282b;
34
+ --kc-focus-ring: #1a6347;
35
+ --kc-default-bg: #ffffff;
36
+ --kc-default-fg: #27282b;
37
+ --kc-primary-bg: #247d59;
38
+ --kc-primary-fg: #ffffff;
39
+ --kc-warning-bg: #7a4f10;
40
+ --kc-warning-fg: #ffffff;
41
+ --kc-danger-bg: #8c351a;
42
+ --kc-danger-fg: #ffffff;
43
+ --kc-success-bg: #525a22;
44
+ --kc-success-fg: #ffffff;
45
+ }
46
+ }
47
+ :root.theme-light {
48
+ --kc-bg: #ffffff;
49
+ --kc-fg: #27282b;
50
+ --kc-link: #1a6347;
51
+ --kc-link-hover: #525a22;
52
+ --kc-link-visited: #8c351a;
53
+ --kc-border-radius: 5px;
54
+ --kc-card-bg: #ffffff;
55
+ --kc-card-fg: #27282b;
56
+ --kc-focus-ring: #1a6347;
57
+ --kc-default-bg: #ffffff;
58
+ --kc-default-fg: #27282b;
59
+ --kc-primary-bg: #247d59;
60
+ --kc-primary-fg: #ffffff;
61
+ --kc-warning-bg: #7a4f10;
62
+ --kc-warning-fg: #ffffff;
63
+ --kc-danger-bg: #8c351a;
64
+ --kc-danger-fg: #ffffff;
65
+ --kc-success-bg: #525a22;
66
+ --kc-success-fg: #ffffff;
67
+ }
68
+
69
+ @media (prefers-color-scheme: dark) {
70
+ :root {
71
+ --kc-bg: #121417;
72
+ --kc-fg: #e6e8eb;
73
+ --kc-link: #6bd1a7;
74
+ --kc-link-hover: #9ce3c2;
75
+ --kc-link-visited: #c8a8e0;
76
+ --kc-border-radius: 5px;
77
+ --kc-card-bg: #1b1e22;
78
+ --kc-card-fg: #e6e8eb;
79
+ --kc-focus-ring: #6bd1a7;
80
+ --kc-modal-backdrop: color-mix(in srgb, #e6e8eb 22%, transparent);
81
+ --kc-default-bg: #1b1e22;
82
+ --kc-default-fg: #e6e8eb;
83
+ --kc-primary-bg: #1f6e51;
84
+ --kc-primary-fg: #f4f7fb;
85
+ --kc-warning-bg: #b8991e;
86
+ --kc-warning-fg: #1b1b13;
87
+ --kc-danger-bg: #a2481a;
88
+ --kc-danger-fg: #fff6f0;
89
+ --kc-success-bg: #5c6529;
90
+ --kc-success-fg: #f3f6e5;
91
+ }
92
+ }
93
+ .theme-dark {
94
+ --kc-bg: #121417;
95
+ --kc-fg: #e6e8eb;
96
+ --kc-link: #6bd1a7;
97
+ --kc-link-hover: #9ce3c2;
98
+ --kc-link-visited: #c8a8e0;
99
+ --kc-border-radius: 5px;
100
+ --kc-card-bg: #1b1e22;
101
+ --kc-card-fg: #e6e8eb;
102
+ --kc-focus-ring: #6bd1a7;
103
+ --kc-modal-backdrop: color-mix(in srgb, #e6e8eb 22%, transparent);
104
+ --kc-default-bg: #1b1e22;
105
+ --kc-default-fg: #e6e8eb;
106
+ --kc-primary-bg: #1f6e51;
107
+ --kc-primary-fg: #f4f7fb;
108
+ --kc-warning-bg: #b8991e;
109
+ --kc-warning-fg: #1b1b13;
110
+ --kc-danger-bg: #a2481a;
111
+ --kc-danger-fg: #fff6f0;
112
+ --kc-success-bg: #5c6529;
113
+ --kc-success-fg: #f3f6e5;
114
+ }
115
+
116
+ [data-state=success]::before {
117
+ content: var(--kc-state-icon-success, "✓ ");
118
+ }
119
+
120
+ [data-state=warning]::before {
121
+ content: var(--kc-state-icon-warning, "⚠ ");
122
+ }
123
+
124
+ [data-state=danger]::before {
125
+ content: var(--kc-state-icon-danger, "✕ ");
126
+ }
package/dist/helper/state.min.css ADDED
@@ -0,0 +1 @@
1
+ :root{--kc-bg:#fff;--kc-fg:#27282b;--kc-link:#1a6347;--kc-link-hover:#525a22;--kc-link-visited:#8c351a;--kc-border-radius:5px;--kc-card-bg:#fff;--kc-card-fg:#27282b;--kc-focus-ring:#1a6347;--kc-default-bg:#fff;--kc-default-fg:#27282b;--kc-primary-bg:#247d59;--kc-primary-fg:#fff;--kc-warning-bg:#7a4f10;--kc-warning-fg:#fff;--kc-danger-bg:#8c351a;--kc-danger-fg:#fff;--kc-success-bg:#525a22;--kc-success-fg:#fff}@media(prefers-color-scheme:light){:root{--kc-bg:#fff;--kc-fg:#27282b;--kc-link:#1a6347;--kc-link-hover:#525a22;--kc-link-visited:#8c351a;--kc-border-radius:5px;--kc-card-bg:#fff;--kc-card-fg:#27282b;--kc-focus-ring:#1a6347;--kc-default-bg:#fff;--kc-default-fg:#27282b;--kc-primary-bg:#247d59;--kc-primary-fg:#fff;--kc-warning-bg:#7a4f10;--kc-warning-fg:#fff;--kc-danger-bg:#8c351a;--kc-danger-fg:#fff;--kc-success-bg:#525a22;--kc-success-fg:#fff}}:root.theme-light{--kc-bg:#fff;--kc-fg:#27282b;--kc-link:#1a6347;--kc-link-hover:#525a22;--kc-link-visited:#8c351a;--kc-border-radius:5px;--kc-card-bg:#fff;--kc-card-fg:#27282b;--kc-focus-ring:#1a6347;--kc-default-bg:#fff;--kc-default-fg:#27282b;--kc-primary-bg:#247d59;--kc-primary-fg:#fff;--kc-warning-bg:#7a4f10;--kc-warning-fg:#fff;--kc-danger-bg:#8c351a;--kc-danger-fg:#fff;--kc-success-bg:#525a22;--kc-success-fg:#fff}@media(prefers-color-scheme:dark){:root{--kc-bg:#121417;--kc-fg:#e6e8eb;--kc-link:#6bd1a7;--kc-link-hover:#9ce3c2;--kc-link-visited:#c8a8e0;--kc-border-radius:5px;--kc-card-bg:#1b1e22;--kc-card-fg:#e6e8eb;--kc-focus-ring:#6bd1a7;--kc-modal-backdrop:color-mix(in srgb,#e6e8eb 22%,#0000);--kc-default-bg:#1b1e22;--kc-default-fg:#e6e8eb;--kc-primary-bg:#1f6e51;--kc-primary-fg:#f4f7fb;--kc-warning-bg:#b8991e;--kc-warning-fg:#1b1b13;--kc-danger-bg:#a2481a;--kc-danger-fg:#fff6f0;--kc-success-bg:#5c6529;--kc-success-fg:#f3f6e5}}.theme-dark{--kc-bg:#121417;--kc-fg:#e6e8eb;--kc-link:#6bd1a7;--kc-link-hover:#9ce3c2;--kc-link-visited:#c8a8e0;--kc-border-radius:5px;--kc-card-bg:#1b1e22;--kc-card-fg:#e6e8eb;--kc-focus-ring:#6bd1a7;--kc-modal-backdrop:color-mix(in srgb,#e6e8eb 22%,#0000);--kc-default-bg:#1b1e22;--kc-default-fg:#e6e8eb;--kc-primary-bg:#1f6e51;--kc-primary-fg:#f4f7fb;--kc-warning-bg:#b8991e;--kc-warning-fg:#1b1b13;--kc-danger-bg:#a2481a;--kc-danger-fg:#fff6f0;--kc-success-bg:#5c6529;--kc-success-fg:#f3f6e5}[data-state=success]:before{content:var(--kc-state-icon-success,"✓ ")}[data-state=warning]:before{content:var(--kc-state-icon-warning,"⚠ ")}[data-state=danger]:before{content:var(--kc-state-icon-danger,"✕ ")}