coles-solid-library 0.1.1 → 0.2.2

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 (27) hide show
  1. package/dist/components/Button/Button.d.ts +4 -7
  2. package/dist/components/Chip/Chip.d.ts +0 -1
  3. package/dist/components/Container/container.d.ts +9 -0
  4. package/dist/components/Form/formGroup.d.ts +49 -23
  5. package/dist/components/Form/formHelp/formArray.d.ts +85 -0
  6. package/dist/components/Form/formHelp/models.d.ts +31 -0
  7. package/dist/components/Form/formHelp/validators.d.ts +81 -0
  8. package/dist/components/FormField/coleError.d.ts +7 -0
  9. package/dist/components/FormField/formField.d.ts +1 -1
  10. package/dist/components/FormField/formProvider.d.ts +9 -0
  11. package/dist/components/Header/header.d.ts +7 -0
  12. package/dist/components/Menu/menu.d.ts +9 -0
  13. package/dist/components/Menu/menuitem.d.ts +6 -0
  14. package/dist/components/Select/select.component.d.ts +0 -1
  15. package/dist/components/TabV2/tabs.d.ts +24 -0
  16. package/dist/components/TableV2/cell.d.ts +2 -1
  17. package/dist/components/TableV2/header.d.ts +1 -0
  18. package/dist/components/TableV2/table.d.ts +3 -3
  19. package/dist/components/TableV2/tableProvider.d.ts +1 -3
  20. package/dist/components/expansion/expansion.d.ts +0 -1
  21. package/dist/components/popup/popup.component.d.ts +0 -12
  22. package/dist/index.d.ts +5 -1
  23. package/dist/index.esm.js +1092 -642
  24. package/package.json +1 -1
  25. package/readme.md +37 -10
  26. package/themes/_variables.scss +28 -21
  27. package/themes/themes.scss +66 -58
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "coles-solid-library",
3
- "version": "0.1.1",
3
+ "version": "0.2.2",
4
4
  "description": "A SolidJS mostly UI library",
5
5
  "module": "dist/index.esm.js",
6
6
  "types": "dist/index.d.ts",
package/readme.md CHANGED
@@ -26,14 +26,13 @@ yarn add coles-solid-library
26
26
 
27
27
  Import and add use the following line in App.tsx from the library.
28
28
  It defaults to 'dark' but also has a default value of 'light'.
29
- And updates reactively.
29
+ Should be used inside a createEffect if you want reactive updating.
30
30
  ```ts
31
31
  addTheme()
32
32
  ```
33
33
 
34
34
  At the top of index.scss place the following line. It adds the dark theme
35
- and lightTheme and the addTheme() requires it. It will default to light without it
36
- and that version is broken as of 0.1.0
35
+ and lightTheme and the addTheme() requires it. It will default to light without it.
37
36
  ```scss
38
37
  @use 'coles-solid-library/themes/themes.scss';
39
38
  ```
@@ -42,19 +41,47 @@ and that version is broken as of 0.1.0
42
41
 
43
42
  Here's a basic example of how to use the library:
44
43
 
45
- ```jsx
46
- import { Button, addTheme } from 'coles-solid-library';
44
+ ```tsx
45
+ import { createSignal, type Component } from 'solid-js';
46
+ import { addTheme, Body, Cell, Column, Header, Row, Table } from 'coles-solid-library';
47
+ import styles from './App.module.scss';
47
48
 
