@bookklik/senangstart-css 0.2.0 → 0.2.4

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 (149) hide show
  1. package/dist/senangstart-css.js +102 -7
  2. package/dist/senangstart-css.min.js +26 -24
  3. package/dist/senangstart-tw.js +389 -0
  4. package/dist/senangstart-tw.min.js +2 -0
  5. package/docs/.vitepress/config.js +13 -4
  6. package/docs/SYNTAX-REFERENCE.md +1590 -1555
  7. package/docs/index.md +6 -0
  8. package/docs/ms/index.md +6 -0
  9. package/docs/ms/reference/visual/accent-color.md +6 -6
  10. package/docs/ms/reference/visual/animation-builtin.md +6 -6
  11. package/docs/ms/reference/visual/animation-delay.md +4 -2
  12. package/docs/ms/reference/visual/animation-direction.md +6 -6
  13. package/docs/ms/reference/visual/animation-duration.md +4 -4
  14. package/docs/ms/reference/visual/animation-fill.md +33 -9
  15. package/docs/ms/reference/visual/animation-iteration.md +5 -5
  16. package/docs/ms/reference/visual/animation-play.md +4 -4
  17. package/docs/ms/reference/visual/appearance.md +4 -4
  18. package/docs/ms/reference/visual/blend-modes.md +6 -6
  19. package/docs/ms/reference/visual/border-radius.md +8 -8
  20. package/docs/ms/reference/visual/box-shadow.md +6 -6
  21. package/docs/ms/reference/visual/caret-color.md +2 -2
  22. package/docs/ms/reference/visual/cursor.md +6 -6
  23. package/docs/ms/reference/visual/filter-blur.md +7 -7
  24. package/docs/ms/reference/visual/font-family.md +8 -8
  25. package/docs/ms/reference/visual/font-smoothing.md +4 -4
  26. package/docs/ms/reference/visual/font-style.md +4 -4
  27. package/docs/ms/reference/visual/font-variant-numeric.md +6 -4
  28. package/docs/ms/reference/visual/font-weight.md +6 -6
  29. package/docs/ms/reference/visual/gradient-from.md +57 -0
  30. package/docs/ms/reference/visual/gradient-to.md +57 -0
  31. package/docs/ms/reference/visual/gradient-via.md +54 -0
  32. package/docs/ms/reference/visual/hyphens.md +6 -6
  33. package/docs/ms/reference/visual/letter-spacing.md +8 -8
  34. package/docs/ms/reference/visual/line-clamp.md +9 -9
  35. package/docs/ms/reference/visual/line-height.md +8 -8
  36. package/docs/ms/reference/visual/list-style.md +7 -7
  37. package/docs/ms/reference/visual/mask.md +6 -2
  38. package/docs/ms/reference/visual/opacity.md +8 -8
  39. package/docs/ms/reference/visual/pointer-events.md +4 -4
  40. package/docs/ms/reference/visual/state-prefixes.md +5 -3
  41. package/docs/ms/reference/visual/text-decoration.md +6 -4
  42. package/docs/ms/reference/visual/text-indent.md +8 -4
  43. package/docs/ms/reference/visual/text-overflow.md +6 -4
  44. package/docs/ms/reference/visual/text-shadow.md +8 -2
  45. package/docs/ms/reference/visual/text-size.md +31 -13
  46. package/docs/ms/reference/visual/text-transform.md +6 -6
  47. package/docs/ms/reference/visual/text-wrap.md +8 -8
  48. package/docs/ms/reference/visual/transform-backface.md +29 -9
  49. package/docs/ms/reference/visual/transform-origin.md +4 -4
  50. package/docs/ms/reference/visual/transform-perspective-origin.md +41 -7
  51. package/docs/ms/reference/visual/transform-perspective.md +41 -7
  52. package/docs/ms/reference/visual/transform-rotate-3d.md +93 -0
  53. package/docs/ms/reference/visual/transform-rotate.md +6 -6
  54. package/docs/ms/reference/visual/transform-scale.md +7 -7
  55. package/docs/ms/reference/visual/transform-skew.md +6 -6
  56. package/docs/ms/reference/visual/transform-style.md +31 -11
  57. package/docs/ms/reference/visual/transform-translate-z.md +90 -0
  58. package/docs/ms/reference/visual/transform-translate.md +40 -14
  59. package/docs/ms/reference/visual/transition-delay.md +4 -2
  60. package/docs/ms/reference/visual/transition-duration.md +4 -4
  61. package/docs/ms/reference/visual/transition-timing.md +6 -6
  62. package/docs/ms/reference/visual/typography-keywords.md +8 -8
  63. package/docs/ms/reference/visual/user-select.md +4 -4
  64. package/docs/ms/reference/visual/vertical-align.md +10 -8
  65. package/docs/ms/reference/visual/whitespace.md +8 -8
  66. package/docs/ms/reference/visual/word-break.md +8 -8
  67. package/docs/public/assets/senangstart-css.min.js +209 -1545
  68. package/docs/public/assets/ss-logo.svg +83 -0
  69. package/docs/reference/visual/accent-color.md +6 -6
  70. package/docs/reference/visual/animation-builtin.md +6 -6
  71. package/docs/reference/visual/animation-delay.md +4 -2
  72. package/docs/reference/visual/animation-direction.md +6 -6
  73. package/docs/reference/visual/animation-duration.md +4 -4
  74. package/docs/reference/visual/animation-fill.md +33 -9
  75. package/docs/reference/visual/animation-iteration.md +5 -5
  76. package/docs/reference/visual/animation-play.md +4 -4
  77. package/docs/reference/visual/appearance.md +4 -4
  78. package/docs/reference/visual/blend-modes.md +6 -6
  79. package/docs/reference/visual/border-radius.md +8 -8
  80. package/docs/reference/visual/box-shadow.md +6 -6
  81. package/docs/reference/visual/caret-color.md +2 -2
  82. package/docs/reference/visual/cursor.md +6 -6
  83. package/docs/reference/visual/filter-blur.md +7 -7
  84. package/docs/reference/visual/font-family.md +8 -8
  85. package/docs/reference/visual/font-smoothing.md +4 -4
  86. package/docs/reference/visual/font-style.md +4 -4
  87. package/docs/reference/visual/font-variant-numeric.md +6 -4
  88. package/docs/reference/visual/font-weight.md +6 -6
  89. package/docs/reference/visual/gradient-from.md +57 -0
  90. package/docs/reference/visual/gradient-to.md +57 -0
  91. package/docs/reference/visual/gradient-via.md +54 -0
  92. package/docs/reference/visual/hyphens.md +6 -6
  93. package/docs/reference/visual/letter-spacing.md +8 -8
  94. package/docs/reference/visual/line-clamp.md +9 -9
  95. package/docs/reference/visual/line-height.md +8 -8
  96. package/docs/reference/visual/list-style.md +7 -7
  97. package/docs/reference/visual/mask.md +6 -2
  98. package/docs/reference/visual/opacity.md +8 -8
  99. package/docs/reference/visual/pointer-events.md +4 -4
  100. package/docs/reference/visual/state-prefixes.md +5 -3
  101. package/docs/reference/visual/text-decoration.md +6 -4
  102. package/docs/reference/visual/text-indent.md +8 -4
  103. package/docs/reference/visual/text-overflow.md +6 -4
  104. package/docs/reference/visual/text-shadow.md +8 -2
  105. package/docs/reference/visual/text-size.md +31 -13
  106. package/docs/reference/visual/text-transform.md +6 -6
  107. package/docs/reference/visual/text-wrap.md +8 -8
  108. package/docs/reference/visual/transform-backface.md +29 -9
  109. package/docs/reference/visual/transform-origin.md +4 -4
  110. package/docs/reference/visual/transform-perspective-origin.md +41 -7
  111. package/docs/reference/visual/transform-perspective.md +41 -7
  112. package/docs/reference/visual/transform-rotate-3d.md +93 -0
  113. package/docs/reference/visual/transform-rotate.md +6 -6
  114. package/docs/reference/visual/transform-scale.md +7 -7
  115. package/docs/reference/visual/transform-skew.md +6 -6
  116. package/docs/reference/visual/transform-style.md +31 -11
  117. package/docs/reference/visual/transform-translate-z.md +90 -0
  118. package/docs/reference/visual/transform-translate.md +40 -14
  119. package/docs/reference/visual/transition-delay.md +4 -2
  120. package/docs/reference/visual/transition-duration.md +4 -4
  121. package/docs/reference/visual/transition-timing.md +6 -6
  122. package/docs/reference/visual/typography-keywords.md +8 -8
  123. package/docs/reference/visual/user-select.md +4 -4
  124. package/docs/reference/visual/vertical-align.md +10 -8
  125. package/docs/reference/visual/whitespace.md +8 -8
  126. package/docs/reference/visual/word-break.md +8 -8
  127. package/docs/syntax-reference.json +2009 -1972
  128. package/package.json +2 -2
  129. package/playground/index.html +37 -38
  130. package/playground/sample_code.txt +23 -0
  131. package/playground/tw-convertor.html +103 -589
  132. package/scripts/build-dist.js +43 -1
  133. package/scripts/convert-tailwind.js +24 -0
  134. package/scripts/generate-docs.js +9 -7
  135. package/src/cdn/jit.js +70 -7
  136. package/src/cdn/tw-conversion-engine.js +497 -0
  137. package/src/compiler/generators/css.js +24 -2
  138. package/src/config/defaults.js +31 -7
  139. package/src/definitions/layout-positioning.js +6 -6
  140. package/src/definitions/visual-backgrounds.js +113 -15
  141. package/src/definitions/visual-borders.js +1 -1
  142. package/src/definitions/visual-filters.js +16 -16
  143. package/src/definitions/visual-svg.js +5 -5
  144. package/src/definitions/visual-transform3d.js +202 -36
  145. package/src/definitions/visual-transforms.js +42 -25
  146. package/src/definitions/visual-transitions.js +40 -26
  147. package/src/definitions/visual-typography.js +53 -44
  148. package/src/definitions/visual.js +73 -58
  149. package/tests/unit/convert-tailwind.test.js +8 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bookklik/senangstart-css",
3
- "version": "0.2.0",
3
+ "version": "0.2.4",
4
4
  "description": "Fluent Style Utilities for Humans and AI",
5
5
  "type": "module",
6
6
  "main": "src/index.js",
@@ -13,7 +13,7 @@
13
13
  "build": "npm run build:dist && vitepress build docs",
14
14
  "build:dist": "node scripts/build-dist.js",
15
15
  "prepublishOnly": "npm run build:dist",
16
- "docs": "vitepress dev docs",
16
+ "docs:dev": "vitepress dev docs",
17
17
  "docs:generate": "node scripts/generate-docs.js",
18
18
  "docs:sync-check": "node scripts/generate-docs.js --compare",
19
19
  "docs:syntax": "node scripts/extract-syntax.js",
package/playground/index.html CHANGED
@@ -6,10 +6,21 @@
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
7
  <meta name="description" content="SenangStart CSS Playground" />
8
8
  <meta name="author" content="Bookklik Technologies" />
9
- <meta name="keywords" content="SenangStart CSS, CSS, SenangStart" />
9
+ <meta
10
+ name="keywords"
11
+ content="SenangStart CSS, CSS, SenangStart, Playground"
12
+ />
10
13
 
11
- <link rel="apple-touch-icon" sizes="180x180" href="https://senangstart.com/img/ss_icon_accent.svg">
12
- <link rel="shortcut icon" href="https://senangstart.com/img/ss_icon_accent.svg" type="image/x-icon">
14
+ <link
15
+ rel="apple-touch-icon"
16
+ sizes="180x180"
17
+ href="https://senangstart.com/img/ss_icon_accent.svg"
18
+ />
19
+ <link
20
+ rel="shortcut icon"
21
+ href="https://senangstart.com/img/ss_icon_accent.svg"
22
+ type="image/x-icon"
23
+ />
13
24
  <link
14
25
  rel="stylesheet"
15
26
  href="https://unpkg.com/senangwebs-one@latest/dist/swo.css"
@@ -20,54 +31,42 @@
20
31
  href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap"
21
32
  rel="stylesheet"
22
33
  />
23
-
24
34
  <style>
25
- html,
26
35
  body {
27
- height: 100%;
28
- margin: 0;
29
- overflow: hidden;
30
- }
31
- #ss-css-playground {
32
- width: 100%;
33
- height: 100vh;
36
+ font-family: "Outfit", sans-serif;
34
37
  }
35
38
  </style>
36
-
37
- <!-- Monaco Editor ESM Loader -->
38
- <script type="module">
39
- import * as monaco from "https://cdn.jsdelivr.net/npm/monaco-editor@0.54.0/+esm";
40
- window.monaco = monaco;
41
- </script>
39
+ <script src="https://unpkg.com/senangwebs-loading@latest/dist/swl.js"></script>
40
+ <script src="https://unpkg.com/@bookklik/senangstart-css/dist/senangstart-css.min.js"></script>
41
+ <script src="https://unpkg.com/@bookklik/senangstart-icons/dist/senangstart.min.css"></script>
42
+ <script src="https://unpkg.com/@bookklik/senangstart-actions/dist/senangstart-actions.min.js"></script>
42
43
  </head>
43
44
  <body>
44
- <div id="ss-css-playground" style="height: 100vh"></div>
45
+ <div
46
+ data-swl
47
+ data-swl-type="spinner"
48
+ data-swl-color="#007bff"
49
+ data-swl-duration="2000"
50
+ data-swl-bg-color="#ffffff"
51
+ data-swl-bg-opacity="1"
52
+ data-swl-z-index="9999"
53
+ >
54
+ <div data-swl data-swl-color="#007bff" data-swl-duration="2000"></div>
55
+ </div>
56
+ <main layout="flex col" space="w:[100%] h:[100vh]">
57
+ <div id="ss-css-playground" layout="grow" space="h:[100%]"></div>
58
+ </main>
45
59
 
46
60
  <script src="https://unpkg.com/senangwebs-one@latest/dist/swo.js"></script>
47
61
 
48
62
  <script>
49
- document.addEventListener("DOMContentLoaded", function () {
63
+ document.addEventListener("DOMContentLoaded", async function () {
50
64
  if (typeof SWO !== "undefined") {
51
- const customCode = `<!DOCTYPE html>
52
- <html>
53
- <head>
54
- <title>SenangStart CSS Playground\x3c/title>
55
- <script src="https://unpkg.com/@bookklik/senangstart-css/dist/senangstart-css.min.js">\x3c/script>
56
- \x3c/head>
57
-
58
- <body>
59
- <div
60
- layout="flex col center"
61
- space="p:small"
62
- visual="bg:primary text:white rounded:big"
63
- >
64
- Hello SenangStart!
65
- \x3c/div>
66
- \x3c/body>
67
- \x3c/html>`;
65
+ const response = await fetch("./sample_code.txt");
66
+ const customCode = await response.text();
68
67
  new SWO("#ss-css-playground", {
69
68
  code: customCode,
70
- storageKey: "custom-editor-project-xyz",
69
+ storageKey: "ss-css-playground",
71
70
  });
72
71
  } else {
73
72
  console.error("SWO library not loaded.");
package/playground/sample_code.txt ADDED
@@ -0,0 +1,23 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+
4
+ <head>
5
+ <title>SenangStart</title>
6
+ <script src="https://unpkg.com/@bookklik/senangstart-css/dist/senangstart-css.min.js"></script>
7
+ </head>
8
+
9
+ <body>
10
+ <div layout="flex col center" space="p:big" visual="bg:primary text:white">
11
+ <h1 visual="text-size:giant font:bold">Hello SenangStart!</h1>
12
+ <p space="m-y:small">Zero config, instant styling.</p>
13
+ <div layout="flex items:center" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium text:black">
14
+ <span visual="text-size:tiny">tiny</span>
15
+ <span visual="text-size:small">small</span>
16
+ <span visual="text-size:medium">medium</span>
17
+ <span visual="text-size:big">big</span>
18
+ <span visual="text-size:giant">giant</span>
19
+ </div>
20
+ </div>
21
+ </body>
22
+
23
+ </html>