claritas-web-framework 8.0.0 → 8.0.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 (8) hide show
  1. package/dist/index.css +1 -1
  2. package/dist/index.html +1 -1
  3. package/index.html +61 -11
  4. package/package.json +2 -2
  5. package/sass/_functions.scss +3 -3
  6. package/sass/_variables.scss +1 -2
  7. package/sass/mixins/_button.scss +11 -8
  8. package/sass/modules/_nav.scss +11 -5
package/dist/index.html CHANGED
@@ -1 +1 @@
1
- <!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Claritas Web Framework</title><script defer="defer" src="index.js"></script><link href="./index.css" rel="stylesheet"></head><body><div class="container padding-y--5"><div class="tabs--wrapper card border--red"><nav class="nav nav--tabs"><button type="button" class="nav--item">Click me</button> <button type="button" class="nav--item active">Click me</button> <button type="button" class="nav--item">Click me</button> <button type="button" class="nav--item">Click me</button></nav><div class="tabs--content active background--blue"><p class="color--red">hello, <a href="/">you</a></p></div></div></div></body></html>
1
+ <!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Claritas Web Framework</title><script defer="defer" src="index.js"></script><link href="./index.css" rel="stylesheet"></head><body><button type="button" class="button button--primary">Click me</button><hr/><footer class="background--primary padding-y--5"><div class="container"><div class="grid"><div class="col--desktop-6"><div class="grid"><div class="col--12">Logo</div><div class="col--tablet-4"><nav class="nav nav--column" aria-label="Solutions navigation"><span class="nav--title">Solutions</span> <a class="nav--item" href="/">User authentication</a> <a class="nav--item" href="/">User management</a> <a class="nav--item" href="/">Case management</a> <a class="nav--item" href="/">Document management</a> <a class="nav--item" href="/">Messaging integration</a> <a class="nav--item" href="/">Data integration</a> <a class="nav--item" href="/">Reporting</a> <a class="nav--item" href="/">Security & compliance</a></nav></div><div class="col--tablet-4"><nav class="nav nav--column" aria-label="About us navigation"><span class="nav--title">About Us</span> <a class="nav--item" href="/">Accreditation</a> <a class="nav--item" href="/">Sustainability</a> <a class="nav--item" href="/">Our story</a> <a class="nav--item" href="/">Our people</a></nav></div><div class="col--tablet-4"><nav class="nav nav--column" aria-label="Support navigation"><span class="nav--title">Support</span> <a class="nav--item" href="/">Docs</a> <a class="nav--item" href="/">Helpdesk</a></nav></div></div></div></div><hr class="margin-y--5"/><div class="grid"><div class="col--tablet-6"><p>Made in UK with love</p><p><small>&copy; Claritas Solutions Ltd 2023. All rights reserved. <a href="/">Privacy</a> <a href="/">Terms</a></small></p></div><div class="col--tablet-6"><nav class="nav" aria-label="Social media navigation"><a class="nav--item" href="/">Facebook</a> <a class="nav--item" href="/">X</a> <a class="nav--item" href="/">LinkedIn</a> <a class="nav--item" href="/">YouTube</a></nav></div></div></div></footer></body></html>
package/index.html CHANGED
@@ -8,18 +8,68 @@
8
8
  </head>
9
9
 
10
10
  <body>
