@nappr/nappr-styles 0.3.2 → 0.3.3

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 (124) hide show
  1. package/README.md +33 -20
  2. package/dist/styles.css +7462 -1
  3. package/dist/styles.css.map +1 -1
  4. package/dist/styles.min.css +3 -0
  5. package/dist/styles.min.css.map +1 -0
  6. package/docs/_coverpage.md +2 -2
  7. package/docs/_sidebar.md +2 -2
  8. package/docs/docs.theme.css +2 -1
  9. package/docs/docs.theme.css.map +1 -1
  10. package/docs/index.html +1 -1
  11. package/docs/pages/displays.md +26 -8
  12. package/docs/pages/grid.md +365 -0
  13. package/docs/pages/helpers.md +30 -18
  14. package/docs/pages/quick-start.md +100 -14
  15. package/docs/temp.scss +122 -0
  16. package/index.d.ts +25 -0
  17. package/package.json +48 -14
  18. package/sass/_globals.module.scss +43 -0
  19. package/sass/_globals.scss +78 -0
  20. package/sass/components/_.scss +1 -0
  21. package/sass/components/_badge.scss +58 -0
  22. package/sass/components/_button.scss +212 -0
  23. package/sass/components/scrollbar/_.scss +102 -0
  24. package/sass/configs/_.scss +7 -0
  25. package/sass/configs/_breakpoints.scss +12 -0
  26. package/sass/configs/_defaults.scss +6 -0
  27. package/sass/configs/_grid.scss +8 -0
  28. package/sass/configs/_palettes.scss +72 -0
  29. package/sass/configs/_spacing.scss +36 -0
  30. package/sass/configs/_text.scss +41 -0
  31. package/sass/configs/_themes.scss +24 -0
  32. package/sass/core/funcs/_list.scss +43 -0
  33. package/sass/core/funcs/_map.scss +42 -0
  34. package/sass/core/funcs/_math.scss +35 -0
  35. package/sass/core/funcs/_string.scss +47 -0
  36. package/sass/core/mixins/_.scss +3 -0
  37. package/{lib → sass/core}/mixins/_links.scss +2 -2
  38. package/sass/core/mixins/_media-queries.scss +22 -0
  39. package/sass/core/mixins/_typography.scss +26 -0
  40. package/sass/core/placeholders/_.scss +4 -0
  41. package/sass/core/placeholders/_dimensions.scss +16 -0
  42. package/sass/core/placeholders/_flexbox.scss +11 -0
  43. package/sass/core/placeholders/_lists.scss +41 -0
  44. package/sass/core/placeholders/_positions.scss +19 -0
  45. package/sass/core/placeholders/_typography.scss +10 -0
  46. package/sass/elements/_.scss +6 -0
  47. package/sass/elements/_dialog.scss +13 -0
  48. package/{lib/htmls → sass/elements}/_form.scss +28 -6
  49. package/sass/elements/_links.scss +21 -0
  50. package/sass/elements/_lists.scss +11 -0
  51. package/{lib/htmls → sass/elements}/_table.scss +2 -6
  52. package/sass/elements/_typography.scss +13 -0
  53. package/sass/layout/grid/_.scss +4 -0
  54. package/sass/layout/grid/_columns.scss +32 -0
  55. package/sass/layout/grid/_gaps.scss +42 -0
  56. package/sass/layout/grid/_grid.scss +130 -0
  57. package/sass/layout/grid/_offsets.scss +35 -0
  58. package/sass/main.scss +59 -0
  59. package/sass/resets/_.scss +5 -0
  60. package/sass/resets/_base.scss +69 -0
  61. package/sass/resets/_nappr.scss +82 -0
  62. package/sass/themes/_dark.scss +17 -0
  63. package/sass/themes/_dracula.scss +17 -0
  64. package/sass/themes/_github-light.scss +17 -0
  65. package/sass/themes/_light.scss +17 -0
  66. package/sass/themes/_monokai-pro.scss +17 -0
  67. package/sass/themes/_night-owl.scss +17 -0
  68. package/sass/themes/_nord.scss +17 -0
  69. package/sass/themes/_tokyo-night.scss +17 -0
  70. package/sass/utilities/_.scss +21 -0
  71. package/sass/utilities/_dimensions.scss +11 -0
  72. package/sass/utilities/_displays.scss +111 -0
  73. package/sass/utilities/_flexbox.scss +81 -0
  74. package/{lib/helpers → sass/utilities}/_floats.scss +10 -13
  75. package/sass/utilities/_lists.scss +86 -0
  76. package/sass/utilities/_negates.scss +121 -0
  77. package/sass/utilities/_palette.scss +11 -0
  78. package/sass/utilities/_scrolls.scss +67 -0
  79. package/sass/utilities/_spacers.scss +120 -0
  80. package/sass/utilities/_square-grid.scss +33 -0
  81. package/sass/utilities/_typography.scss +106 -0
  82. package/sass/utilities/_visibility.scss +60 -0
  83. package/sass/utilities/_wrap.scss +12 -0
  84. package/styles.scss +5 -1
  85. package/lib/_globals.scss +0 -16
  86. package/lib/_reset.scss +0 -223
  87. package/lib/customs/scrollbar.scss +0 -40
  88. package/lib/funcs/_.scss +0 -5
  89. package/lib/funcs/_get-color.scss +0 -3
  90. package/lib/funcs/_math.scss +0 -5
  91. package/lib/funcs/_merge-palette.scss +0 -12
  92. package/lib/funcs/_rem.scss +0 -104
  93. package/lib/funcs/_strings.scss +0 -35
  94. package/lib/grid/_.scss +0 -4
  95. package/lib/grid/_col.scss +0 -117
  96. package/lib/grid/_row.scss +0 -117
  97. package/lib/grid/_square.scss +0 -34
  98. package/lib/grid/_wrap.scss +0 -39
  99. package/lib/helpers/_.scss +0 -9
  100. package/lib/helpers/_displays.scss +0 -151
  101. package/lib/helpers/_flexbox.scss +0 -105
  102. package/lib/helpers/_margins.scss +0 -13
  103. package/lib/helpers/_negates.scss +0 -171
  104. package/lib/helpers/_scrolls.scss +0 -55
  105. package/lib/helpers/_texts.scss +0 -101
  106. package/lib/helpers/_visibility.scss +0 -34
  107. package/lib/htmls/_.scss +0 -4
  108. package/lib/htmls/_headings.scss +0 -29
  109. package/lib/htmls/_links.scss +0 -11
  110. package/lib/mixins/_.scss +0 -9
  111. package/lib/mixins/_border-radius.scss +0 -61
  112. package/lib/mixins/_border.scss +0 -48
  113. package/lib/mixins/_dimensions.scss +0 -48
  114. package/lib/mixins/_font-size.scss +0 -22
  115. package/lib/mixins/_line-height.scss +0 -19
  116. package/lib/mixins/_margin-padding.scss +0 -66
  117. package/lib/mixins/_root-variables.scss +0 -11
  118. package/lib/mixins/_theme.scss +0 -25
  119. package/lib/styles.scss +0 -19
  120. package/lib/variables/_.scss +0 -4
  121. package/lib/variables/_breakpoints.scss +0 -5
  122. package/lib/variables/_colors.scss +0 -60
  123. package/lib/variables/_defaults.scss +0 -53
  124. /package/{lib/helpers → sass/utilities}/_pointers.scss +0 -0
