@yakad/ui 1.2.20-beta → 1.2.22-beta

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 (14) hide show
  1. package/appBar/appBar.module.css +3 -3
  2. package/button/button.module.css +11 -11
  3. package/card/card.module.css +3 -3
  4. package/codeField/codeField.d.ts +1 -0
  5. package/codeField/codeField.js +1 -1
  6. package/codeField/codeField.js.map +1 -1
  7. package/codeField/codeField.tsx +2 -0
  8. package/hr/hr.module.css +3 -3
  9. package/inputField/inputField.d.ts +1 -0
  10. package/inputField/inputField.js +1 -1
  11. package/inputField/inputField.js.map +1 -1
  12. package/inputField/inputField.module.css +12 -14
  13. package/inputField/inputField.tsx +2 -0
  14. package/package.json +1 -1
package/appBar/appBar.module.css CHANGED
@@ -7,8 +7,8 @@
7
7
  height: 5rem;
8
8
  padding: 0 2rem;
9
9
  border-bottom: 0.1rem solid #7d7d7d40;
10
- background: var(--primaryColo);
11
- color: var(--onPrimaryColor);
12
- fill: var(--onPrimaryColor);
10
+ background: var(--surfaceColor, #222222);
11
+ color: var(--onSurfaceColor);
12
+ fill: var(--onSurfaceColor);
13
13
  user-select: none;
14
14
  }
package/button/button.module.css CHANGED
@@ -65,26 +65,26 @@
65
65
  box-shadow: inset 0 0 10rem #7d7d7d30;
66
66
  }
