@graupl/graupl 1.0.0-alpha.12 → 1.0.0-alpha.13

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 (88) hide show
  1. package/CHANGELOG.md +34 -0
  2. package/dist/base/button.css +1 -1
  3. package/dist/base/button.css.map +1 -1
  4. package/dist/base/form.css +1 -1
  5. package/dist/base/form.css.map +1 -1
  6. package/dist/base/link.css +1 -1
  7. package/dist/base/link.css.map +1 -1
  8. package/dist/base/table.css +1 -1
  9. package/dist/base/table.css.map +1 -1
  10. package/dist/base.css +1 -1
  11. package/dist/base.css.map +1 -1
  12. package/dist/component/card.css +2 -0
  13. package/dist/component/card.css.map +1 -0
  14. package/dist/component/input-group.css +1 -1
  15. package/dist/component/input-group.css.map +1 -1
  16. package/dist/component/menu.css +2 -0
  17. package/dist/component/menu.css.map +1 -0
  18. package/dist/component/navigation.css +2 -0
  19. package/dist/component/navigation.css.map +1 -0
  20. package/dist/component.css +1 -1
  21. package/dist/component.css.map +1 -1
  22. package/dist/graupl.css +1 -1
  23. package/dist/graupl.css.map +1 -1
  24. package/dist/layout/columns.css +1 -1
  25. package/dist/layout/columns.css.map +1 -1
  26. package/dist/layout/flex-columns.css +2 -0
  27. package/dist/layout/flex-columns.css.map +1 -0
  28. package/dist/layout.css +1 -1
  29. package/dist/layout.css.map +1 -1
  30. package/dist/theme/typography.css +1 -1
  31. package/dist/theme/typography.css.map +1 -1
  32. package/dist/theme.css +1 -1
  33. package/dist/theme.css.map +1 -1
  34. package/dist/utilities/order.css +2 -0
  35. package/dist/utilities/order.css.map +1 -0
  36. package/dist/utilities/spacing.css +1 -1
  37. package/dist/utilities/spacing.css.map +1 -1
  38. package/dist/utilities/typography.css +1 -1
  39. package/dist/utilities/typography.css.map +1 -1
  40. package/dist/utilities.css +1 -1
  41. package/dist/utilities.css.map +1 -1
  42. package/eslint.config.js +1 -0
  43. package/index.html +619 -325
  44. package/package.json +1 -1
  45. package/scss/component/card.scss +3 -0
  46. package/scss/component/menu.scss +3 -0
  47. package/scss/component/navigation.scss +3 -0
  48. package/scss/layout/flex-columns.scss +3 -0
  49. package/scss/utilities/order.scss +3 -0
  50. package/src/js/navigation.js +34 -0
  51. package/src/scss/_defaults.scss +15 -1
  52. package/src/scss/base/button/_defaults.scss +8 -3
  53. package/src/scss/base/button/_index.scss +99 -36
  54. package/src/scss/base/button/_variables.scss +43 -11
  55. package/src/scss/base/form/_index.scss +2 -4
  56. package/src/scss/base/form/_variables.scss +8 -0
  57. package/src/scss/base/link/_defaults.scss +37 -6
  58. package/src/scss/base/link/_index.scss +72 -12
  59. package/src/scss/base/link/_variables.scss +175 -18
  60. package/src/scss/base/table/_index.scss +2 -4
  61. package/src/scss/base/table/_variables.scss +8 -0
  62. package/src/scss/component/_index.scss +3 -0
  63. package/src/scss/component/card/_defaults.scss +29 -0
  64. package/src/scss/component/card/_index.scss +143 -0
  65. package/src/scss/component/card/_variables.scss +185 -0
  66. package/src/scss/component/menu/_defaults.scss +65 -0
  67. package/src/scss/component/menu/_index.scss +304 -0
  68. package/src/scss/component/menu/_variables.scss +491 -0
  69. package/src/scss/component/navigation/_defaults.scss +29 -0
  70. package/src/scss/component/navigation/_index.scss +189 -0
  71. package/src/scss/component/navigation/_variables.scss +237 -0
  72. package/src/scss/functions/_theme.scss +16 -0
  73. package/src/scss/layout/_index.scss +1 -0
  74. package/src/scss/layout/columns/_index.scss +22 -0
  75. package/src/scss/layout/flex-columns/_defaults.scss +18 -0
  76. package/src/scss/layout/flex-columns/_index.scss +77 -0
  77. package/src/scss/layout/flex-columns/_variables.scss +26 -0
  78. package/src/scss/mixins/_media-queries.scss +8 -0
  79. package/src/scss/theme/typography/_defaults.scss +1 -1
  80. package/src/scss/theme/typography/_variables.scss +5 -2
  81. package/src/scss/utilities/_index.scss +2 -0
  82. package/src/scss/utilities/order/_defaults.scss +19 -0
  83. package/src/scss/utilities/order/_index.scss +35 -0
  84. package/src/scss/utilities/order/_variables.scss +6 -0
  85. package/src/scss/utilities/ratio/_defaults.scss +24 -0
  86. package/src/scss/utilities/ratio/_index.scss +26 -0
  87. package/src/scss/utilities/ratio/_variables.scss +9 -0
  88. package/src/scss/utilities/spacing/_index.scss +33 -16