11
- <div class="container padding-y--5">
12
- <div class="tabs--wrapper card border--red">
13
- <nav class="nav nav--tabs">
14
- <button type="button" class="nav--item">Click me</button>
15
- <button type="button" class="nav--item active">Click me</button>
16
- <button type="button" class="nav--item">Click me</button>
17
- <button type="button" class="nav--item">Click me</button>
18
- </nav>
19
- <div class="tabs--content active background--blue">
20
- <p class="color--red">hello, <a href="/">you</a></p>
11
+ <button type="button" class="button button--primary">Click me</button>
12
+ <hr />
13
+ <footer class="background--primary padding-y--5">
14
+ <div class="container">
15
+ <div class="grid">
16
+ <div class="col--desktop-6">
17
+ <div class="grid">
18
+ <div class="col--12">Logo</div>
19
+ <div class="col--tablet-4">
20
+ <nav class="nav nav--column" aria-label="Solutions navigation">
21
+ <span class="nav--title">Solutions</span>
22
+ <a class="nav--item" href="/">User authentication</a>
23
+ <a class="nav--item" href="/">User management</a>
24
+ <a class="nav--item" href="/">Case management</a>
25
+ <a class="nav--item" href="/">Document management</a>
26
+ <a class="nav--item" href="/">Messaging integration</a>
27
+ <a class="nav--item" href="/">Data integration</a>
28
+ <a class="nav--item" href="/">Reporting</a>
29
+ <a class="nav--item" href="/">Security & compliance</a>
30
+ </nav>
31
+ </div>
32
+ <div class="col--tablet-4">
33
+ <nav class="nav nav--column" aria-label="About us navigation">
34
+ <span class="nav--title">About Us</span>
35
+ <a class="nav--item" href="/">Accreditation</a>
36
+ <a class="nav--item" href="/">Sustainability</a>
37
+ <a class="nav--item" href="/">Our story</a>
38
+ <a class="nav--item" href="/">Our people</a>
39
+ </nav>
40
+ </div>
41
+ <div class="col--tablet-4">
42
+ <nav class="nav nav--column" aria-label="Support navigation">
43
+ <span class="nav--title">Support</span>
44
+ <a class="nav--item" href="/">Docs</a>
45
+ <a class="nav--item" href="/">Helpdesk</a>
46
+ </nav>
47
+ </div>
48
+ </div>
49
+ </div>
50
+ </div>
51
+ <hr class="margin-y--5" />
52
+ <div class="grid">
53
+ <div class="col--tablet-6">
54
+ <p>Made in UK with love</p>
55
+ <p>
56
+ <small>
57
+ &copy; Claritas Solutions Ltd 2023. All rights reserved.
58
+ <a href="/">Privacy</a>
59
+ <a href="/">Terms</a>
60
+ </small>
61
+ </p>
62
+ </div>
63
+ <div class="col--tablet-6">
64
+ <nav class="nav" aria-label="Social media navigation">
65
+ <a class="nav--item" href="/">Facebook</a>
66
+ <a class="nav--item" href="/">X</a>
67
+ <a class="nav--item" href="/">LinkedIn</a>
68
+ <a class="nav--item" href="/">YouTube</a>
69
+ </nav>
70
+ </div>
21
71
  </div>
22
72
  </div>
23
- </div>
73
+ </footer>
24
74
  </body>
25
75
  </html>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "claritas-web-framework",
3
- "version": "8.0.0",
4
- "updated": "27/07/2023",
3
+ "version": "8.0.2",
4
+ "updated": "28/07/2023",
5
5
  "description": "The CSS framework built for Claritas front end.",
6
6
  "main": "index.js",
7
7
  "scripts": {
package/sass/_functions.scss CHANGED
@@ -41,12 +41,12 @@
41
41
  @return $string;
42
42
  }
43
43
 