48
- function App() {
49
- addTheme('light');
49
+ interface Person {
50
+ name: string;
51
+ age: number;
52
+ }
53
+ const App: Component = () => {
54
+ const [data, setData] = createSignal([{ name: 'John', age: 23 }, { name: 'Jane', age: 24 }]);
55
+ addTheme();
50
56
  return (
51
- <div>
52
- <Button />
57
+ <div >
58
+ <Body>
59
+ <Table style={{"border": "1px solid white"}} data={data()} columns={['name', 'age']}>
60
+ <Column name='name' >
61
+ <Header>Name</Header>
62
+ <Cell<Person>>{(row) => row.name}</Cell>
63
+ <Cell footer>The Names</Cell>
64
+ <Cell<Person> rowNumber={2} colSpan={2}>{(row) => `${row.name} is ${row.age}`}</Cell>
65
+ </Column>
66
+
67
+ <Column name='age'>
68
+ <Header>Age</Header>
69
+ <Cell<Person>>{(row) => row.age}</Cell>
70
+ <Cell footer>The Ages</Cell>
71
+ </Column>
72
+
73
+ <Row header style={{"border-bottom": "1px solid white"}} />
74
+ <Row class={styles.textCenter} />
75
+ <Row class={styles.textCenter} style={{"border-bottom": "1px solid white"}} rowNumber={2} />
76
+ <Row footer />
77
+ </Table>
78
+ </Body>
53
79
  </div>
54
80
  );
55
- }
81
+ };
56
82
 
57
83
  export default App;
