@yakad/ui 1.2.42-beta → 1.2.44-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/button/button.module.css +3 -3
  2. package/container/container.d.ts +1 -0
  3. package/container/container.js +1 -1
  4. package/container/container.js.map +1 -1
  5. package/container/container.module.css +16 -0
  6. package/container/container.tsx +2 -0
  7. package/package.json +1 -1
package/button/button.module.css CHANGED
@@ -82,9 +82,9 @@
82
82
  fill: var(--onPrimaryContainerColor, #041e49);
83
83
  }
84
84
  .tonal {
85
- background: var(--primaryContainerColor, #c2e7ff);
86
- color: var(--onPrimaryContainerColor, #002021);
87
- fill: var(--onPrimaryContainerColor, #002021);
85
+ background: var(--tertiaryColor, #c4eed0);
86
+ color: var(--onTertiaryColor, #072711);
87
+ fill: var(--onTertiaryColor, #072711);
88
88
  }
89
89
  .elevated {
90
90
  background-color: var(--onSecondaryColor, #ffffff);
package/container/container.d.ts CHANGED
@@ -2,6 +2,7 @@ import React from "react";
2
2
  declare type ScreenSize = "xs" | "sm" | "md" | "lg" | "xl";
3
3
  interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
4
4
  maxWidth?: ScreenSize;
5
+ background?: "dotted";
5
6
  }
6
7
  declare function Container(props: ContainerProps): JSX.Element;
7
8
  export default Container;
package/container/container.js CHANGED
@@ -2,7 +2,7 @@ import React from "react";
2
2
  import { joinClassNames } from "@yakad/lib";
3
3
  import styles from "./container.module.css";
4
4
  function Container(props) {
5
- const joinedClassNames = joinClassNames(props.maxWidth ? styles[props.maxWidth] : "", styles.container, props.className);
5
+ const joinedClassNames = joinClassNames(props.maxWidth ? styles[props.maxWidth] : "", props.background ? styles[props.background] : "", styles.container, props.className);
6
6
  return (React.createElement("div", { ...props, className: joinedClassNames }, props.children));
7
7
  }
8
8
  export default Container;
package/container/container.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"container.js","sourceRoot":"","sources":["container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAc,MAAM,YAAY,CAAC;AACxD,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAQ5C,SAAS,SAAS,CAAC,KAAqB;IACtC,MAAM,gBAAgB,GAAG,cAAc,CACrC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,EAC5C,MAAM,CAAC,SAAS,EAChB,KAAK,CAAC,SAAU,CACjB,CAAC;IAEF,OAAO,CACL,gCAAS,KAAK,EAAE,SAAS,EAAE,gBAAgB,IACxC,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AAED,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"container.js","sourceRoot":"","sources":["container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAc,MAAM,YAAY,CAAC;AACxD,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAS5C,SAAS,SAAS,CAAC,KAAqB;IACtC,MAAM,gBAAgB,GAAG,cAAc,CACrC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,EAC5C,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,EAChD,MAAM,CAAC,SAAS,EAChB,KAAK,CAAC,SAAU,CACjB,CAAC;IAEF,OAAO,CACL,gCAAS,KAAK,EAAE,SAAS,EAAE,gBAAgB,IACxC,KAAK,CAAC,QAAQ,CACX,CACP,CAAC;AACJ,CAAC;AAED,eAAe,SAAS,CAAC"}
package/container/container.module.css CHANGED
@@ -2,22 +2,38 @@ div.container {
2
2
  display: flex;
3
3
  flex-direction: inherit;
4
4
  width: 100%;
5
+ padding: 2rem;
5
6
  margin: auto;
6
7
  box-sizing: border-box;
7
8
  }
8
9
 
9
10
  div.container.xs {
10
11
  max-width: 44.4rem;
12
+ padding-left: calc((100% - 44.4rem)/2);
13
+ padding-right: calc((100% - 44.4rem)/2);
11
14
  }
12
15
  div.container.sm {
13
16
  max-width: 60rem;
17
+ padding-left: calc((100% - 60rem)/2);
18
+ padding-right: calc((100% - 60rem)/2);
14
19
  }
15
20
  div.container.md {
16
21
  max-width: 90rem;
22
+ padding-left: calc((100% - 90rem)/2);
23
+ padding-right: calc((100% - 90rem)/2);
17
24
  }
18
25
  div.container.lg {
19
26
  max-width: 120rem;
27
+ padding-left: calc((100% - 120rem)/2);
28
+ padding-right: calc((100% - 120rem)/2);
20
29
  }
21
30
  div.container.xl {
22
31
  max-width: 150rem;
32
+ padding-left: calc((100% - 150rem)/2);
33
+ padding-right: calc((100% - 150rem)/2);
23
34
  }
35
+
36
+ div.container.dotted {
37
+ background-image: radial-gradient(var(--surfaceContainerLowestColor) 0.8px, var(--surfaceContainerHighestColor) 0.5px);
38
+ background-size: 10px 10px;
39
+ }
package/container/container.tsx CHANGED
@@ -6,11 +6,13 @@ type ScreenSize = "xs" | "sm" | "md" | "lg" | "xl";
6
6
 
7
7
  interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
8
8
  maxWidth?: ScreenSize;
9
+ background?: "dotted";
9
10
  }
10
11
 
11
12
  function Container(props: ContainerProps) {
12
13
  const joinedClassNames = joinClassNames(
13
14
  props.maxWidth ? styles[props.maxWidth] : "",
15
+ props.background ? styles[props.background] : "",
14
16
  styles.container,
15
17
  props.className!
16
18
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yakad/ui",
3
- "version": "1.2.42-beta",
3
+ "version": "1.2.44-beta",
4
4
  "description": "",
5
5
  "main": "./src/index.js",
6
6
  "scripts": {