@rikstv/shared-components 0.5.3 → 0.6.0

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 (6) hide show
  1. package/dist/core/Strim.css +1 -1
  2. package/dist/core/mixin/fluid.scss +7 -5
  3. package/dist/core/strm.scss +1 -1
  4. package/dist/typography/Typography.css +1 -1
  5. package/dist/typography/typography.scss +10 -0
  6. package/package.json +5 -5
package/dist/core/Strim.css CHANGED
@@ -1 +1 @@
1
- :root{--rds-spacing--2: .125rem;--rds-spacing--4: .25rem;--rds-spacing--8: .5rem;--rds-spacing--16: 1rem;--rds-spacing--24: 1.5rem;--rds-spacing--32: 2rem;--rds-spacing--48: 3rem;--rds-spacing--64: 4rem;--rds-spacing--80: 5rem;--rds-spacing--96: 6rem;--rds-box-shadow--default: 0px 8px 16px rgba(0, 0, 0, .5)}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}.strm{--stand-up-green: #49f5a4;--surface-background: #edfef6;--rds-button-primary-fg: #004b50;--rds-button-secondary-pressed-fg: #ffffff;--rds-button-secondary-pressed-bg: #001d1d;--rds-button-tertirary-bg: #193f3f;--rds-button-tertiary-hover-bg: #004b50;--rds-accent-color: #faed6f;--rds-accent-color-mid: #f7e426;--rds-accent-color-dark: #f7e426;--rds-accent-hover: #fcf4a9;--rds-foreground-primary: #ffffff;--rds-foreground-secondary: #b2bfbf;--rds-foreground-tertiary: #356e63;--rds-heading-accent: var(--stand-up-green);--rds-background-primary-rgb: 0, 42, 42;--rds-background-primary: rgb(var(--rds-background-primary-rgb));--rds-background-secondary: #001d1d;--rds-background-tertiary: #001515;--rds-foreground-overlay-soft: rgba(255, 255, 255, .1);--rds-foreground-overlay-medium: rgba(255, 255, 255, .3);--rds-foreground-overlay-heavy: rgba(255, 255, 255, .7);--rds-background-overlay-soft: rgba(0, 0, 0, .1);--rds-background-overlay-medium: rgba(0, 0, 0, .5);--rds-background-overlay-heavy: rgba(0, 0, 0, .85);--rds-feedback-info: #00aec7;--rds-feedback-warning: #f2a900;--rds-feedback-confirm: #4cbb81;--rds-feedback-error: #e01c17;--rds-roundness--default: 12px;--rds-roundness--button: 12px;--rds-roundness--round: 50%;--rds-font-family-lg-headlines: "HalMatexStrim-Regular", "HALMatex", "system-ui", sans-serif;--rds-font-family-headlines: "AvertaBold", Arial, Helvetica, "system-ui", sans-serif;--rds-font-family-m-headlines: "AvertaSemibold", Arial, Helvetica, "system-ui", sans-serif;--rds-font-family-body: "AvertaRegular", Arial, Helvetica, "system-ui", sans-serif;--rds-font-size--default: 1.125rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
1
+ :root{--rds-spacing--2: .125rem;--rds-spacing--4: .25rem;--rds-spacing--8: .5rem;--rds-spacing--16: 1rem;--rds-spacing--24: 1.5rem;--rds-spacing--32: 2rem;--rds-spacing--48: 3rem;--rds-spacing--64: 4rem;--rds-spacing--80: 5rem;--rds-spacing--96: 6rem;--rds-box-shadow--default: 0px 8px 16px rgba(0, 0, 0, .5)}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}.strm{--stand-up-green: #49f5a4;--surface-background: #edfef6;--rds-button-primary-fg: #004b50;--rds-button-secondary-pressed-fg: #ffffff;--rds-button-secondary-pressed-bg: #001d1d;--rds-button-tertirary-bg: #193f3f;--rds-button-tertiary-hover-bg: #004b50;--rds-accent-color: #faed6f;--rds-accent-color-mid: #f7e426;--rds-accent-color-dark: #f7e426;--rds-accent-hover: #fcf4a9;--rds-foreground-primary: #ffffff;--rds-foreground-secondary: #b2bfbf;--rds-foreground-tertiary: #356e63;--rds-heading-accent: var(--stand-up-green);--rds-background-primary-rgb: 0, 42, 42;--rds-background-primary: rgb(var(--rds-background-primary-rgb));--rds-background-secondary: #001d1d;--rds-background-tertiary: #001515;--rds-foreground-overlay-soft: rgba(255, 255, 255, .1);--rds-foreground-overlay-medium: rgba(255, 255, 255, .3);--rds-foreground-overlay-heavy: rgba(255, 255, 255, .7);--rds-background-overlay-soft: rgba(0, 0, 0, .1);--rds-background-overlay-medium: rgba(0, 0, 0, .5);--rds-background-overlay-heavy: rgba(0, 0, 0, .85);--rds-feedback-info: #00aec7;--rds-feedback-warning: #f2a900;--rds-feedback-confirm: #4cbb81;--rds-feedback-error: #e01c17;--rds-roundness--default: 12px;--rds-roundness--button: 12px;--rds-roundness--round: 50%;--rds-font-family-lg-headlines: "HALMatex", "system-ui", sans-serif;--rds-font-family-headlines: "AvertaBold", Arial, Helvetica, "system-ui", sans-serif;--rds-font-family-m-headlines: "AvertaSemibold", Arial, Helvetica, "system-ui", sans-serif;--rds-font-family-body: "AvertaRegular", Arial, Helvetica, "system-ui", sans-serif;--rds-font-size--default: 1.125rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
package/dist/core/mixin/fluid.scss CHANGED
@@ -1,15 +1,17 @@
1
+ @use "sass:math";
2
+
1
3
  $pixelsPerRem: 16; //in case people change their browser’s font
2
4
  $minWidthPx: 576; //min view port in px
3
5
  $maxWidthPx: 1920; //max view port in px
4
6
 
5
7
  @function get-clamp($minFontSizePx, $maxFontSizePx) {
6
- $minWidth: $minWidthPx/$pixelsPerRem;
7
- $maxWidth: $maxWidthPx/$pixelsPerRem;
8
+ $minWidth: math.div($minWidthPx, $pixelsPerRem);
9
+ $maxWidth: math.div($maxWidthPx, $pixelsPerRem);
8
10
 
9
- $minFontSize: $minFontSizePx/$pixelsPerRem;
10
- $maxFontSize: $maxFontSizePx/$pixelsPerRem;
11
+ $minFontSize: math.div($minFontSizePx, $pixelsPerRem);
12
+ $maxFontSize: math.div($maxFontSizePx, $pixelsPerRem);
11
13
 
12
- $slope: ($maxFontSize - $minFontSize)/ ($maxWidth - $minWidth);
14
+ $slope: math.div($maxFontSize - $minFontSize, $maxWidth - $minWidth);
13
15
  $yAxisIntersection: -$minWidth * $slope + $minFontSize;
14
16
 
15
17
  $fluid: calc(#{$yAxisIntersection}rem + #{$slope * 100}vw);
package/dist/core/strm.scss CHANGED
@@ -40,7 +40,7 @@
40
40
  --rds-roundness--button: 12px;
41
41
  --rds-roundness--round: 50%;
42
42
 
43
- --rds-font-family-lg-headlines: "HalMatexStrim-Regular", "HALMatex", "system-ui", sans-serif;
43
+ --rds-font-family-lg-headlines: "HALMatex", "system-ui", sans-serif;
44
44
  --rds-font-family-headlines: "AvertaBold", Arial, Helvetica, "system-ui", sans-serif;
45
45
  --rds-font-family-m-headlines: "AvertaSemibold", Arial, Helvetica, "system-ui", sans-serif;
46
46
  --rds-font-family-body: "AvertaRegular", Arial, Helvetica, "system-ui", sans-serif;
package/dist/typography/Typography.css CHANGED
@@ -1 +1 @@
1
- .rds-display-title{font-family:var(--rds-font-family-lg-headlines);font-size:clamp(2.5rem,calc(1.4285714286rem + 2.9761904762vw),5rem);line-height:1.2;color:var(--rds-foreground-primary)}.rds-title-1{font-family:var(--rds-font-family-lg-headlines);font-size:clamp(1.875rem,calc(1.1785714286rem + 1.9345238095vw),3.5rem);line-height:1.2;color:var(--rds-foreground-primary)}.rds-title-2{font-family:var(--rds-font-family-lg-headlines);font-size:clamp(1.5rem,calc(1.0714285714rem + 1.1904761905vw),2.5rem);line-height:1.2;color:var(--rds-foreground-primary)}.rds-title-3{font-family:var(--rds-font-family-m-headlines);font-size:clamp(1.25rem,calc(1.1964285714rem + .1488095238vw),1.375rem);line-height:1.2;color:var(--rds-heading-accent)}.rds-title-4{font-family:var(--rds-font-family-m-headlines);font-size:clamp(1rem,calc(.9464285714rem + .1488095238vw),1.125rem);line-height:1.2;color:var(--rds-foreground-primary)}.rds-body{font-family:var(--rds-font-family-body);font-size:clamp(1rem,calc(.9464285714rem + .1488095238vw),1.125rem);line-height:1.5;color:var(--rds-foreground-primary)}.rds-sub-body{font-family:var(--rds-font-family-body);font-size:clamp(.875rem,calc(.8214285714rem + .1488095238vw),1rem);line-height:1.5;color:var(--rds-foreground-primary)}.rds-tag{font-family:var(--rds-font-family-headlines);text-transform:uppercase;font-size:clamp(.75rem,calc(.6964285714rem + .1488095238vw),.875rem);line-height:1.2;letter-spacing:.09375rem;color:var(--rds-foreground-primary)}.rds-bold{font-family:var(--rds-font-family-headlines);font-size:clamp(1.125rem,calc(1.125rem + 0vw),1.125rem);line-height:1.5;color:var(--rds-foreground-primary)}.rds-meta{font-family:var(--rds-font-family-body);font-size:clamp(.75rem,calc(.6964285714rem + .1488095238vw),.875rem);line-height:1.5;color:var(--rds-foreground-overlay-heavy)}.rds-light .rds-display-title{color:var(--rds-foreground-tertiary)}.rds-display-title--light{color:var(--rds-foreground-tertiary)}.rds-light .rds-title-1{color:var(--rds-button-primary-fg)}.rds-title-1--light{color:var(--rds-button-primary-fg)}.rds-light .rds-title-2{color:var(--rds-button-primary-fg)}.rds-title-2--light{color:var(--rds-button-primary-fg)}.rds-light .rds-title-3{color:var(--rds-button-primary-fg)}.rds-title-3--light{color:var(--rds-button-primary-fg)}.rds-light .rds-title-4{color:var(--rds-button-primary-fg)}.rds-title-4--light{color:var(--rds-button-primary-fg)}.rds-light .rds-body{color:var(--rds-background-primary)}.rds-body--light{color:var(--rds-background-primary)}.rds-light .rds-sub-body{color:var(--rds-button-primary-fg)}.rds-sub-body--light{color:var(--rds-button-primary-fg)}.rds-light .rds-tag{color:var(--rds-background-primary)}.rds-tag--light{color:var(--rds-background-primary)}.rds-light .rds-bold{color:var(--rds-background-primary)}.rds-bold--light{color:var(--rds-background-primary)}.rds-light .rds-meta{color:var(--rds-button-primary-fg)}.rds-meta--light{color:var(--rds-button-primary-fg)}
1
+ .rds-display-title{font-family:var(--rds-font-family-lg-headlines);font-size:clamp(2.5rem,calc(1.4285714286rem + 2.9761904762vw),5rem);font-weight:normal;line-height:1.2;color:var(--rds-foreground-primary)}.rds-title-1{font-family:var(--rds-font-family-lg-headlines);font-size:clamp(1.875rem,calc(1.1785714286rem + 1.9345238095vw),3.5rem);font-weight:normal;line-height:1.2;color:var(--rds-foreground-primary)}.rds-title-2{font-family:var(--rds-font-family-lg-headlines);font-size:clamp(1.5rem,calc(1.0714285714rem + 1.1904761905vw),2.5rem);font-weight:normal;line-height:1.2;color:var(--rds-foreground-primary)}.rds-title-3{font-family:var(--rds-font-family-m-headlines);font-size:clamp(1.25rem,calc(1.1964285714rem + .1488095238vw),1.375rem);font-weight:normal;line-height:1.2;color:var(--rds-heading-accent)}.rds-title-4{font-family:var(--rds-font-family-m-headlines);font-size:clamp(1rem,calc(.9464285714rem + .1488095238vw),1.125rem);font-weight:normal;line-height:1.2;color:var(--rds-foreground-primary)}.rds-body{font-family:var(--rds-font-family-body);font-size:clamp(1rem,calc(.9464285714rem + .1488095238vw),1.125rem);font-weight:normal;line-height:1.5;color:var(--rds-foreground-primary)}.rds-sub-body{font-family:var(--rds-font-family-body);font-size:clamp(.875rem,calc(.8214285714rem + .1488095238vw),1rem);font-weight:normal;line-height:1.5;color:var(--rds-foreground-primary)}.rds-tag{font-family:var(--rds-font-family-headlines);text-transform:uppercase;font-size:clamp(.75rem,calc(.6964285714rem + .1488095238vw),.875rem);line-height:1.2;font-weight:normal;letter-spacing:.09375rem;color:var(--rds-foreground-primary)}.rds-bold{font-family:var(--rds-font-family-headlines);font-size:clamp(1.125rem,calc(1.125rem + 0vw),1.125rem);font-weight:normal;line-height:1.5;color:var(--rds-foreground-primary)}.rds-meta{font-family:var(--rds-font-family-body);font-size:clamp(.75rem,calc(.6964285714rem + .1488095238vw),.875rem);font-weight:normal;line-height:1.5;color:var(--rds-foreground-overlay-heavy)}.rds-light .rds-display-title{color:var(--rds-foreground-tertiary)}.rds-display-title--light{color:var(--rds-foreground-tertiary)}.rds-light .rds-title-1{color:var(--rds-button-primary-fg)}.rds-title-1--light{color:var(--rds-button-primary-fg)}.rds-light .rds-title-2{color:var(--rds-button-primary-fg)}.rds-title-2--light{color:var(--rds-button-primary-fg)}.rds-light .rds-title-3{color:var(--rds-button-primary-fg)}.rds-title-3--light{color:var(--rds-button-primary-fg)}.rds-light .rds-title-4{color:var(--rds-button-primary-fg)}.rds-title-4--light{color:var(--rds-button-primary-fg)}.rds-light .rds-body{color:var(--rds-background-primary)}.rds-body--light{color:var(--rds-background-primary)}.rds-light .rds-sub-body{color:var(--rds-button-primary-fg)}.rds-sub-body--light{color:var(--rds-button-primary-fg)}.rds-light .rds-tag{color:var(--rds-background-primary)}.rds-tag--light{color:var(--rds-background-primary)}.rds-light .rds-bold{color:var(--rds-background-primary)}.rds-bold--light{color:var(--rds-background-primary)}.rds-light .rds-meta{color:var(--rds-button-primary-fg)}.rds-meta--light{color:var(--rds-button-primary-fg)}
package/dist/typography/typography.scss CHANGED
@@ -3,6 +3,7 @@
3
3
  .rds-display-title {
4
4
  font-family: var(--rds-font-family-lg-headlines);
5
5
  font-size: fluid.get-clamp(40, 80);
6
+ font-weight: normal;
6
7
  line-height: 1.2;
7
8
  color: var(--rds-foreground-primary);
8
9
  }
@@ -10,6 +11,7 @@
10
11
  .rds-title-1 {
11
12
  font-family: var(--rds-font-family-lg-headlines);
12
13
  font-size: fluid.get-clamp(30, 56);
14
+ font-weight: normal;
13
15
  line-height: 1.2;
14
16
  color: var(--rds-foreground-primary);
15
17
  }
@@ -17,6 +19,7 @@
17
19
  .rds-title-2 {
18
20
  font-family: var(--rds-font-family-lg-headlines);
19
21
  font-size: fluid.get-clamp(24, 40);
22
+ font-weight: normal;
20
23
  line-height: 1.2;
21
24
  color: var(--rds-foreground-primary);
22
25
  }
@@ -24,6 +27,7 @@
24
27
  .rds-title-3 {
25
28
  font-family: var(--rds-font-family-m-headlines);
26
29
  font-size: fluid.get-clamp(20, 22);
30
+ font-weight: normal;
27
31
  line-height: 1.2;
28
32
  color: var(--rds-heading-accent);
29
33
  }
@@ -31,6 +35,7 @@
31
35
  .rds-title-4 {
32
36
  font-family: var(--rds-font-family-m-headlines);
33
37
  font-size: fluid.get-clamp(16, 18);
38
+ font-weight: normal;
34
39
  line-height: 1.2;
35
40
  color: var(--rds-foreground-primary);
36
41
  }
@@ -38,6 +43,7 @@
38
43
  .rds-body {
39
44
  font-family: var(--rds-font-family-body);
40
45
  font-size: fluid.get-clamp(16, 18);
46
+ font-weight: normal;
41
47
  line-height: 1.5;
42
48
  color: var(--rds-foreground-primary);
43
49
  }
@@ -45,6 +51,7 @@
45
51
  .rds-sub-body {
46
52
  font-family: var(--rds-font-family-body);
47
53
  font-size: fluid.get-clamp(14, 16);
54
+ font-weight: normal;
48
55
  line-height: 1.5;
49
56
  color: var(--rds-foreground-primary);
50
57
  }
@@ -54,6 +61,7 @@
54
61
  text-transform: uppercase;
55
62
  font-size: fluid.get-clamp(12, 14);
56
63
  line-height: 1.2;
64
+ font-weight: normal;
57
65
  letter-spacing: 0.09375rem;
58
66
  color: var(--rds-foreground-primary);
59
67
  }
@@ -61,6 +69,7 @@
61
69
  .rds-bold {
62
70
  font-family: var(--rds-font-family-headlines);
63
71
  font-size: fluid.get-clamp(18, 18);
72
+ font-weight: normal;
64
73
  line-height: 1.5;
65
74
  color: var(--rds-foreground-primary);
66
75
  }
@@ -68,6 +77,7 @@
68
77
  .rds-meta {
69
78
  font-family: var(--rds-font-family-body);
70
79
  font-size: fluid.get-clamp(12, 14);
80
+ font-weight: normal;
71
81
  line-height: 1.5;
72
82
  color: var(--rds-foreground-overlay-heavy);
73
83
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rikstv/shared-components",
3
- "version": "0.5.3",
3
+ "version": "0.6.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -31,10 +31,10 @@
31
31
  },
32
32
  "dependencies": {},
33
33
  "devDependencies": {
34
- "@cypress/react": "^5.9.4",
35
- "@cypress/vite-dev-server": "^2.0.8",
36
- "@testing-library/cypress": "^8.0.0",
37
- "react-hook-form": "^7.15.2",
34
+ "@cypress/react": "^5.10.0",
35
+ "@cypress/vite-dev-server": "^2.1.0",
36
+ "@testing-library/cypress": "^8.0.1",
37
+ "react-hook-form": "^7.15.3",
38
38
  "rollup-plugin-copy": "^3.4.0",
39
39
  "rollup-plugin-svg": "^2.0.0",
40
40
  "vite-plugin-react-svg": "^0.2.0"