@medyll/cssfabric 0.2.1-beta.5 → 0.2.1-beta.7

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 (93) hide show
  1. package/README.md +42 -34
  2. package/dist/NewMenu.svelte +11 -8
  3. package/dist/NewMenu.svelte.d.ts +4 -4
  4. package/dist/css/cssfabric.css +4829 -4830
  5. package/dist/css/cssfabric.min.css +1 -4877
  6. package/dist/css/cssfabric.responsive.css +11791 -11791
  7. package/dist/css/cssfabric.responsive.min.css +1 -1
  8. package/dist/cssf/README.md +2 -48
  9. package/dist/cssf/cssFabricMixins.scss +95 -0
  10. package/dist/cssf/cssfLib.d.ts +28 -28
  11. package/dist/fabric/CssFabric.d.ts +46 -0
  12. package/dist/{cssFabric → fabric}/CssFabric.js +26 -0
  13. package/dist/{cssFabric → fabric}/CssFabricBuilder.js +1 -0
  14. package/dist/{cssFabric → fabric}/CssFabricExport.d.ts +1 -0
  15. package/dist/{cssFabric → fabric}/CssFabricExport.js +24 -2
  16. package/dist/fabric/bin/exports.js +13 -0
  17. package/dist/fabric/css/css-fabric-sheet.css +15366 -0
  18. package/dist/fabric/css/css-fabric-vars-colors.css +387 -0
  19. package/dist/fabric/css/cssFabric-sheet.json +1 -0
  20. package/dist/fabric/css/cssFabric-vars-colors.json +1 -0
  21. package/dist/{cssFabric → fabric}/cssProperties.js +0 -1
  22. package/dist/generated/cssFabric.vars.json +12 -12
  23. package/dist/generated/cssFabric.vars.md +105 -105
  24. package/dist/index.d.ts +14 -14
  25. package/dist/index.js +14 -14
  26. package/dist/{scripts → legacy/scripts}/cssfabric.d.ts +5 -5
  27. package/dist/{scripts → legacy/scripts}/cssfabric.js +1 -1
  28. package/dist/{scripts → legacy/scripts}/cssfabricClassNames.js +50 -30
  29. package/dist/scss/_utils.scss +23 -21
  30. package/dist/scss/modules/_cssfabric-config.scss +2 -1
  31. package/dist/scss/modules/box/_box-build.scss +3 -2
  32. package/dist/scss/modules/box/box-responsive.scss +2 -1
  33. package/dist/scss/modules/color/_color-build.scss +8 -7
  34. package/dist/scss/modules/color/color-responsive.scss +1 -1
  35. package/dist/scss/modules/flex/_flex-build.scss +11 -10
  36. package/dist/scss/modules/flex/_flex-vars.scss +3 -2
  37. package/dist/scss/modules/flex/flex-responsive.scss +2 -1
  38. package/dist/scss/modules/grid/_grid-build.scss +11 -10
  39. package/dist/scss/modules/grid/_grid-vars.scss +3 -2
  40. package/dist/scss/modules/grid/grid-responsive.scss +2 -1
  41. package/dist/scss/modules/menu/_menu-build.scss +11 -10
  42. package/dist/scss/modules/menu/menu-responsive.scss +2 -1
  43. package/dist/scss/modules/overflow/_overflow-build.scss +3 -2
  44. package/dist/scss/modules/overflow/overflow-responsive.scss +1 -1
  45. package/dist/scss/modules/scale/_scale-build.scss +4 -3
  46. package/dist/scss/modules/scale/scale-responsive.scss +2 -1
  47. package/dist/scss/modules/table/_table-build.scss +9 -8
  48. package/dist/scss/modules/table/table-responsive.scss +2 -1
  49. package/dist/scss/modules/text/_text-build.scss +15 -14
  50. package/dist/scss/modules/text/_text-vars.scss +7 -6
  51. package/dist/scss/modules/text/text-responsive.scss +1 -1
  52. package/dist/scss/modules/theme/_theme-build.scss +7 -6
  53. package/dist/scss/modules/theme/_theme-vars.scss +30 -24
  54. package/dist/scss/modules/vars.scss +8 -8
  55. package/dist/scss/modules/zindex/zindex.scss +2 -1
  56. package/dist/style/cssfabric.css +0 -0
  57. package/dist/style/cssfabric.min.css +0 -0
  58. package/dist/style/cssfabric.responsive.css +0 -0
  59. package/dist/style/cssfabric.responsive.min.css +0 -0
  60. package/dist/styles/cssfabric.css +0 -0
  61. package/dist/styles/cssfabric.min.css +0 -0
  62. package/dist/styles/cssfabric.responsive.css +0 -0
  63. package/dist/styles/cssfabric.responsive.min.css +0 -0
  64. package/package.json +29 -27
  65. package/dist/cssFabric/CssFabric.d.ts +0 -20
  66. package/dist/cssFabric/bin/exports.js +0 -14
  67. /package/dist/{cssfVsCode → extensions/cssfabric-vscode}/.vscode/launch.json +0 -0
  68. /package/dist/{cssfVsCode → extensions/cssfabric-vscode}/.vscodeignore +0 -0
  69. /package/dist/{cssfVsCode → extensions/cssfabric-vscode}/CHANGELOG.md +0 -0
  70. /package/dist/{cssfVsCode → extensions/cssfabric-vscode}/README.md +0 -0
  71. /package/dist/{cssfVsCode → extensions/cssfabric-vscode}/language-configuration.json +0 -0
  72. /package/dist/{cssfVsCode → extensions/cssfabric-vscode}/package.json +0 -0
  73. /package/dist/{cssfVsCode → extensions/cssfabric-vscode}/syntaxes/cssf.tmLanguage.json +0 -0
  74. /package/dist/{cssfVsCode → extensions/cssfabric-vscode}/test.cssf +0 -0
  75. /package/dist/{cssfVsCode → extensions/cssfabric-vscode}/vsc-extension-quickstart.md +0 -0
  76. /package/dist/{cssFabric → fabric}/CssFabricBuilder.d.ts +0 -0
  77. /package/dist/{cssFabric → fabric}/bin/exports.d.ts +0 -0
  78. /package/dist/{cssFabric → fabric}/config.d.ts +0 -0
  79. /package/dist/{cssFabric → fabric}/config.js +0 -0
  80. /package/dist/{cssFabric → fabric}/cssFabricSheet.d.ts +0 -0
  81. /package/dist/{cssFabric → fabric}/cssFabricSheet.js +0 -0
  82. /package/dist/{cssFabric → fabric}/cssProperties.d.ts +0 -0
  83. /package/dist/{cssFabric → fabric}/cssVariationsAi.d.ts +0 -0
  84. /package/dist/{cssFabric → fabric}/cssVariationsAi.js +0 -0
  85. /package/dist/{cssFabric → fabric}/index.d.ts +0 -0
  86. /package/dist/{cssFabric → fabric}/index.js +0 -0
  87. /package/dist/{cssFabric → fabric}/types.d.ts +0 -0
  88. /package/dist/{cssFabric → fabric}/types.js +0 -0
  89. /package/dist/{scripts → legacy/scripts}/cssfabricClassNames.d.ts +0 -0
  90. /package/dist/{scripts → legacy/scripts}/index.d.ts +0 -0
  91. /package/dist/{scripts → legacy/scripts}/index.js +0 -0
  92. /package/dist/{scripts → legacy/scripts}/utils.d.ts +0 -0
  93. /package/dist/{scripts → legacy/scripts}/utils.js +0 -0
package/README.md CHANGED
@@ -1,58 +1,66 @@
1
- # create-svelte
1
+ # @medyll/cssfabric
2
2
 
3
- Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
3
+ @medyll/cssfabric is a ready-to-use CSS utility className.
4
4
 
5
- Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).
6
-
7
- ## Creating a project
8
-
9
- If you're seeing this, you've probably already done this step. Congrats!
5
+ ## Installation
10
6
 
7
+ install @medyll/cssfabric with your preferred package manager
11
8
  ```bash
12
- # create a new project in the current directory
13
- npm create svelte@latest
14
-
15
- # create a new project in my-app
16
- npm create svelte@latest my-app
9
+ npm install @medyll/cssfabric
10
+ # or
11
+ yarn add @medyll/cssfabric
12
+ # or whatever
13
+ ...
17
14
  ```
18
15
 
19
- ## Developing
20
16
 
21
- Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
17
+ ## Configuration
18
+ ### Add `data-theme` attribute to `body`
22
19
 
23
- ```bash
24
- npm run dev
20
+ Add the `data-theme` attribute to the `body` in your main html file:
25
21
 
26
- # or start the server and open the app in a new browser tab
27
- npm run dev -- --open
22
+ ```html
23
+ <body data-theme="dark">
24
+ <!-- Application content -->
25
+ </body>
28
26
  ```
29
27
 
30
- Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
28
+ The `data-theme` attribute can be set to "dark" or "light" depending on your needs.
29
+ ### Add imports from @medyll/cssfabric in the main file
31
30
 
32
- ## Building
31
+ Add the following imports in the main file:
33
32
 
34
- To build your library:
35
-
36
- ```bash
37
- npm run package
33
+ ```js
34
+ # example
35
+ import "@medyll/cssfabric/cssfabric.min.css";
36
+ # example for svelte
37
+ import "@medyll/cssfabric/cssfabric.min.css?inline";
38
38
  ```
