@moreonion/foundist 3.2.3 → 3.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 (3) hide show
  1. package/package.json +2 -2
  2. package/src/scss/form/_donation-amount-button.scss +81 -47
  3. package/src/scss/form/_settings.scss +1 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@moreonion/foundist",
3
- "version": "3.2.3",
3
+ "version": "3.2.4",
4
4
  "description": "Foundation based default theme for Impact Stack landing pages.",
5
5
  "author": "More Onion <kontakt@more-onion.at>",
6
6
  "license": "MIT",
@@ -26,7 +26,7 @@
26
26
  "prepare": "husky install"
27
27
  },
28
28
  "dependencies": {
29
- "@moreonion/foundation-base": "^3.2.1",
29
+ "@moreonion/foundation-base": "^3.2.2",
30
30
  "vite-plugin-nunjucks": "^0.1.10"
31
31
  },
32
32
  "lint-staged": {
package/src/scss/form/_donation-amount-button.scss CHANGED
@@ -4,6 +4,7 @@
4
4
  // used in "donation-amount" form components.
5
5
 
6
6
  @use "sass:color";
7
+ @use "sass:list";
7
8
  @use "sass:map";
8
9
  @use "sass:meta";
9
10
 
@@ -15,27 +16,17 @@ $donation-amount-background-color: if(
15
16
  ) !default;
16
17
  $donation-amount-background-color-checked: $option-button-background-checked !default;
17
18
 
18
- // Colors derived from base colors by default
19
- $donation-amount-text-color: if(
20
- $donation-amount-background-color == transparent,
21
- $donation-amount-background-color-checked,
22
- if(
23
- $donation-amount-background-color == $option-button-background,
24
- $option-button-color,
25
- color-pick-contrast($donation-amount-background-color, ($button-color, $button-color-alt))
26
- )
27
- ) !default;
28
- $donation-amount-text-color-checked: if(
29
- $donation-amount-background-color-checked == $option-button-background-checked,
30
- $option-button-color-checked,
31
- color-pick-contrast($donation-amount-background-color-checked, ($button-color, $button-color-alt))
32
- ) !default;
19
+ // Button border colors
33
20
  $donation-amount-border-color: if(
34
21
  $option-button-fill == hollow,
35
22
  $donation-amount-background-color-checked,
36
23
  transparent
37
24
  ) !default;
38
- $donation-amount-border-color-checked: transparent !default;
25
+ $donation-amount-border-color-checked: if(
26
+ $donation-amount-background-color-checked == $option-button-background-checked,
27
+ $option-button-border-color-checked,
28
+ transparent
29
+ ) !default;
39
30
  $donation-amount-border-color-hover: color.scale(
40
31
  $donation-amount-border-color,
41
32
  $lightness: $button-hollow-hover-lightness
@@ -49,6 +40,27 @@ $donation-amount-border-color-focus: if(
49
40
  $donation-amount-border-color-hover
50
41
  ) !default;
51
42
 
43
+ // Button text colors
44
+ $donation-amount-text-color: if(
45
+ $donation-amount-background-color == transparent,
46
+ $donation-amount-border-color,
47
+ if(
48
+ $donation-amount-background-color == $option-button-background,
49
+ $option-button-color,
50
+ color-pick-contrast($donation-amount-background-color, ($button-color, $button-color-alt))
51
+ )
52
+ ) !default;
53
+ $donation-amount-text-color-hover: if(
54
+ $donation-amount-background-color == transparent,
55
+ $donation-amount-border-color-hover,
56
+ $donation-amount-text-color
57
+ ) !default;
58
+ $donation-amount-text-color-checked: if(
59
+ $donation-amount-background-color-checked == $option-button-background-checked,
60
+ $option-button-color-checked,
61
+ color-pick-contrast($donation-amount-background-color-checked, ($button-color, $button-color-alt))
62
+ ) !default;
63
+
52
64
  // Button typography
53
65
  $donation-amount-font-size: $large-font-size !default;
54
66
  $donation-amount-text-offset: if(
@@ -71,42 +83,64 @@ $donation-amount-max-buttons-per-row: 3 !default;
71
83
 
72
84
  .donation-amount {
73
85
  // Button styles.
74
- input + label.button {
75
- @include button-expand;
76
- padding: $donation-amount-button-padding;
77
- border-radius: $donation-amount-border-radius;
78
- border-width: $donation-amount-border-width;
79
- font-size: $donation-amount-font-size;
80
- line-height: grid-lineheight($donation-amount-font-size);
81
-
82
- @if ($donation-amount-font-size == $large-font-size) {
83
- @include breakpoint(small down) {
84
- font-size: $lead-font-size;
85
- line-height: $lead-lineheight;
86
+ input[type="radio"] {
87
+ & + .button {
88
+ @include button-expand;
89
+ padding: $donation-amount-button-padding;
90
+ border-radius: $donation-amount-border-radius;
91
+ border-width: $donation-amount-border-width;
92
+ font-size: $donation-amount-font-size;
93
+ line-height: grid-lineheight($donation-amount-font-size);
94
+
95
+ @if ($donation-amount-font-size == $large-font-size) {
96
+ @include breakpoint(small down) {
97
+ font-size: $lead-font-size;
98
+ line-height: $lead-lineheight;
99
+ }
86
100
  }
87
- }
88
101
 
89
- // Default state
90
- border-color: $donation-amount-border-color;
91
- background-color: $donation-amount-background-color;
92
- color: $donation-amount-text-color;
93
- }
102
+ // Default state
103
+ // (only override values that differ from option buttons)
104
+ @if $option-button-fill == hollow {
105
+ @if $donation-amount-border-color != $option-button-background {
106
+ border-color: $donation-amount-border-color;
107
+ }
108
+ @if $donation-amount-background-color != transparent {
109
+ background-color: $donation-amount-background-color;
110
+ }
111
+ @if $donation-amount-text-color != $option-button-background {
112
+ color: $donation-amount-text-color;
113
+ }
114
+ } @else {
115
+ @if $donation-amount-border-color != list.nth($button-border, -1) {
116
+ border-color: $donation-amount-border-color;
117
+ }
118
+ @if $donation-amount-background-color != $option-button-background {
119
+ background-color: $donation-amount-background-color;
120
+ }
121
+ @if $donation-amount-text-color != $option-button-color {
122
+ color: $donation-amount-text-color;
123
+ }
124
+ }
125
+ }
94
126
 
95
- // Checked state
96
- input:checked + label.button {
97
- border-color: $donation-amount-border-color-checked;
98
- background-color: $donation-amount-background-color-checked;
99
- color: $donation-amount-text-color-checked;
100
- }
127
+ // Checked state
128
+ &:checked + .button {
129
+ border-color: $donation-amount-border-color-checked;
130
+ background-color: $donation-amount-background-color-checked;
131
+ color: $donation-amount-text-color-checked;
132
+ }
101
133
 
102
- // Hover for unchecked buttons
103
- input:not(:disabled, :checked) + label.button:hover {
104
- border-color: $donation-amount-border-color-hover;
105
- }
134
+ // Hover for unchecked buttons
135
+ &:not(:disabled, :checked) + .button:hover {
136
+ border-color: $donation-amount-border-color-hover;
137
+ color: $donation-amount-text-color-hover;
138
+ }
106
139
 
107
- // Focus for all buttons
108
- input:not(:disabled):focus-visible + label.button {
109
- border-color: $donation-amount-border-color-focus;
140
+ // Focus for all buttons
141
+ &:not(:disabled):focus-visible + .button {
142
+ border-color: $donation-amount-border-color-focus;
143
+ }
110
144
  }
111
145
 
112
146
  // Grid container
package/src/scss/form/_settings.scss CHANGED
@@ -37,6 +37,7 @@ $button-padding: rem-calc($base-line-height * 0.625) - $button-border-width 1em
37
37
  $button-radius: 0.25rem !default;
38
38
  $button-background: map.get($button-palette, primary) !default;
39
39
  $button-background-hover-lightness: 10% !default;
40
+ $button-hollow-hover-lightness: -15% !default;
40
41
  $button-background-hover: color.scale(
41
42
  $button-background,
42
43
  $lightness: $button-background-hover-lightness