@iroco/ui 1.0.0-13 → 1.0.0-15

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 (7) hide show
  1. package/dist/Button.svelte +8 -4
  2. package/dist/Button.svelte.d.ts +7 -3
  3. package/dist/ImageArticle.svelte +6 -3
  4. package/dist/NavBar.svelte +6 -3
  5. package/dist/scss/button.scss +7 -3
  6. package/dist/scss/colors.scss +6 -2
  7. package/package.json +1 -1
package/dist/Button.svelte CHANGED
@@ -4,12 +4,13 @@
4
4
  export let disabled = false;
5
5
  export let kind = "basic";
6
6
  export let size = "regular";
7
+ export let fullWidth = false;
7
8
  export let id;
8
9
  </script>
9
10
 
10
11
  <button
11
12
  {id}
12
- class={`iroco-ui-button iroco-ui-button--${size} iroco-ui-button--${kind}`}
13
+ class={`iroco-ui-button iroco-ui-button--${size} iroco-ui-button--${kind} ${fullWidth?'iroco-ui-button--full-width':''}`}
13
14
  class:disabled
14
15
  {type}
15
16
  {disabled}
@@ -190,9 +191,9 @@ export let id;
190
191
  border-radius: 0.3em;
191
192
  }
192
193
  .iroco-ui-button--basic {
193
- color: var(--btn-basic-label);
194
- background: var(--btn-basic-bg);
195
- border: 1px solid var(--btn-basic-border);
194
+ color: var(--btn-secondary-label);
195
+ background: var(--btn-secondary-bg);
196
+ border: 1px solid var(--btn-secondary-border);
196
197
  }