@@ -1,25 +0,0 @@
1
- @use '../globals' as globals;
2
-
3
- @mixin color($name) {
4
- color: get-color(globals.$PALETTE, $name);
5
- }
6
-
7
- @mixin backgroundColor($name) {
8
- background-color: get-color(globals.$PALETTE, $name);
9
- }
10
-
11
- // Generate helpers classes for colors
12
- // From auto generated file `_colors.scss`
13
- // .is-<color> { /* setup font-color */ }
14
- // .bg-<color> { /* setup background-color */ }
15
- @each $name, $value in globals.$PALETTE {
16
- // generate font colors
17
- .is-#{$name} {
18
- color: $value;
19
- }
20
-
21
- // generate background colors
22
- .bg-#{$name} {
23
- background-color: $value;
24
- }
25
- }
package/lib/styles.scss DELETED
@@ -1,19 +0,0 @@
1
- /**
2
- *
3
- * !!! DO NOT REORDER -> Declarative loading
4
- *
5
- */
6
- @use 'variables/' as *;
7
- @use 'globals';
8
- @use 'funcs/' as *;
9
-
10
- // Core
11
- @use 'mixins/' as *;
12
- @use 'reset';
13
- @use 'htmls/' as *;
14
- @use 'grid/' as *;
15
- @use 'helpers/' as *;
16
-
17
- .debug * {
18
- outline: 1px solid rgb(255 0 0 / 30%);
19
- }
@@ -1,4 +0,0 @@
1
- // !!! DOT NOT REORDER !!!
2
- @use 'defaults';
3
- @use 'breakpoints';
4
- @use 'colors';
@@ -1,5 +0,0 @@
1
- $breakpoints-xs: 320px !default; // Mobile Small
2
- $breakpoints-sm: 576px !default; // Mobile
3
- $breakpoints-md: 768px !default; // Tablet
4
- $breakpoints-lg: 1024px !default; // Desktop
5
- $breakpoints-xl: 1248px !default; // Desktop Extra Large
@@ -1,60 +0,0 @@
1
- // Black & White Colors
2
- $black: #000000 !default;
3
- $white: #ffffff !default;
4
- $grey: #7f7f7f !default;
5
-
6
- // Primary colors
7
- $blue: #0000ff !default;
8
- $red: #ff0000 !default;
9
- $green: #00ff00 !default;
10
- $yellow: #f0f00f !default;
11
- $magenta: #800080 !default;
12
- $orange: #ffa500 !default;
13
-
14
- // Usual colors
15
- $warning: #2b2925 !default;
16
- $success: #268744 !default;
17
- $info: #0762c8 !default;
18
- $error: #ff0000 !default;
19
-
20
- $g100: #f8f8f8 !default;
21
- $g200: #f0f0f0 !default;
22
- $g300: #e7e7e7 !default;
23
- $g400: #cecece !default;
24
- $g500: #9c9c9c !default;
25
- $g600: #6a6a6a !default;
26
- $g700: #383838 !default;
27
- $g750: #2a2a2a !default;
28
- $g800: #1e1e1e !default;
29
-
30
- $pastel-blue: #5db0d7 !default;
31
- $pastel-yellow: #f9da9b !default;
32
- $pastel-red: #db8c62 !default;
33
- $pastel-green: #42b983 !default;
34
- $pastel-purple: #9a7fd5 !default;
35
- $pastel-verde: #40d4c7 !default;
36
- $pastel-kaki: #b9c580 !default;
37
- $pastel-gold: #c7b654 !default;
38
-
39
- $chrome-red: #ff8080 !default;
40
- $chrome-yellow: #ffdd9e !default;
41
- $chrome-black: #242424 !default;
42
- $chrome-grey: #333333 !default;
43
- $chrome-light: #525252 !default;
44
- $chrome-white: #e6e6e6 !default;
45
-
46
- $airbnb: #ff385c !default;
47
- $amazon: #ff9900 !default;
48
- $twitch: #9147ff !default;
49
- $youtube: #ff0000 !default;
50
- $twitter: #1da1f2 !default;
51
- $facebook: #365899 !default;
52
- $instagram: linear-gradient(
53
- 45deg,
54
- #405de6,
55
- #5851db,
56
- #833ab4,
57
- #c13584,
58
- #e1306c,
59
- #fd1d1d
60
- ) !default;
@@ -1,53 +0,0 @@
1
- $BORDER_STYLE: solid !default;
2
- $LINE_HEIGHT_MAP: (12) !default;
3
- $BODY_FONT_SIZE: 16px !default;
4
- $SPACINGS_MAP: (3, 6, 9, 12, 18, 24, 26, 48) !default;
5
- $BORDER_SIZE_MAP: (1, 2, 3, 4, 5, 6, 7, 8, 10) !default;
6
- $BORDER_RADIUS_MAP: (2, 3, 4, 5, 6, 7, 8, 10, 12, 24) !default;
7
- $FONT_SIZES_MAP: (6, 7, 8, 9, 10, 11, 12, 14, 24, 26, 32, 40) !default;
8
- $DIMENSIONS_MAP: (
9
- 3,
10
- 5,
11
- 6,
12
- 10,
13
- 15,
14
- 20,
15
- 25,
16
- 30,
17
- 33,
18
- 35,
19
- 40,
20
- 45,
21
- 50,
22
- 55,
23
- 60,
24
- 66,
25
- 70,
26
- 75,
27
- 80,
28
- 85,
29
- 90,
30
- 95,
31
- 100
32
- ) !default;
33
-
34
- $body-width: 100vw !default;
35
- $rem-fallback: true !default; // always force callback
36
- $rem-px-only: false !default;
37
-
38
- // Borders
39
- $border-style: $BORDER_STYLE;
40
- $border-size-map: $BORDER_SIZE_MAP;
41
- $border-radius-map: $BORDER_RADIUS_MAP;
42
-
43
- // Fonts
44
- $body-font-size: $BODY_FONT_SIZE;
45
- $default-font-size: 12px !default;
46
- $line-height-map: $LINE_HEIGHT_MAP;
47
- $font-sizes-map: $FONT_SIZES_MAP;
48
- $rem-baseline: $body-font-size !default;
49
-
50
- // Dimensions
51
- $default-spacing: 12px !default;
52
- $spacings-map: $SPACINGS_MAP;
53
- $dimensions-map: $DIMENSIONS_MAP;
File without changes