44
- @function color-flip($key, $value, $threshold: $color-flip-threshold, $lightness: $color-flip-l) {
44
+ @function color-flip($key, $value, $threshold: $color-flip-threshold, $lightness: $color-flip-l, $opacity: 100%) {
45
45
  $color-sum: math.max(color.lightness($value), 0%);
46
46
 
47
47
  @if $color-sum > $threshold {
48
- @return hsl(var(--#{$key}-h) var(--#{$key}-s) calc(var(--#{$key}-l) - #{$lightness}) / 100%);
48
+ @return hsl(var(--#{$key}-h) var(--#{$key}-s) calc(var(--#{$key}-l) - #{$lightness}) / $opacity);
49
49
  } @else {
50
- @return hsl(var(--white-h) var(--white-s) var(--white-l) / 100%);
50
+ @return hsl(var(--white-h) var(--white-s) var(--white-l) / $opacity);
51
51
  }
52
52
  }
package/sass/_variables.scss CHANGED
@@ -55,8 +55,7 @@ $colors: (
55
55
  "teal": $teal,
56
56
  "cyan": $cyan,
57
57
  "white": $white,
58
- "gray": $gray-6,
59
- "gray-dark": $gray-8
58
+ "black": $black
60
59
  ) !default;
61
60
 
62
61
  $primary: $blue !default;
package/sass/mixins/_button.scss CHANGED
@@ -5,15 +5,16 @@
5
5
  @mixin button-variant(
6
6
  $main,
7
7
  $value,
8
- $color: color-flip($main, $value, $button-color-flip-threshold, $button-color-flip-l)
8
+ $color: color-flip($main, $value, $button-color-flip-threshold, $button-color-flip-l),
9
+ $color-disabled: color-flip($main, $value, $button-color-flip-threshold, $button-color-flip-l, 75%)
9
10
  ) {
10
- --button-color: #{color-flip($color, $value, $button-color-flip-threshold, $button-color-flip-l)};
11
- --button-hover-color: hsl(var(--white-h) var(--white-s) var(--white-l) / 100%);
12
- --button-focus-color: hsl(var(--white-h) var(--white-s) var(--white-l) / 100%);
13
- --button-active-color: hsl(var(--white-h) var(--white-s) var(--white-l) / 100%);
14
- --button-disabled-color: hsl(var(--white-h) var(--white-s) var(--white-l) / 65%);
11
+ --button-color: #{$color};
12
+ --button-hover-color: #{$color};
13
+ --button-focus-color: #{$color};
14
+ --button-active-color: #{$color};
15
+ --button-disabled-color: #{$color-disabled};
15
16
 
16
- --button-border-color: hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 100%);
17
+ --button-border-color: hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity});
17
18
  --button-hover-border-color: hsl(
18
19
  var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-hover-opacity}
19
20
  );
@@ -23,7 +24,9 @@
23
24
  --button-active-border-color: hsl(
24
25
  var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-hover-opacity}
25
26
  );
26
- --button-disabled-border-color: hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 65%);
27
+ --button-disabled-border-color: hsl(
28
+ var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity}
29
+ );
27
30
 
28
31
  --button-background: hsl(var(--#{$main}-h) var(--#{$main}-s) var(--#{$main}-l) / 100%);
29
32
  --button-hover-background: hsl(
package/sass/modules/_nav.scss CHANGED
@@ -25,11 +25,11 @@
25
25
  --nav-item-disabled-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 65%);
26
26
  --nav-label-hover-color: hsl(var(--medium-h) var(--medium-s) var(--medium-l) / 100%);
27
27
 
28
- --nav-item-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 100%);
29
- --nav-item-hover-background: hsl(var(--body-color-h) var(--body-color-s) 95% / 100%);
30
- --nav-item-focus-background: hsl(var(--body-color-h) var(--body-color-s) 95% / 100%);
31
- --nav-item-active-background: hsl(var(--body-color-h) var(--body-color-s) 95% / 100%);
32
- --nav-item-disabled-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 65%);
28
+ --nav-item-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 0%);
29
+ --nav-item-hover-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 30%);
30
+ --nav-item-focus-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 30%);
31
+ --nav-item-active-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 20%);
32
+ --nav-item-disabled-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 0%);
33
33
 
34
34
  display: flex;
35
35
  flex-wrap: wrap;
@@ -106,6 +106,10 @@
106
106
  &.active {
107
107
  color: var(--nav-item-active-color);
108
108
  background: var(--nav-item-active-background);
109
+
110
+ &:hover {
111
+ background: var(--nav-item-hover-background);
112
+ }
109
113
  }
110
114
 
111
115
  &:disabled,
@@ -121,6 +125,8 @@
121
125
  flex-flow: column nowrap;
122
126
  align-items: stretch;
123
127
 
128
+ & .nav--label,
129
+ & .nav--title,
124
130
  & .nav--item {
125
131
  text-align: left;
126
132
  justify-content: flex-start;