67
67
  .button:invalid {
68
- border: 0.1rem solid var(--errorColor);
68
+ border: 0.1rem solid var(--errorColor, #b00020);
69
69
  }
70
70
 
71
71
  .outlined {
72
72
  border: 0.1rem solid #7d7d7d70;
73
73
  }
74
74
  .filled {
75
- background: var(--primaryContainerColor);
76
- color: var(--onPrimaryContainerColor);
77
- fill: var(--onPrimaryColor);
75
+ background: var(--secondaryColor, #1e64d4);
76
+ color: var(--onSecondaryColor, #ffffff);
77
+ fill: var(--onSecondaryColor, #ffffff);
78
78
  }
79
79
  .tonal {
80
- background: var(--tertiaryColor);
81
- color: var(--onTertiaryColor);
82
- fill: var(--onTertiaryColor);
80
+ background: var(--secondaryContainerColor, #c2e7ff);
81
+ color: var(--onSecondaryContainerColor, #002021);
82
+ fill: var(--onSecondaryContainerColor, #002021);
83
83
  }
84
84
  .elevated {
85
- background-color: var(--onPrimaryColor);
86
- color: var(--onSurfaceColor);
87
- fill: var(--onSurfaceColor);
85
+ background-color: var(--onPrimaryColor, #ffffff);
86
+ color: var(--surfaceColor, #1e64d4);
87
+ fill: var(--surfaceColor, #1e64d4);
88
88
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
89
89
  }
90
90
  .link {
@@ -103,7 +103,7 @@
103
103
  height: 0.1rem;
104
104
  padding: 0;
105
105
  margin: 0 auto;
106
- background-color: var(--secondaryColor);
106
+ background-color: var(--secondaryColor, #1e64d4);
107
107
  transition: 0.3s;
108
108
  }
109
109
 
package/card/card.module.css CHANGED
@@ -3,9 +3,9 @@
3
3
  padding: 3rem;
4
4
  box-sizing: border-box;
5
5
  border-radius: 2rem;
6
- background: var(--surfaceColor);
7
- color: var(--onSurfaceColor);
8
- fill: var(--onSurfaceColor);
6
+ background: var(--backgroundColor, #ffffff);
7
+ color: var(--onBackgroundColor, #000000);
8
+ fill: var(--onBackgroundColor, #000000);
9
9
  box-shadow: 0px 6px 10px 0px hsla(0, 0%, 0%, 0.14),
10
10
  0px 1px 18px 0px hsla(0, 0%, 0%, 0.12),
11
11
  0px 3px 5px -1px hsla(0, 0%, 0%, 0.2);
package/codeField/codeField.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from "react";
2
2
  interface CodeFieldsProps extends React.HTMLAttributes<HTMLElement> {
3
3
  length?: number;
4
+ name?: string;
4
5
  }
5
6
  declare function CodeField(props: CodeFieldsProps): JSX.Element;
6
7
  export default CodeField;
package/codeField/codeField.js CHANGED
@@ -4,7 +4,7 @@ import styles from "./codeField.module.css";
4
4
  function CodeField(props) {
5
5
  const joinedClassNames = joinClassNames(styles.input, props.className);
6
6
  const joinedStyles = joinStyles({ width: "calc(1.5ch * " + props.length + ")" }, props.style);
7
- return (React.createElement("input", { minLength: props.length, maxLength: props.length, className: joinedClassNames, style: joinedStyles }));
7
+ return (React.createElement("input", { name: props.name, minLength: props.length, maxLength: props.length, className: joinedClassNames, style: joinedStyles }));
8
8
  }
9
9
  export default CodeField;
10
10
  //# sourceMappingURL=codeField.js.map
package/codeField/codeField.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"codeField.js","sourceRoot":"","sources":["codeField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAM5C,SAAS,SAAS,CAAC,KAAsB;IACrC,MAAM,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,SAAU,CAAC,CAAC;IAExE,MAAM,YAAY,GAAG,UAAU,CAC3B,EAAE,KAAK,EAAE,eAAe,GAAG,KAAK,CAAC,MAAM,GAAG,GAAG,EAAE,EAC/C,KAAK,CAAC,KAAM,CACf,CAAC;IAEF,OAAO,CACH,+BACI,SAAS,EAAE,KAAK,CAAC,MAAM,EACvB,SAAS,EAAE,KAAK,CAAC,MAAM,EACvB,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,YAAY,GACrB,CACL,CAAC;AACN,CAAC;AAED,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"codeField.js","sourceRoot":"","sources":["codeField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAO5C,SAAS,SAAS,CAAC,KAAsB;IACrC,MAAM,gBAAgB,GAAG,cAAc,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,SAAU,CAAC,CAAC;IAExE,MAAM,YAAY,GAAG,UAAU,CAC3B,EAAE,KAAK,EAAE,eAAe,GAAG,KAAK,CAAC,MAAM,GAAG,GAAG,EAAE,EAC/C,KAAK,CAAC,KAAM,CACf,CAAC;IAEF,OAAO,CACH,+BACI,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,SAAS,EAAE,KAAK,CAAC,MAAM,EACvB,SAAS,EAAE,KAAK,CAAC,MAAM,EACvB,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,YAAY,GACrB,CACL,CAAC;AACN,CAAC;AAED,eAAe,SAAS,CAAC"}
package/codeField/codeField.tsx CHANGED
@@ -4,6 +4,7 @@ import styles from "./codeField.module.css";
4
4
 
5
5
  interface CodeFieldsProps extends React.HTMLAttributes<HTMLElement> {
6
6
  length?: number;
7
+ name?: string;
7
8
  }
8
9
 
9
10
  function CodeField(props: CodeFieldsProps) {
@@ -16,6 +17,7 @@ function CodeField(props: CodeFieldsProps) {
16
17
 
17
18
  return (
18
19
  <input
20
+ name={props.name}
19
21
  minLength={props.length}
20
22
  maxLength={props.length}
21
23
  className={joinedClassNames}
package/hr/hr.module.css CHANGED
@@ -4,13 +4,13 @@
4
4
  padding: 0;
5
5
  margin: 0.5rem auto;
6
6
  background: none;
7
- border-top: 0.1rem solid var(--secondaryContainerColor);
7
+ border-top: 0.1rem solid var(--secondaryContainerColor, #c2e7ff);
8
8
  }
9
9
  .dotted {
10
- border-top: 0.4rem dotted var(--secondaryContainerColor);
10
+ border-top: 0.4rem dotted var(--secondaryContainerColor, #c2e7ff);
11
11
  }
12
12
  .dashed {
13
- border-top: 0.2rem dashed var(--secondaryContainerColor);
13
+ border-top: 0.2rem dashed var(--secondaryContainerColor, #c2e7ff);
14
14
  }
15
15
  .shortLine {
16
16
  width: 30rem;
package/inputField/inputField.d.ts CHANGED
@@ -4,6 +4,7 @@ interface InputFieldProps extends React.HTMLAttributes<HTMLInputElement> {
4
4
  type?: string;
5
5
  placeholder?: string;
6
6
  disabled?: boolean;
7
+ name?: string;
7
8
  }
8
9
  declare function InputField(props: InputFieldProps): JSX.Element;
9
10
  export default InputField;
package/inputField/inputField.js CHANGED
@@ -4,7 +4,7 @@ import styles from "./inputField.module.css";
4
4
  function InputField(props) {
5
5
  const joinedClassNames = joinClassNames(styles.input, props.variant ? styles[props.variant] : styles.standard, props.className);
6
6
  return (React.createElement("label", { className: styles.field },
7
- React.createElement("input", { disabled: props.disabled, placeholder: "\u00A0", type: props.type, className: joinedClassNames }),
7
+ React.createElement("input", { name: props.name, disabled: props.disabled, placeholder: "\u00A0", type: props.type, className: joinedClassNames }),
8
8
  React.createElement("span", { className: styles.placeholder }, props.placeholder)));
9
9
  }
10
10
  export default InputField;
package/inputField/inputField.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"inputField.js","sourceRoot":"","sources":["inputField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAS7C,SAAS,UAAU,CAAC,KAAsB;IACtC,MAAM,gBAAgB,GAAG,cAAc,CACnC,MAAM,CAAC,KAAK,EACZ,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,EACvD,KAAK,CAAC,SAAU,CACnB,CAAC;IAEF,OAAO,CACH,+BAAO,SAAS,EAAE,MAAM,CAAC,KAAK;QAC1B,+BACI,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,WAAW,EAAC,QAAQ,EACpB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,SAAS,EAAE,gBAAgB,GAC7B;QACF,8BAAM,SAAS,EAAE,MAAM,CAAC,WAAW,IAAG,KAAK,CAAC,WAAW,CAAQ,CAC3D,CACX,CAAC;AACN,CAAC;AAED,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"inputField.js","sourceRoot":"","sources":["inputField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAU7C,SAAS,UAAU,CAAC,KAAsB;IACtC,MAAM,gBAAgB,GAAG,cAAc,CACnC,MAAM,CAAC,KAAK,EACZ,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,EACvD,KAAK,CAAC,SAAU,CACnB,CAAC;IAEF,OAAO,CACH,+BAAO,SAAS,EAAE,MAAM,CAAC,KAAK;QAC1B,+BACI,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,WAAW,EAAC,QAAQ,EACpB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,SAAS,EAAE,gBAAgB,GAC7B;QACF,8BAAM,SAAS,EAAE,MAAM,CAAC,WAAW,IAAG,KAAK,CAAC,WAAW,CAAQ,CAC3D,CACX,CAAC;AACN,CAAC;AAED,eAAe,UAAU,CAAC"}
package/inputField/inputField.module.css CHANGED
@@ -7,7 +7,7 @@
7
7
  left: 1.2rem;
8
8
  transform: translateY(-50%);
9
9
  font-size: 1rem;
10
- color: var(--onBackgroundColor);
10
+ color: var(--onBackgroundColor, #000000);
11
11
  transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;
12
12
  }
13
13
  .input:placeholder-shown + .placeholder {
@@ -18,7 +18,7 @@
18
18
  .input:focus + .placeholder {
19
19
  top: 0rem;
20
20
  font-size: 1rem;
21
- color: var(--onBackgroundColor);
21
+ color: var(--onBackgroundColor, #000000);
22
22
  }
23
23
 
24
24
  .input {
@@ -28,7 +28,7 @@
28
28
  outline: none;
29
29
  transition: border-color 0.3 ease;
30
30
  box-sizing: border-box;
31
- color: var(--onBackgroundColor);
31
+ color: var(--onBackgroundColor, #000000);
32
32
  -webkit-appearance: none;
33
33
  -ms-appearance: none;
34
34
  -moz-appearance: none;
@@ -37,8 +37,6 @@
37
37
  .input::after {
38
38
  font-size: 1.4rem;
39
39
  display: block;
40
- background-color: red;
41
- content: "Hello";
42
40
  z-index: 10;
43
41
  }
44
42
 
@@ -49,7 +47,7 @@
49
47
  }
50
48
  .input.standard:valid,
51
49
  .input.standard:focus {
52
- border-color: var(--primaryColor);
50
+ border-color: var(--primaryColor, #121212);
53
51
  }
54
52
 
55
53
  .input.outlined {
@@ -61,14 +59,14 @@
61
59
  padding: 0 0.5rem;
62
60
  }
63
61
  .input.outlined + .placeholder {
64
- border-color: var(--onBackgroundColor);
65
- background: var(--surfaceColor);
62
+ border-color: var(--onBackgroundColor, #000000);
63
+ background: var(--surfaceColor, #222222);
66
64
  }
67
65
 
68
66
  .input.outlined:valid,
69
67
  .input.outlined:focus + .placeholder {
70
- border-color: var(--onBackgroundColor);
71
- background: var(--surfaceColor);
68
+ border-color: var(--onBackgroundColor, #000000);
69
+ background: var(--surfaceColor, #222222);
72
70
  }
73
71
 
74
72
  .input.filled {
@@ -78,16 +76,16 @@
78
76
  }
79
77
 
80
78
  .input:invalid {
81
- border-color: var(--errorColor);
79
+ border-color: var(--errorColor, #b00020);
82
80
  }
83
81
 
84
82
  .input:invalid + .placeholder {
85
- color: var(--errorColor);
83
+ color: var(--errorColor, #b00020);
86
84
  }
87
85
  .input.standard:focus:invalid {
88
- border-color: var(--errorColor);
86
+ border-color: var(--errorColor, #b00020);
89
87
  }
90
88
  .input.filled:invalid {
91
- border-bottom: solid 0.2rem var(--errorColor);
89
+ border-bottom: solid 0.2rem var(--errorColor, #b00020);
92
90
  border-radius: 0;
93
91
  }
package/inputField/inputField.tsx CHANGED
@@ -7,6 +7,7 @@ interface InputFieldProps extends React.HTMLAttributes<HTMLInputElement> {
7
7
  type?: string;
8
8
  placeholder?: string;
9
9
  disabled?: boolean;
10
+ name?: string;
10
11
  }
11
12
 
12
13
  function InputField(props: InputFieldProps) {
@@ -19,6 +20,7 @@ function InputField(props: InputFieldProps) {
19
20
  return (
20
21
  <label className={styles.field}>
21
22
  <input
23
+ name={props.name}
22
24
  disabled={props.disabled}
23
25
  placeholder="&nbsp;"
24
26
  type={props.type}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yakad/ui",
3
- "version": "1.2.20-beta",
3
+ "version": "1.2.22-beta",
4
4
  "description": "",
5
5
  "main": "./src/index.js",
6
6
  "scripts": {