package/src/scss/utilities/spacing/_index.scss CHANGED
@@ -6,16 +6,18 @@
6
6
  @use "../../functions/important";
7
7
  @use "../../variables" as root-variables;
8
8
  @use "../../defaults" as root-defaults;
9
+ @use "../../layout/columns/defaults" as columns-defaults;
10
+ @use "../../layout/flex-columns/defaults" as flex-columns-defaults;
9
11
 
10
12
  @include layer(utilities) {
11
13
  // For each spacing property, create a utility class.
12
14
  @each $name, $property in defaults.$spacing-properties {
13
15
  @each $key, $value in root-variables.$spacers {
14
16
  .#{$name}-#{$key} {
15
- // If we're dealing with gap, column-gap, or row-gap inside of .columns, we should update
17
+ // If we're dealing with gap, column-gap, or row-gap inside of #{columns-defaults.$columns-selector}, we should update
16
18
  // the columns-column-gap property instead of the raw property.
17
19
  @if $name == "g" {
18
- &.columns {
20
+ &#{columns-defaults.$columns-selector} {
19
21
  --#{root-defaults.$prefix}-columns-column-gap: #{important.insert(
20
22
  $value
21
23
  )};
@@ -24,34 +26,49 @@
24
26
  )};
25
27
  }
26
28
 
27
- &:not(.columns) {
28
- @each $prop in $property {
29
- #{$prop}: important.insert($value);
30
- }
29
+ &#{flex-columns-defaults.$flex-columns-selector} {
30
+ --#{root-defaults.$prefix}-flex-columns-column-gap: #{important.insert(
31
+ $value
32
+ )};
33
+ --#{root-defaults.$prefix}-flex-columns-row-gap: #{important.insert(
34
+ $value
35
+ )};
36
+ }
37
+
38
+ @each $prop in $property {
39
+ #{$prop}: important.insert($value);
31
40
  }
32
41
  } @else if $name == "cg" {
33
- &.columns {
42
+ &#{columns-defaults.$columns-selector} {
34
43
  --#{root-defaults.$prefix}-columns-column-gap: #{important.insert(
35
44
  $value
36
45
  )};
37
46
  }
38
47
 
39
- &:not(.columns) {
40
- @each $prop in $property {
41
- #{$prop}: important.insert($value);
42
- }
48
+ &#{flex-columns-defaults.$flex-columns-selector} {
49
+ --#{root-defaults.$prefix}-flex-columns-column-gap: #{important.insert(
50
+ $value
51
+ )};
52
+ }
53
+
54
+ @each $prop in $property {
55
+ #{$prop}: important.insert($value);
43
56
  }
44
57
  } @else if $name == "rg" {
45
- &.columns {
58
+ &#{columns-defaults.$columns-selector} {
46
59
  --#{root-defaults.$prefix}-columns-row-gap: #{important.insert(
47
60
  $value
48
61
  )};
49
62
  }
50
63
 
51
- &:not(.columns) {
52
- @each $prop in $property {
53
- #{$prop}: important.insert($value);
54
- }
64
+ &#{flex-columns-defaults.$flex-columns-selector} {
65
+ --#{root-defaults.$prefix}-flex-columns-row-gap: #{important.insert(
66
+ $value
67
+ )};
68
+ }
69
+
70
+ @each $prop in $property {
71
+ #{$prop}: important.insert($value);
55
72
  }
56
73
  } @else {
57
74
  @each $prop in $property {