@iroco/ui 1.14.17 → 1.14.19

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.
@@ -25,3 +25,6 @@
25
25
  <Story name="Flash" args={{ type: 'flash' }} />
26
26
  <Story name="Success" args={{ type: 'success' }} />
27
27
  <Story name="No close button" args={{ showClose: false }} />
28
+ <Story name="Larger" args={{ fontSize: 'larger' }} />
29
+ <Story name="Smaller" args={{ fontSize: 'smaller' }} />
30
+ <Story name="Inherit" args={{ fontSize: 'inherit' }} />
package/dist/Alert.svelte CHANGED
@@ -6,6 +6,7 @@
6
6
  type?: 'success' | 'danger' | 'flash';
7
7
  showClose?: boolean;
8
8
  fullWidth?: boolean;
9
+ fontSize?: 'smaller' | 'larger' | 'inherit';
9
10
  onclose?: MouseEventHandler<HTMLButtonElement>;
10
11
  children?: import('svelte').Snippet;
11
12
  }
@@ -14,12 +15,13 @@
14
15
  type = 'success',
15
16
  showClose = true,
16
17
  fullWidth = false,
18
+ fontSize = 'larger',
17
19
  onclose,
18
20
  children
19
21
  }: Props = $props();
20
22
  </script>
21
23
 
22
- <div class={['alert', `alert--${type}`, { fullWidth }]}>
24
+ <div class={['alert', `alert--${type}`, { fullWidth }, fontSize]}>
23
25
  {#if showClose}
24
26
  <button onclick={onclose} class="alert__close">
25
27
  <IconClose width="2em" height="2em" />
@@ -122,6 +124,14 @@
122
124
  --color-body: var(--color-background);
123
125
  }
124
126
 
127
+ .larger {
128
+ font-size: larger;
129
+ }
130
+
131
+ .smaller {
132
+ font-size: smaller;
133
+ }
134
+
125
135
  .alert {
126
136
  --color-icon-primary: var(--color-medium-light-grey);
127
137
  --color-icon-secondary: inherit;
@@ -132,7 +142,6 @@
132
142
  align-items: center;
133
143
  border-radius: 0.3em;
134
144
  padding: 0.25rem 2rem 0.25rem 1em;
135
- font-size: 1.2em;
136
145
  justify-content: center;
137
146
  margin-top: 0.75rem;
138
147
  margin-bottom: 1rem;
@@ -3,6 +3,7 @@ interface Props {
3
3
  type?: 'success' | 'danger' | 'flash';
4
4
  showClose?: boolean;
5
5
  fullWidth?: boolean;
6
+ fontSize?: 'smaller' | 'larger' | 'inherit';
6
7
  onclose?: MouseEventHandler<HTMLButtonElement>;
7
8
  children?: import('svelte').Snippet;
8
9
  }
@@ -199,7 +199,7 @@
199
199
  left: 0;
200
200
  height: 1em;
201
201
  width: 1em;
202
- background-color: var(--form-element-bg);
202
+ background-color: var(--color-background);
203
203
  border-radius: 50%;
204
204
  border: 1px solid;
205
205
  }
@@ -195,7 +195,7 @@
195
195
  left: 0;
196
196
  height: 1em;
197
197
  width: 1em;
198
- background-color: var(--form-element-bg);
198
+ background-color: var(--color-background);
199
199
  border-radius: 50%;
200
200
  border: 1px solid;
201
201
  }
@@ -257,7 +257,7 @@
257
257
  left: 0;
258
258
  height: 1em;
259
259
  width: 1em;
260
- background-color: var(--form-element-bg);
260
+ background-color: var(--color-background);
261
261
  border-radius: 50%;
262
262
  border: 1px solid;
263
263
  }
@@ -95,7 +95,7 @@
95
95
  left: 0;
96
96
  height: 1em;
97
97
  width: 1em;
98
- background-color: var(--form-element-bg);
98
+ background-color: var(--color-background);
99
99
  border-radius: 50%;
100
100
  border: 1px solid;
101
101
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@iroco/ui",
3
- "version": "1.14.17",
3
+ "version": "1.14.19",
4
4
  "description": "Iroco design system based on Svelte",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {