@yakad/ui 1.2.23-beta → 1.2.25-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 (7) hide show
  1. package/codeField/codeField.tsx +1 -0
  2. package/index.tsx +2 -2
  3. package/inputField/inputField.tsx +1 -0
  4. package/package.json +1 -1
  5. package/{thame/thame.module.css → theme/theme.module.css} +8 -8
  6. package/theme/theme.tsx +23 -0
  7. package/thame/thame.tsx +0 -20
package/codeField/codeField.tsx CHANGED
@@ -17,6 +17,7 @@ function CodeField(props: CodeFieldsProps) {
17
17
 
18
18
  return (
19
19
  <input
20
+ {...props}
20
21
  name={props.name}
21
22
  minLength={props.length}
22
23
  maxLength={props.length}
package/index.tsx CHANGED
@@ -19,7 +19,7 @@ import SvgIcon from "./svgIcon/svgIcon";
19
19
  import Loading from "./loading/loading";
20
20
  import CodeField from "./codeField/codeField";
21
21
  import InputField from "./inputField/inputField";
22
- import Thame from "./thame/thame";
22
+ import Theme from "./theme/theme";
23
23
  export {
24
24
  Button,
25
25
  AppBar,
@@ -42,5 +42,5 @@ export {
42
42
  Loading,
43
43
  CodeField,
44
44
  InputField,
45
- Thame,
45
+ Theme,
46
46
  };
package/inputField/inputField.tsx CHANGED
@@ -20,6 +20,7 @@ function InputField(props: InputFieldProps) {
20
20
  return (
21
21
  <label className={styles.field}>
22
22
  <input
23
+ {...props}
23
24
  name={props.name}
24
25
  disabled={props.disabled}
25
26
  placeholder="&nbsp;"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yakad/ui",
3
- "version": "1.2.23-beta",
3
+ "version": "1.2.25-beta",
4
4
  "description": "",
5
5
  "main": "./src/index.js",
6
6
  "scripts": {
package/{thame/thame.module.css → theme/theme.module.css} RENAMED
@@ -1,7 +1,7 @@
1
1
  .blue {
2
2
  --LightPrimaryColor: #1e64d4;
3
3
  --LightPrimaryContainerColor: #c2e7ff;
4
- --LightSecondaryColor: #121212;
4
+ --LightSecondaryColor: #55624c;
5
5
  --LightSecondaryContainerColor: #d9e7cb;
6
6
  --LightTertiaryColor: #386a20;
7
7
  --LightTertiaryContainerColor: #b7f397;
@@ -32,7 +32,7 @@
32
32
  --DarkErrorContainerColor: #f9dedc;
33
33
  --DarkOnPrimaryColor: #003738;
34
34
  --DarkOnPrimaryContainerColor: #c2e7ff;
35
- --DarkOnSecondaryColor: #121212;
35
+ --DarkOnSecondaryColor: #55624c;
36
36
  --DarkOnSecondaryContainerColor: #d9e7cb;
37
37
  --DarkOnTertiaryColor: #042100;
38
38
  --DarkOnTertiaryContainerColor: #b7f397;
@@ -44,7 +44,7 @@
44
44
  .green {
45
45
  --LightPrimaryColor: #386a20;
46
46
  --LightPrimaryContainerColor: #cad7bd;
47
- --LightSecondaryColor: #121212;
47
+ --LightSecondaryColor: #55624c;
48
48
  --LightSecondaryContainerColor: #d9e7cb;
49
49
  --LightTertiaryColor: #19686a;
50
50
  --LightTertiaryContainerColor: #a8eff0;
@@ -75,7 +75,7 @@
75
75
  --DarkErrorContainerColor: #f9dedc;
76
76
  --DarkOnPrimaryColor: #386a20;
77
77
  --DarkOnPrimaryContainerColor: #cad7bd;
78
- --DarkOnSecondaryColor: #121212;
78
+ --DarkOnSecondaryColor: #55624c;
79
79
  --DarkOnSecondaryContainerColor: #d9e7cb;
80
80
  --DarkOnTertiaryColor: #19686a;
81
81
  --DarkOnTertiaryContainerColor: #a8eff0;
@@ -88,7 +88,7 @@
88
88
  .pink {
89
89
  --LightPrimaryColor: #9c4146;
90
90
  --LightPrimaryContainerColor: #ffdad9;
91
- --LightSecondaryColor: #121212;
91
+ --LightSecondaryColor: #55624c;
92
92
  --LightSecondaryContainerColor: #d9e7cb;
93
93
  --LightTertiaryColor: #604003;
94
94
  --LightTertiaryContainerColor: #f1d1a2;
@@ -119,7 +119,7 @@
119
119
  --DarkErrorContainerColor: #f9dedc;
120
120
  --DarkOnPrimaryColor: #9c4146;
121
121
  --DarkOnPrimaryContainerColor: #ffdad9;
122
- --DarkOnSecondaryColor: #121212;
122
+ --DarkOnSecondaryColor: #55624c;
123
123
  --DarkOnSecondaryContainerColor: #d9e7cb;
124
124
  --DarkOnTertiaryColor: #604003;
125
125
  --DarkOnTertiaryContainerColor: #f1d1a2;
@@ -132,7 +132,7 @@
132
132
  .grow {
133
133
  --LightPrimaryColor: #616200;
134
134
  --LightPrimaryContainerColor: #e6e4bf;
135
- --LightSecondaryColor: #121212;
135
+ --LightSecondaryColor: #55624c;
136
136
  --LightSecondaryContainerColor: #d9e7cb;
137
137
  --LightTertiaryColor: #bfedd9;
138
138
  --LightTertiaryContainerColor: #f1d1a2;
@@ -163,7 +163,7 @@
163
163
  --DarkErrorContainerColor: #f9dedc;
164
164
  --DarkOnPrimaryColor: #616200;
165
165
  --DarkOnPrimaryContainerColor: #e6e4bf;
166
- --DarkOnSecondaryColor: #121212;
166
+ --DarkOnSecondaryColor: #55624c;
167
167
  --DarkOnSecondaryContainerColor: #d9e7cb;
168
168
  --DarkOnTertiaryColor: #042100;
169
169
  --DarkOnTertiaryContainerColor: #b7f397;
package/theme/theme.tsx ADDED
@@ -0,0 +1,23 @@
1
+ import React from "react";
2
+ import { joinClassNames, joinStyles } from "@yakad/lib";
3
+ import styles from "./theme.module.css";
4
+
5
+ interface ThemeProps extends React.HTMLAttributes<HTMLElement> {
6
+ mode?: "light" | "dark" | "system";
7
+ color?: "green" | "pink" | "grow" | "blue";
8
+ }
9
+
10
+ function Theme(props: ThemeProps) {
11
+ const joinedClassNames = joinClassNames(
12
+ props.mode ? styles[props.mode] : styles.system,
13
+ props.color ? styles[props.color] : styles.blue,
14
+ props.className!
15
+ );
16
+ return (
17
+ <div {...props} className={joinedClassNames}>
18
+ {props.children}
19
+ </div>
20
+ );
21
+ }
22
+
23
+ export default Theme;
package/thame/thame.tsx DELETED
@@ -1,20 +0,0 @@
1
- import Reat from "react";
2
- import { joinClassNames, joinStyles } from "@yakad/lib";
3
- import styles from "./thame.module.css";
4
-
5
- interface ThameProps extends React.HTMLAttributes<HTMLElement> {
6
- mode?: "light" | "dark" | "system";
7
- color?: "green" | "pink" | "grow" | "blue";
8
- }
9
-
10
- function Thame(props: ThameProps) {
11
- const joinedClassNames = joinClassNames(
12
- styles.blue,
13
- props.mode ? styles[props.mode] : styles.blue,
14
- props.color ? styles[props.color] : styles.blue,
15
- props.className!
16
- );
17
- return <div className={joinedClassNames}>{props.children}</div>;
18
- }
19
-
20
- export default Thame;