@graupl/graupl 1.0.0-alpha.3 → 1.0.0-alpha.5

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 (36) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/base/form/form.css.map +1 -1
  3. package/dist/base/link/link.css.map +1 -1
  4. package/dist/component/button/button.css.map +1 -1
  5. package/dist/graupl.css +1 -1
  6. package/dist/graupl.css.map +1 -1
  7. package/dist/layout/columns/columns.css.map +1 -1
  8. package/dist/layout/container/container.css.map +1 -1
  9. package/dist/state/focus/focus.css.map +1 -1
  10. package/dist/theme/theme.css +1 -1
  11. package/dist/theme/theme.css.map +1 -1
  12. package/dist/utilities/colors/colors.css +1 -1
  13. package/dist/utilities/colors/colors.css.map +1 -1
  14. package/package.json +2 -2
  15. package/scss/base/form/_defaults.scss +0 -2
  16. package/scss/base/form/_variables.scss +49 -39
  17. package/scss/base/link/_defaults.scss +0 -2
  18. package/scss/base/link/_variables.scss +12 -8
  19. package/scss/component/button/_defaults.scss +0 -2
  20. package/scss/component/button/_index.scss +19 -7
  21. package/scss/component/button/_variables.scss +47 -43
  22. package/scss/layout/columns/_defaults.scss +0 -2
  23. package/scss/layout/columns/_index.scss +5 -5
  24. package/scss/layout/columns/_variables.scss +16 -7
  25. package/scss/layout/container/_defaults.scss +0 -2
  26. package/scss/layout/container/_index.scss +16 -12
  27. package/scss/layout/container/_variables.scss +12 -8
  28. package/scss/mixins/_layer.scss +2 -2
  29. package/scss/state/focus/_defaults.scss +0 -2
  30. package/scss/state/focus/_variables.scss +13 -9
  31. package/scss/theme/_defaults.scss +4 -5
  32. package/scss/theme/_index.scss +13 -7
  33. package/scss/theme/_variables.scss +26 -6
  34. package/scss/utilities/colors/_defaults.scss +0 -2
  35. package/scss/utilities/colors/_index.scss +2 -2
  36. package/dist/utilities/background/background.css +0 -1
package/scss/theme/_variables.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  // Variables referencing custom properties.
2
2
 
3
3
  @use "defaults";
4
+ @use "../defaults" as root-defaults;
4
5
  @use "sass:map";
5
6
 
6
7
  // A colour map of base colours and their shades.
@@ -13,7 +14,10 @@ $colors: ();
13
14
 
14
15
  @each $shade, $value in $map {
15
16
  // Set the custom prop name and fallback value.
16
- $color-property: var(--#{defaults.$prefix}-#{$color}--#{$shade}, $value);
17
+ $color-property: var(
18
+ --#{root-defaults.$prefix}-#{$color}--#{$shade},
19
+ $value
20
+ );
17
21
 
18
22
  // Add the custom prop to the map.
19
23
  $color-map: map.merge(
@@ -52,15 +56,15 @@ $theme-active: ();
52
56
 
53
57
  // Set the custom prop names and fallback values.
54
58
  $light-property: var(
55
- --#{defaults.$prefix}-theme-light--#{$color}--#{$shade},
59
+ --#{root-defaults.$prefix}-theme-light--#{$color}--#{$shade},
56
60
  $value
57
61
  );
58
62
  $dark-property: var(
59
- --#{defaults.$prefix}-theme-dark--#{$color}--#{$shade},
63
+ --#{root-defaults.$prefix}-theme-dark--#{$color}--#{$shade},
60
64
  $dark-value
61
65
  );
62
66
  $active-property: var(
63
- --#{defaults.$prefix}-theme-active--#{$color}--#{$shade},
67
+ --#{root-defaults.$prefix}-theme-active--#{$color}--#{$shade},
64
68
  $light-property
65
69
  );
66
70
 
@@ -107,5 +111,21 @@ $theme-active: ();
107
111
  }
108
112
 
109
113
  // Font properties.
110
- $font-family: var(--#{defaults.$prefix}-font-family, #{defaults.$font-family});
111
- $font-size: var(--#{defaults.$prefix}-font-size, #{defaults.$font-size});
114
+ $global-font-family: var(
115
+ --#{root-defaults.$prefix}-global-font-family,
116
+ #{defaults.$global-font-family}
117
+ );
118
+ $global-font-size: var(
119
+ --#{root-defaults.$prefix}-global-font-size,
120
+ #{defaults.$global-font-size}
121
+ );
122
+
123
+ // Colour properties.
124
+ $global-font-color: var(
125
+ --#{root-defaults.$prefix}-global-font-color,
126
+ #{map.get(map.get($theme-active, primary), 900)}
127
+ );
128
+ $global-background: var(
129
+ --#{root-defaults.$prefix}-global-background,
130
+ #{map.get(map.get($theme-active, primary), 100)}
131
+ );
package/scss/utilities/colors/_defaults.scss CHANGED
@@ -3,5 +3,3 @@
3
3
  // Generally, these should not be used directly when styling components.
4
4
  // They are mainly used to provide default fallbacks for custom properties
5
5
  // which can be found in the `variables.scss` file.
6
-
7
- @forward "../../defaults";
package/scss/utilities/colors/_index.scss CHANGED
@@ -10,11 +10,11 @@
10
10
  @each $shade, $value in $map {
11
11
  $name: #{$color}-#{$shade};
12
12
 
13
- .background-#{$name} {
13
+ .bg-#{$name} {
14
14
  background: important.insert($value);
15
15
  }
16
16
 
17
- .color-#{$name} {
17
+ .text-#{$name} {
18
18
  color: important.insert($value);
19
19
  }
20
20
  }
package/dist/utilities/background/background.css DELETED
@@ -1 +0,0 @@
1
- body:before{border-bottom:2px solid #000;content:"Error: Undefined variable.\a \2577 \a 6 \2502 @if defaults.$use-important {\a \2502 ^^^^^^^^^^^^^^^^^^^^^^^\a \2575 \a scss/functions/_important.scss 6:7 insert()\a scss/utilities/background/_index.scss 14:21 @content\a scss/mixins/_layer.scss 11:7 layer()\a scss/utilities/background/_index.scss 8:1 @forward\a scss/utilities/background/background.scss 3:1 root stylesheet";display:block;font-family:Source Code Pro,SF Mono,Monaco,Inconsolata,Fira Mono,Droid Sans Mono,monospace,monospace;margin-bottom:1em;padding:1em;white-space:pre}