197
198
  .iroco-ui-button--dark {
198
199
  background: var(--dark-btn-primary-bg);
@@ -229,6 +230,9 @@ export let id;
229
230
  .iroco-ui-button.disabled:hover, .iroco-ui-button:disabled:hover {
230
231
  box-shadow: none;
231
232
  }
233
+ .iroco-ui-button--full-width {
234
+ width: 100%;
235
+ }
232
236
 
233
237
  .iroco-ui-link {
234
238
  background: none;
package/dist/Button.svelte.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import { SvelteComponent } from "svelte";
2
2
  declare const __propDef: {
3
3
  props: {
4
- type?: string | undefined;
4
+ type?: 'button' | 'reset' | 'submit' | null | undefined;
5
5
  disabled?: boolean | undefined;
6
6
  kind?: "success" | "danger" | "dark" | "basic" | undefined;
7
7
  size?: "small" | "regular" | undefined;
8
+ fullWidth?: boolean | undefined;
8
9
  id: string;
9
10
  };
10
11
  events: {
@@ -20,9 +21,9 @@ export type ButtonProps = typeof __propDef.props;
20
21
  export type ButtonEvents = typeof __propDef.events;
21
22
  export type ButtonSlots = typeof __propDef.slots;
22
23
  export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
23
- get type(): string | undefined;
24
+ get type(): "button" | "reset" | "submit" | null | undefined;
24
25
  /**accessor*/
25
- set type(_: string | undefined);
26
+ set type(_: "button" | "reset" | "submit" | null | undefined);
26
27
  get disabled(): boolean | undefined;
27
28
  /**accessor*/
28
29
  set disabled(_: boolean | undefined);
@@ -32,6 +33,9 @@ export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, B
32
33
  get size(): "small" | "regular" | undefined;
33
34
  /**accessor*/
34
35
  set size(_: "small" | "regular" | undefined);
36
+ get fullWidth(): boolean | undefined;
37
+ /**accessor*/
38
+ set fullWidth(_: boolean | undefined);
35
39
  get id(): string;
36
40
  /**accessor*/
37
41
  set id(_: string);
package/dist/ImageArticle.svelte CHANGED
@@ -358,9 +358,9 @@ export let reversed = false;
358
358
  border-radius: 0.3em;
359
359
  }
360
360
  .iroco-ui-button--basic {
361
- color: var(--btn-basic-label);
362
- background: var(--btn-basic-bg);
363
- border: 1px solid var(--btn-basic-border);
361
+ color: var(--btn-secondary-label);
362
+ background: var(--btn-secondary-bg);
363
+ border: 1px solid var(--btn-secondary-border);
364
364
  }
365
365
  .iroco-ui-button--dark {
366
366
  background: var(--dark-btn-primary-bg);
@@ -397,6 +397,9 @@ export let reversed = false;
397
397
  .iroco-ui-button.disabled:hover, .iroco-ui-button:disabled:hover {
398
398
  box-shadow: none;
399
399
  }
400
+ .iroco-ui-button--full-width {
401
+ width: 100%;
402
+ }
400
403
  .iroco-ui-link {
401
404
  background: none;
402
405
  border: none;
package/dist/NavBar.svelte CHANGED
@@ -375,9 +375,9 @@ $:
375
375
  border-radius: 0.3em;
376
376
  }
377
377
  .iroco-ui-button--basic {
378
- color: var(--btn-basic-label);
379
- background: var(--btn-basic-bg);
380
- border: 1px solid var(--btn-basic-border);
378
+ color: var(--btn-secondary-label);
379
+ background: var(--btn-secondary-bg);
380
+ border: 1px solid var(--btn-secondary-border);
381
381
  }
382
382
  .iroco-ui-button--dark {
383
383
  background: var(--dark-btn-primary-bg);
@@ -414,6 +414,9 @@ $:
414
414
  .iroco-ui-button.disabled:hover, .iroco-ui-button:disabled:hover {
415
415
  box-shadow: none;
416
416
  }
417
+ .iroco-ui-button--full-width {
418
+ width: 100%;
419
+ }
417
420
  .iroco-ui-link {
418
421
  background: none;
419
422
  border: none;
package/dist/scss/button.scss CHANGED
@@ -18,9 +18,9 @@
18
18
  border-radius: constants.$border-radius;
19
19
 
20
20
  &--basic {
21
- color: var(--btn-basic-label);
22
- background: var(--btn-basic-bg);
23
- border: 1px solid var(--btn-basic-border);
21
+ color: var(--btn-secondary-label);
22
+ background: var(--btn-secondary-bg);
23
+ border: 1px solid var(--btn-secondary-border);
24
24
  }
25
25
 
26
26
  &--dark {
@@ -70,6 +70,10 @@
70
70
  box-shadow: none;
71
71
  }
72
72
  }
73
+
74
+ &--full-width {
75
+ width: 100%;
76
+ }
73
77
  }
74
78
 
75
79
  .iroco-ui-link {
package/dist/scss/colors.scss CHANGED
@@ -24,7 +24,7 @@
24
24
  --color-primary-dark: #00a873;
25
25
 
26
26
  --color-secondary-light: #ffffff;
27
- --color-secondary: var(--color-beige);
27
+ --color-secondary: #f2ebe3;
28
28
  --color-secondary-dark: #a9a29e;
29
29
 
30
30
  /* feedback */
@@ -37,7 +37,7 @@
37
37
 
38
38
  /* typography */
39
39
  --color-text-light: #ffffff;
40
- --color-text: var(--color-beige);
40
+ --color-text: #f2ebe3;
41
41
  --color-text-op-50: #f2ebe380;
42
42
  --color-text-op-60: #f2ebe399;
43
43
  --color-text-dark: #464452;
@@ -61,6 +61,10 @@
61
61
  --dark-btn-primary-label: var(--color-beige);
62
62
  --dark-btn-primary-bg: var(--color-night-blue);
63
63
 
64
+ --btn-secondary-bg: var(--color-secondary);
65
+ --btn-secondary-border: var(--color-night-blue);
66
+ --btn-secondary-label: var(--color-night-blue);
67
+
64
68
  --btn-basic-label: var(--color-night-blue);
65
69
  --btn-basic-bg: var(--color-beige);
66
70
  --btn-basic-border: var(--color-night-blue);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@iroco/ui",
3
- "version": "1.0.0-13",
3
+ "version": "1.0.0-15",
4
4
  "description": "Iroco design system based on Svelte",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {