@treasuryspatial/viewer-ui-kit 0.1.41 → 0.1.42

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.
@@ -1 +1 @@
1
- {"version":3,"file":"LandingShell.d.ts","sourceRoot":"","sources":["../src/LandingShell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAsG1E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,UAAU,CAAC;IACrB,OAAO,EAAE,qBAAqB,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EACR,OAAO,EACP,aAAqB,EACrB,UAAkB,EAClB,SAAS,GACV,EAAE,iBAAiB,2CAuBnB"}
1
+ {"version":3,"file":"LandingShell.d.ts","sourceRoot":"","sources":["../src/LandingShell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAoI1E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,UAAU,CAAC;IACrB,OAAO,EAAE,qBAAqB,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,QAAQ,EACR,OAAO,EACP,aAAqB,EACrB,UAAkB,EAClB,SAAS,GACV,EAAE,iBAAiB,2CAuBnB"}
@@ -8,13 +8,15 @@ const Root = styled.main `
8
8
  color: var(--brand-text-primary);
9
9
  `;
10
10
  const Section = styled.section `
11
+ min-height: 100vh;
11
12
  display: flex;
12
13
  flex-direction: column;
13
- padding: calc(var(--ui-nav-height) + 28px) 0 56px;
14
+ padding-top: calc(var(--ui-nav-height) + 72px);
15
+ margin-bottom: 50px;
14
16
 
15
17
  @media (min-width: 1024px) {
16
- padding-top: calc(var(--ui-nav-height) + 40px);
17
- padding-bottom: 96px;
18
+ padding-top: calc(var(--ui-nav-height) + 85px);
19
+ padding-bottom: 140px;
18
20
  }
19
21
  `;
20
22
  const Row = styled.div `
@@ -31,6 +33,8 @@ const LeftColumn = styled.div `
31
33
 
32
34
  @media (min-width: 1024px) {
33
35
  width: 50%;
36
+ position: relative;
37
+ z-index: 1;
34
38
  }
35
39
  `;
36
40
  const RightColumn = styled.div `
@@ -41,15 +45,13 @@ const RightColumn = styled.div `
41
45
  }
42
46
  `;
43
47
  const Header = styled.div `
44
- max-width: 65vw;
45
- padding: 72px 24px 0;
48
+ max-width: min(65vw, 720px);
49
+ padding: 108px 24px 0 24px;
46
50
  font-family: var(--ui-font-family, system-ui);
47
51
  font-weight: 400;
48
- color: var(--brand-primary);
49
52
 
50
53
  @media (min-width: 768px) {
51
54
  padding-left: 48px;
52
- font-size: 36px;
53
55
  }
54
56
 
55
57
  @media (min-width: 1024px) {
@@ -57,24 +59,47 @@ const Header = styled.div `
57
59
  }
58
60
  `;
59
61
  const HeaderTitle = styled.div `
60
- font-size: clamp(34px, 3vw + 18px, 61px);
62
+ color: var(--brand-primary);
63
+ font-size: 32px;
61
64
  line-height: 1.02;
62
65
  letter-spacing: -0.03em;
66
+
67
+ @media (min-width: 768px) {
68
+ font-size: 36px;
69
+ }
70
+
71
+ @media (min-width: 1024px) {
72
+ font-size: 42px;
73
+ }
74
+
75
+ @media (min-width: 1440px) {
76
+ font-size: 61px;
77
+ }
63
78
  `;
64
79
  const HeaderStrap = styled.div `
65
- margin-top: 18px;
66
- font-size: clamp(22px, 2vw + 12px, 40px);
80
+ margin-top: 20px;
81
+ color: var(--brand-text-secondary);
82
+ font-size: 25px;
67
83
  line-height: 1.1;
68
84
  letter-spacing: -0.02em;
85
+
86
+ @media (min-width: 1024px) {
87
+ font-size: 35px;
88
+ }
89
+
90
+ @media (min-width: 1440px) {
91
+ font-size: 40px;
92
+ }
69
93
  `;
70
94
  const Body = styled.div `
71
95
  padding: 32px 24px 0;
72
- font-size: 15px;
73
- line-height: 1.8;
74
- color: var(--brand-text-secondary);
96
+ color: var(--brand-text-primary);
97
+ font-family: var(--ui-font-family, system-ui);
98
+ font-size: 16px;
99
+ line-height: 1.45;
75
100
 
76
101
  p {
77
- margin: 0 0 20px;
102
+ margin: 0 0 32px;
78
103
  }
79
104
 
80
105
  p:last-child {
@@ -87,7 +112,12 @@ const Body = styled.div `
87
112
  }
88
113
 
89
114
  @media (min-width: 1024px) {
90
- padding: 24px 84px 0 32px;
115
+ padding: 260px 84px 0 0;
116
+ max-width: 960px;
117
+ }
118
+
119
+ @media (min-width: 1440px) {
120
+ font-size: 20px;
91
121
  }
92
122
  `;
93
123
  export default function LandingShell({ manifest, content, showPoweredBy = false, showLogout = false, className, }) {
package/dist/LoginForm.js CHANGED
@@ -12,7 +12,7 @@ const Row = styled.div `
12
12
  display: flex;
13
13
  `;
14
14
  const LabelCell = styled.div `
15
- background: var(--brand-secondary);
15
+ background: #6b7280;
16
16
  width: 296px;
17
17
  padding: 16px;
18
18
  color: white;
@@ -23,7 +23,7 @@ const Input = styled.input `
23
23
  outline: none;
24
24
  flex: 1;
25
25
  border: none;
26
- background: color-mix(in srgb, var(--brand-panel) 88%, var(--brand-background) 12%);
26
+ background: #f2f2f5;
27
27
  padding: 16px;
28
28
  font-size: 16px;
29
29
  color: var(--brand-text-primary);
@@ -8,14 +8,14 @@ const Root = styled.main `
8
8
  color: var(--brand-text-primary);
9
9
  `;
10
10
  const Shell = styled.section `
11
- min-height: 100vh;
11
+ min-height: calc(100vh - var(--ui-nav-height));
12
12
  display: flex;
13
13
  align-items: center;
14
14
  justify-content: center;
15
- padding: calc(var(--ui-nav-height) + 40px) 24px 40px;
15
+ padding: calc(var(--ui-nav-height) + 16px) 32px 32px;
16
16
 
17
17
  @media (min-width: 768px) {
18
- padding: calc(var(--ui-nav-height) + 48px) 40px 48px;
18
+ padding: calc(var(--ui-nav-height) + 24px) 32px 32px;
19
19
  }
20
20
  `;
21
21
  const Inner = styled.div `
@@ -28,24 +28,24 @@ const Header = styled.header `
28
28
  const Title = styled.h1 `
29
29
  margin: 0;
30
30
  font-family: var(--ui-font-family, system-ui);
31
- font-size: clamp(44px, 7vw, 72px);
32
- line-height: 0.96;
33
- letter-spacing: -0.03em;
31
+ font-size: clamp(54px, 7vw, 72px);
32
+ line-height: 1;
33
+ letter-spacing: -0.02em;
34
34
  font-weight: 400;
35
35
  color: var(--brand-text-primary);
36
36
  `;
37
37
  const Strap = styled.p `
38
38
  margin: 16px 0 0;
39
- max-width: 42ch;
39
+ max-width: 672px;
40
40
  font-size: 18px;
41
- line-height: 1.45;
41
+ line-height: 1.6;
42
42
  color: var(--brand-text-secondary);
43
43
  `;
44
44
  const Body = styled.p `
45
- margin: 18px 0 0;
46
- max-width: 52ch;
47
- font-size: 15px;
48
- line-height: 1.75;
45
+ margin: 20px 0 0;
46
+ max-width: 720px;
47
+ font-size: 16px;
48
+ line-height: 1.7;
49
49
  color: var(--brand-text-secondary);
50
50
  `;
51
51
  const Disclaimer = styled.p `