84
+
58
85
  ```
59
86
 
60
87
  ## License
package/themes/_variables.scss CHANGED
@@ -1,26 +1,32 @@
1
1
  @use 'sass:color';
2
2
  // ------------- Theme Variables -------------
3
- // ------ Theme Colors
4
- $color-primary: var(--primary-color, #3F51B5);
5
- $color-primary-hover: var(--primary-color-hover, color.adjust(#3F51B5, $lightness: -10%));
6
- $color-primary-active: var(--primary-color-active, color.adjust(#3F51B5, $lightness: -10%));
7
- $color-primary-focus: var(--primary-color-focus, color.adjust(#3F51B5, $lightness: -15%));
8
- $color-on-primary: var(--on-primary-color, #ffffff);
9
- $color-primary-dark: var(--primary-color-dark, #303F9F);
3
+ // ------ Theme Colors V2
4
+ $color-primary: var(--primary-color, #4CAF50);
5
+ $color-primary-variant: var(--primary-color-varient, #43A047);
6
+ $color-secondary: var(--secondary-color, #14b9c3);
7
+ $color-secondary-variant: var(--secondary-color-varient, #0b969f);
10
8
 
11
- $color-secondary: var(--secondary-color, #5C6BC0);
12
- $color-secondary-hover: var(--secondary-color-hover, color.adjust(#5C6BC0, $lightness: -10%));
13
- $color-secondary-active: var(--secondary-color-active, color.adjust(#5C6BC0, $lightness: -10%));
14
- $color-secondary-focus: var(--secondary-color-focus, color.adjust(#5C6BC0, $lightness: -15%));
15
- $color-on-secondary: var(--on-secondary-color, #ffffff);
16
- $color-secondary-dark: var(--secondary-color-dark, #3949AB);
9
+ $color-background: var(--background-color, #ffffff);
10
+ $color-surface: var(--surface-color, #EEEEEE);
11
+ $color-surface-variant: var(--surface-color-variant, #ccc);
12
+ $color-container: var(--container-color, #ffffff);
13
+ $color-error: var(--error-color, #B00020);
17
14
 
18
- $color-tertiary: var(--tertiary-color, rgba(25, 118, 210, 0.87));
19
- $color-tertiary-hover: var(--tertiary-color-hover, color.adjust(rgba(25, 118, 210, 0.87), $lightness: -10%));
20
- $color-tertiary-active: var(--tertiary-color-active, color.adjust(rgba(25, 118, 210, 0.87), $lightness: -10%));
21
- $color-tertiary-focus: var(--tertiary-color-focus, color.adjust(rgba(25, 118, 210, 0.87), $lightness: -15%));
22
- $color-on-tertiary: var(--on-tertiary-color, #FFF);
23
- $color-tertiary-dark: var(--tertiary-color-dark, rgba(25, 118, 210, 1));
15
+ $header-background-color: var(--header-background-color, #2E7D32);
16
+ $header-on-background-color: var(--header-on-background-color, #fff);
17
+ $subheader-background-color: var(--subheader-background-color, #388E3C);
18
+ $subheader-on-background-color: var(--subheader-on-background-color, #fff);
19
+
20
+ $color-on-primary: var(--on-primary-color, #fff);
21
+ $color-on-secondary: var(--on-secondary-color, #000000);
22
+ $color-on-background: var(--on-background-color, #000000);
23
+ $color-on-surface: var(--on-surface-color, #000000);
24
+ $color-on-error: var(--on-error-color, #ffffff);
25
+ $color-on-container: var(--on-container-color, #000);
26
+
27
+ $color-text-emphasis-high: var(--text-emphasis-high, 100%);
28
+ $color-text-emphasis-medium: var(--text-emphasis-medium, 87%);
29
+ $color-text-emphasis-disabled: var(--text-emphasis-disabled, 60%);
24
30
 
25
31
  $mobile: 768px;
26
32
 
@@ -44,12 +50,13 @@ $shadow-elevation-2: 0px 3px 6px rgba(0, 0, 0, 0.30);
44
50
  $shadow-elevation-3: 0px 10px 20px rgba(0, 0, 0, 0.45);
45
51
 
46
52
  // Transitions
47
- $transition-duration: 0.3s;
48
- $transition-easing: ease-in-out;
53
+ $transition-duration: 0.5s;
54
+ $transition-easing: ease;
49
55
 
50
56
 
51
57
  // Define typography scale (e.g., font sizes for headings and body)
52
58
  $font-family: 'Roboto, sans-serif';
59
+ $font-size-small: 10px;
53
60
  $font-size-base: 16px;
54
61
  $font-size-h1: 96px;
55
62
  $font-size-h2: 60px;
package/themes/themes.scss CHANGED
@@ -1,72 +1,79 @@
1
1
  @use 'variables' as *;
2
2
 
3
- $hoverPercent: 5%;
4
- $activePercent: 10%;
5
- $focusPercent: 15%;
6
-
7
- [data-theme="dark"] {
8
- --primary-color: #282828;
9
- --primary-color-hover: darken(#282828, $hoverPercent);
10
- --primary-color-active: darken(#282828, $activePercent);
11
- --primary-color-focus: darken(#282828, $focusPercent);
12
- --on-primary-color: #ffffff;
13
- --primary-color-dark: #262626;
14
-
15
- --secondary-color: #323232;
16
- --secondary-color-hover: darken(#323232, $hoverPercent);
17
- --secondary-color-active: darken(#323232, $activePercent);
18
- --secondary-color-focus: darken(#323232, $focusPercent);
19
- --on-secondary-color: #ffffff;
20
- --secondary-color-dark: #303030;
21
-
22
- --tertiary-color: #757575;
23
- --tertiary-color-hover: darken(#757575, $hoverPercent);
24
- --tertiary-color-active: darken(#757575, $activePercent);
25
- --tertiary-color-focus: darken(#757575, $focusPercent);
26
- --on-tertiary-color: #000000;
27
- --tertiary-color-dark: #666666;
28
-
29
- --warn-color: #b00020;
30
- --on-warn-color: #000000;
3
+ /*
4
+ Surface - A role used for backgrounds and large, low-emphasis elements.
5
+ Primary, Secondary, and Tertiary - Accenct color roles used to emphasize or de emphasize forground elements.
6
+ Primary - High-emphasis fills, text, and icons against surface.
7
+ Primary Container - standout fill color agaist surface for key components.
8
+ Secondary - Less prominent fills, text, and icons against surface.
9
+ Secondary Container - Less prominent fill color against surface for key components for recessive components like tonal buttons.
10
+ Container - Roles used as a fill color for foreground elements like buttons. Not for text or icons.
11
+ On - Roles used for text and icons on top of it's paired color.
12
+ Varient - Roles with this term offer a lower emphasis alternative to its non-varient pair.
13
+ Surface - default for backgrounds, and container colors for components like cards, sheets, and dialogs
14
+ */
15
+ [data-theme="light"] {
16
+ // Light Theme Baseline Colors
17
+ // --primary-color: #6200EE;
18
+ // --primary-color-varient: #3700B3;
19
+ // --secondary-color: #03DAC6;
20
+ // --secondary-color-varient: #018786;
21
+ --primary-color: #4CAF50;
22
+ --primary-color-varient: #43A047;
23
+ --secondary-color: #14b9c3;
24
+ --secondary-color-varient: #0b969f;
25
+ --background-color: #e0e0e0;
26
+ --surface-color: #f5f5f5;
27
+ --surface-color-variant: #ccc;
28
+ --container-color: #fff;
29
+ --error-color: #B00020;
31
30
 
32
- --background-color: #121212;
33
- --on-background-color: #ffffff;
31
+ --header-background-color: #2E7D32;
32
+ --header-on-background-color: #fff;
33
+ --subheader-background-color: #388E3C;
34
+ --subheader-on-background-color: #fff;
34
35
 
35
- --surface-color: #f5f5f5;
36
+ --on-primary-color: #fff;
37
+ --on-secondary-color: #000000;
38
+ --on-background-color: #000000;
36
39
  --on-surface-color: #000000;
37
- }
38
-
39
- [data-theme="light"] {
40
- --primary-color: #3F51B5;
41
- --primary-color-hover: darken(#3F51B5, $hoverPercent);
42
- --primary-color-active: darken(#3F51B5, $activePercent);
43
- --primary-color-focus: darken(#3F51B5, $focusPercent);
44
- --on-primary-color: #ffffff;
45
- --primary-color-dark: #303F9F;
40
+ --on-container-color: #000;
41
+ --on-error-color: #ffffff;
46
42
 
47
- --secondary-color: #5C6BC0;
48
- --secondary-color-hover: darken(#5C6BC0, $hoverPercent);
49
- --secondary-color-active: darken(#5C6BC0, $activePercent);
50
- --secondary-color-focus: darken(#5C6BC0, $focusPercent);
51
- --on-secondary-color: #ffffff;
52
- --secondary-color-dark: #3949AB;
43
+ --text-emphasis-high: 87%;
44
+ --text-emphasis-medium: 60%;
45
+ --text-emphasis-disabled: 38%;
46
+ }
53
47
 
54
- --tertiary-color: rgba(25, 118, 210, 0.87);
55
- --tertiary-color-hover: darken(#1976D2, $hoverPercent);
56
- --tertiary-color-active: darken(#1976D2, $activePercent);
57
- --tertiary-color-focus: darken(#1976D2, $focusPercent);
58
- --on-tertiary-color: #000000;
59
- --tertiary-color-dark: #1976D2;;
48
+ [data-theme="dark"] {
49
+ // Dark Theme Baseline Colors
50
+ --primary-color: #9e6fd8;
51
+ --primary-color-varient: #3700B3;
52
+ --secondary-color: #189ad1;
53
+ --secondary-color-varient: #0b84b9;
54
+ --background-color: #121212;
55
+ --surface-color: #1e1e1e;
56
+ --surface-color-variant: #333333;
57
+ --container-color: #222222;
58
+ --error-color: #CF6679;
60
59
 
61
- --warn-color: #b00020;
62
- --on-warn-color: #ffffff;
60
+ --header-background-color: #1e1e1e;
61
+ --header-on-background-color: #fff;
62
+ --subheader-background-color: #2a2727;
63
+ --subheader-on-background-color: #fff;
63
64
 
64
- --background-color: #EEE;
65
- --on-background-color: #000000;
65
+ --on-primary-color: #000000;
66
+ --on-secondary-color: #000000;
67
+ --on-background-color: #ffffff;
68
+ --on-surface-color: #ffffff;
69
+ --on-container-color: #ffffff;
70
+ --on-error-color: #000000;
66
71
 
67
- --surface-color: #f5f5f5;
68
- --on-surface-color: #000000;
72
+ --text-emphasis-high: 87%;
73
+ --text-emphasis-medium: 60%;
74
+ --text-emphasis-disabled: 38%;
69
75
  }
76
+
70
77
  :root {
71
78
  --spacing-1: #{$spacing-1};
72
79
  --spacing-2: #{$spacing-2};
@@ -85,6 +92,7 @@ $focusPercent: 15%;
85
92
  --transition-easing: #{$transition-easing};
86
93
 
87
94
  --font-family: #{$font-family};
95
+ --font-size-small: #{$font-size-small};
88
96
  --font-size-base: #{$font-size-base};
89
97
  --font-size-h1: #{$font-size-h1};
90
98
  --font-size-h2: #{$font-size-h2};