39
39
 
40
- To create a production version of your showcase app:
40
+ ### Import your theme definition
41
41
 
42
- ```bash
43
- npm run build
42
+ ```html
43
+ # example for svelte
44
+ <style global lang="scss">
45
+ @import "path-to/own-cssfabric-theme.scss";
46
+ </style>
44
47
  ```
45
48
 
46
- You can preview the production build with `npm run preview`.
47
49
 
48
- > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
50
+ Example of a scss theme definition:
49
51
 
50
- ## Publishing
52
+ ```scss
53
+ // own-cssfabric-theme.scss
54
+ @charset "utf-8";
51
55
 
52
- Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
56
+ $theme-color-primary: #98B148;
57
+ $theme-color-secondary: #55492B;
58
+ $theme-color-tertiary: #9999CC;
53
59
 
54
- To publish your library to [npm](https://www.npmjs.com):
60
+ $theme-dark-color-foreground: #f1f1f1;
61
+ $theme-dark-color-background: #27323a;
62
+ $theme-dark-color-paper: #3a3b3b;
55
63
 
56
- ```bash
57
- npm publish
64
+ // Overrides the default values of @medyll/cssfabric's configuration and deliver new `css properties`.
65
+ @import "../node_modules/@medyll/cssfabric/src/cssfabric/modules/vars.scss";
58
66
  ```
package/dist/NewMenu.svelte CHANGED
@@ -1,11 +1,14 @@
1
- <script>export let name = "";
2
- export let children = [];
3
- export let indent = 0;
4
- export let data = {};
5
- let open = true;
6
- function toggleOpen() {
7
- open = !open;
8
- }
1
+ <script lang="ts">
2
+ export let name = '';
3
+ export let children = [];
4
+ export let indent = 0;
5
+ export let data: Record<string, any> = {};
6
+
7
+ let open = true;
8
+
9
+ function toggleOpen() {
10
+ open = !open;
11
+ }
9
12
  </script>
10
13
 
11
14
  <!-- <h3 style="padding-left: {indent}px" on:click={toggleOpen}>
package/dist/NewMenu.svelte.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
2
  declare const __propDef: {
3
3
  props: {
4
- name?: string | undefined;
5
- children?: any[] | undefined;
6
- indent?: number | undefined;
7
- data?: Record<string, any> | undefined;
4
+ name?: string;
5
+ children?: any[];
6
+ indent?: number;
7
+ data?: Record<string, any>;
8
8
  };
9
9
  events: {
10
10
  [evt: string]: CustomEvent<any>;