@rikstv/shared-components 0.4.3 → 0.6.0

package/dist/button/Button.css

@@ -1 +1 @@
-.rds-button{padding:.78125rem var(--rds-spacing--32);border-radius:var(--rds-roundness--button);overflow-y:hidden;cursor:pointer;font-size:1.125rem}.rds-button__icon{display:flex;align-items:center;margin-right:var(--rds-spacing--16);width:1.125rem}.rds-button__icon>svg{width:100%}.rds-button__postfix{position:relative;display:flex;align-items:center;margin-left:var(--rds-spacing--16);padding-left:var(--rds-spacing--16)}.rds-button__postfix:before{content:" ";position:absolute;width:1px;background-color:currentColor;height:200%;left:0}.rds-button--loading:disabled{cursor:wait!important}.rds-button--loading:disabled:hover{box-shadow:none}.rds-button__shared{--common-button--primary-color: var(--rds-button-primary-fg);--common-button--primary-bg: var(--rds-accent-color);--common-button--primary-hover-bg: var(--rds-accent-hover);--common-button--primary-pressed-bg: var(--rds-accent-color);--common-button--secondary-border-color: var(--rds-foreground-primary);--common-button--secondary-color: var(--rds-foreground-primary);--common-button--secondary-hover-color: var(--rds-background-primary);--common-button--secondary-hover-bg: var(--rds-foreground-primary);--common-button--tertiary-bg: var(--rds-foreground-overlay-soft);--common-button--tertiary-color: var(--rds-foreground-primary);--common-button--tertiary-hover-bg: var(--rds-foreground-primary);--common-button--tertiary-hover-color: var(--rds-background-primary);--common-button--tertiary-pressed-bg: var(--rds-background-secondary);--common-button--tertiary-pressed-color: var(--rds-foreground-primary);--common-button--disabled-bg: var(--rds-foreground-secondary);--common-button--disabled-color: var(--rds-foreground-tertiary);border:none;width:auto;background:transparent;line-height:normal;-webkit-appearance:none;display:flex;transition:125ms ease-in-out;transition-property:color,box-shadow,background-color;font-family:var(--rds-font-family-m-headlines)}.rds-button__shared::-moz-focus-inner{border:0;padding:0}.rds-button__shared--primary{color:var(--common-button--primary-color);background-color:var(--common-button--primary-bg)}.rds-button__shared--primary:hover{background-color:var(--common-button--primary-hover-bg)}.rds-button__shared--primary:active{box-shadow:none;background-color:var(--common-button--primary-pressed-bg)}.rds-button__shared--secondary{background-color:transparent;border:2px solid var(--common-button--secondary-border-color);color:var(--common-button--secondary-color)}.rds-button__shared--secondary:hover{background-color:var(--common-button--secondary-hover-bg);color:var(--common-button--secondary-hover-color)}.rds-button__shared--tertiary{background-color:var(--common-button--tertiary-bg);color:var(--common-button--tertiary-color)}.rds-button__shared--tertiary:hover{background-color:var(--common-button--tertiary-hover-bg);color:var(--common-button--tertiary-hover-color)}.rds-button__shared--tertiary:active{background-color:var(--common-button--tertiary-pressed-bg);color:var(--common-button--tertiary-pressed-color)}.rds-button__shared:disabled{background-color:var(--common-button--disabled-bg);color:var(--common-button--disabled-color);box-shadow:none;cursor:not-allowed;border:none}.rds-button__shared:hover{box-shadow:var(--rds-box-shadow--default)}.rds-button__shared:active{box-shadow:none}.rds-button__shared:focus::-moz-focus-inner{border-style:none;outline:0}.rds-button__shared:focus button::-moz-focus-inner,.rds-button__shared:focus [type=button]::-moz-focus-inner,.rds-button__shared:focus [type=reset]::-moz-focus-inner,.rds-button__shared:focus [type=submit]::-moz-focus-inner{border-style:none}.rds-button__shared:focus input[type=button]::-moz-focus-inner{outline:0}html:not([data-mousenavigation]):not([data-touchnavigation]) .rds-button__shared:focus{outline-offset:2px;outline:2px solid var(--rds-feedback-info);transition:outline-offset .25s ease}
+.rds-button{padding:.78125rem var(--rds-spacing--32);border-radius:var(--rds-roundness--button);overflow-y:hidden;cursor:pointer;font-size:1.125rem}.rds-button__icon{display:flex;align-items:center;align-self:center;margin-right:var(--rds-spacing--16);width:1.125rem}.rds-button__icon>svg{width:100%}.rds-button__postfix{position:relative;display:flex;align-items:center;margin-left:var(--rds-spacing--16);padding-left:var(--rds-spacing--16)}.rds-button__postfix:before{content:" ";position:absolute;width:1px;background-color:currentColor;height:200%;left:0}.rds-button--loading:disabled{cursor:wait!important}.rds-button--loading:disabled:hover{box-shadow:none}.rds-button__shared{--common-button--primary-color: var(--rds-button-primary-fg);--common-button--primary-bg: var(--rds-accent-color);--common-button--primary-hover-bg: var(--rds-accent-hover);--common-button--primary-pressed-bg: var(--rds-accent-color);--common-button--secondary-border-color: var(--rds-foreground-primary);--common-button--secondary-color: var(--rds-foreground-primary);--common-button--secondary-bg: var(--rds-background-primary);--common-button--secondary-hover-color: var(--rds-background-primary);--common-button--secondary-hover-bg: var(--rds-foreground-primary);--common-button--secondary-pressed-color: var(--rds-button-secondary-pressed-fg);--common-button--secondary-pressed-bg: var(--rds-button-secondary-pressed-bg);--common-button--tertiary-bg: var(--rds-button-tertirary-bg);--common-button--tertiary-color: var(--rds-foreground-primary);--common-button--tertiary-hover-bg: var(--rds-button-tertiary-hover-bg);--common-button--tertiary-hover-color: var(--rds-foreground-primary);--common-button--tertiary-pressed-bg: var(--rds-background-tertiary);--common-button--tertiary-pressed-color: var(--rds-foreground-primary);--common-button--disabled-bg: var(--rds-foreground-secondary);--common-button--disabled-color: var(--rds-foreground-tertiary);border:none;width:auto;background:transparent;line-height:normal;-webkit-appearance:none;display:flex;transition:125ms ease-in-out;transition-property:color,box-shadow,background-color;font-family:var(--rds-font-family-m-headlines)}.rds-button__shared::-moz-focus-inner{border:0;padding:0}.rds-button__shared--primary{color:var(--common-button--primary-color);background-color:var(--common-button--primary-bg)}.rds-button__shared--primary:hover{background-color:var(--common-button--primary-hover-bg)}.rds-button__shared--primary:active{box-shadow:none;background-color:var(--common-button--primary-pressed-bg)}.rds-button__shared--secondary{background-color:var(--common-button--secondary-bg);border:2px solid var(--common-button--secondary-border-color);color:var(--common-button--secondary-color)}.rds-button__shared--secondary:hover{background-color:var(--common-button--secondary-hover-bg);color:var(--common-button--secondary-hover-color)}.rds-button__shared--secondary:active{background-color:var(--common-button--secondary-pressed-bg);color:var(--common-button--secondary-pressed-color);border-color:var(--common-button--secondary-pressed-bg)}.rds-button__shared--tertiary{background-color:var(--common-button--tertiary-bg);color:var(--common-button--tertiary-color)}.rds-button__shared--tertiary:hover{background-color:var(--common-button--tertiary-hover-bg);color:var(--common-button--tertiary-hover-color)}.rds-button__shared--tertiary:active{background-color:var(--common-button--tertiary-pressed-bg);color:var(--common-button--tertiary-pressed-color)}.rds-button__shared:disabled{background-color:var(--common-button--disabled-bg);color:var(--common-button--disabled-color);box-shadow:none;cursor:not-allowed;border:none}.rds-button__shared:hover{box-shadow:var(--rds-box-shadow--default)}.rds-button__shared:active{box-shadow:none}.rds-button__shared:focus::-moz-focus-inner{border-style:none;outline:0}.rds-button__shared:focus button::-moz-focus-inner,.rds-button__shared:focus [type=button]::-moz-focus-inner,.rds-button__shared:focus [type=reset]::-moz-focus-inner,.rds-button__shared:focus [type=submit]::-moz-focus-inner{border-style:none}.rds-button__shared:focus input[type=button]::-moz-focus-inner{outline:0}html:not([data-mousenavigation]):not([data-touchnavigation]) .rds-button__shared:focus{outline-offset:2px;outline:2px solid var(--rds-feedback-info);transition:outline-offset .25s ease}

package/dist/button/Button.d.ts

@@ -1,7 +1,7 @@
-import { FC } from "react";
+/// <reference types="react" />
 import { ButtonProps } from "./BaseButton";
 import "./button.scss";
 import "./button-shared.scss";
-export declare const PrimaryButton: FC<ButtonProps>;
-export declare const SecondaryButton: FC<ButtonProps>;
-export declare const TertiaryButton: FC<ButtonProps>;
+export declare const PrimaryButton: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const SecondaryButton: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const TertiaryButton: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/button/Button.js

@@ -1 +1 @@
-var t=Object.defineProperty,r=Object.getOwnPropertySymbols,e=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable,n=(r,e,o)=>e in r?t(r,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[e]=o,a=(t,a)=>{for(var b in a||(a={}))e.call(a,b)&&n(t,b,a[b]);if(r)for(var b of r(a))o.call(a,b)&&n(t,b,a[b]);return t};import{B as b}from"./BaseButton.js";import{j as s}from"../core/RiksTV.js";const p=t=>s(b,a({buttonStyle:"rds-button",buttonType:"primary"},t)),y=t=>s(b,a({buttonStyle:"rds-button",buttonType:"secondary"},t)),u=t=>s(b,a({buttonStyle:"rds-button",buttonType:"tertiary"},t));export{p as P,y as S,u as T};
+var t=Object.defineProperty,r=Object.getOwnPropertySymbols,e=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable,a=(r,e,o)=>e in r?t(r,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[e]=o,n=(t,n)=>{for(var s in n||(n={}))e.call(n,s)&&a(t,s,n[s]);if(r)for(var s of r(n))o.call(n,s)&&a(t,s,n[s]);return t};import{forwardRef as s}from"react";import{B as y}from"./BaseButton.js";import{j as p}from"../core/RiksTV.js";const b=s(((t,r)=>p(y,n({buttonStyle:"rds-button",buttonType:"primary",ref:r},t))));b.displayName="PrimaryButton";const u=s(((t,r)=>p(y,n({buttonStyle:"rds-button",buttonType:"secondary",ref:r},t))));u.displayName="SecondaryButton";const i=s(((t,r)=>p(y,n({buttonStyle:"rds-button",buttonType:"tertiary",ref:r},t))));i.displayName="TertiaryButton";export{b as P,u as S,i as T};

package/dist/button/IconButton.d.ts

@@ -1,4 +1,4 @@
-import { FC } from "react";
+/// <reference types="react" />
 import { ButtonProps } from "./BaseButton";
 import "./icon-button.scss";
 import "./button-shared.scss";
@@ -6,7 +6,7 @@ interface IconButtonProps extends Omit<ButtonProps, "icon" | "postfix"> {
     ["aria-label"]: string;
     icon: () => JSX.Element;
 }
-export declare const PrimaryIconButton: FC<IconButtonProps>;
-export declare const SecondaryIconButton: FC<IconButtonProps>;
-export declare const TertiaryIconButton: FC<IconButtonProps>;
+export declare const PrimaryIconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const SecondaryIconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const TertiaryIconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/button/IconButton.js

@@ -1 +1 @@
-var r=Object.defineProperty,t=Object.getOwnPropertySymbols,e=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable,n=(t,e,o)=>e in t?r(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,a=(r,a)=>{for(var u in a||(a={}))e.call(a,u)&&n(r,u,a[u]);if(t)for(var u of t(a))o.call(a,u)&&n(r,u,a[u]);return r},u=(r,n)=>{var a={};for(var u in r)e.call(r,u)&&n.indexOf(u)<0&&(a[u]=r[u]);if(null!=r&&t)for(var u of t(r))n.indexOf(u)<0&&o.call(r,u)&&(a[u]=r[u]);return a};import{B as i}from"./BaseButton.js";import"./Button.js";import{j as l}from"../core/RiksTV.js";const b=r=>{var t=u(r,[]);return l(i,a({buttonStyle:"rds-icon-button",buttonType:"primary"},t))},s=r=>{var t=u(r,[]);return l(i,a({buttonStyle:"rds-icon-button",buttonType:"secondary"},t))},p=r=>{var t=u(r,[]);return l(i,a({buttonStyle:"rds-icon-button",buttonType:"tertiary"},t))};export{b as P,s as S,p as T};
+var t=Object.defineProperty,o=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,e=Object.prototype.propertyIsEnumerable,n=(o,r,e)=>r in o?t(o,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[r]=e,a=(t,a)=>{for(var s in a||(a={}))r.call(a,s)&&n(t,s,a[s]);if(o)for(var s of o(a))e.call(a,s)&&n(t,s,a[s]);return t};import{forwardRef as s}from"react";import{B as y}from"./BaseButton.js";import"./Button.js";import{j as i}from"../core/RiksTV.js";const p=s(((t,o)=>i(y,a({buttonStyle:"rds-icon-button",buttonType:"primary",ref:o},t))));p.displayName="PrimaryIconButton";const c=s(((t,o)=>i(y,a({buttonStyle:"rds-icon-button",buttonType:"secondary",ref:o},t))));c.displayName="SecondaryIconButton";const u=s(((t,o)=>i(y,a({buttonStyle:"rds-icon-button",buttonType:"tertiary",ref:o},t))));u.displayName="TertiaryIconButton";export{p as P,c as S,u as T};

package/dist/button/button-shared.scss

@@ -8,14 +8,17 @@
 
   --common-button--secondary-border-color: var(--rds-foreground-primary);
   --common-button--secondary-color: var(--rds-foreground-primary);
+  --common-button--secondary-bg: var(--rds-background-primary);
   --common-button--secondary-hover-color: var(--rds-background-primary);
   --common-button--secondary-hover-bg: var(--rds-foreground-primary);
+  --common-button--secondary-pressed-color: var(--rds-button-secondary-pressed-fg);
+  --common-button--secondary-pressed-bg: var(--rds-button-secondary-pressed-bg);
 
-  --common-button--tertiary-bg: var(--rds-foreground-overlay-soft);
+  --common-button--tertiary-bg: var(--rds-button-tertirary-bg);
   --common-button--tertiary-color: var(--rds-foreground-primary);
-  --common-button--tertiary-hover-bg: var(--rds-foreground-primary);
-  --common-button--tertiary-hover-color: var(--rds-background-primary);
-  --common-button--tertiary-pressed-bg: var(--rds-background-secondary);
+  --common-button--tertiary-hover-bg: var(--rds-button-tertiary-hover-bg);
+  --common-button--tertiary-hover-color: var(--rds-foreground-primary);
+  --common-button--tertiary-pressed-bg: var(--rds-background-tertiary);
   --common-button--tertiary-pressed-color: var(--rds-foreground-primary);
 
   --common-button--disabled-bg: var(--rds-foreground-secondary);
@@ -58,7 +61,7 @@
   }
 
   &--secondary {
-    background-color: transparent;
+    background-color: var(--common-button--secondary-bg);
     border: 2px solid var(--common-button--secondary-border-color);
     color: var(--common-button--secondary-color);
 
@@ -66,6 +69,12 @@
       background-color: var(--common-button--secondary-hover-bg);
       color: var(--common-button--secondary-hover-color);
     }
+
+    &:active {
+      background-color: var(--common-button--secondary-pressed-bg);
+      color: var(--common-button--secondary-pressed-color);
+      border-color: var(--common-button--secondary-pressed-bg);
+    }
   }
 
   &--tertiary {

package/dist/button/button.scss

@@ -10,6 +10,7 @@
   &__icon {
     display: flex;
     align-items: center;
+    align-self: center;
     margin-right: var(--rds-spacing--16);
     width: 1.125rem;
 

package/dist/core/RiksTV.css

@@ -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}.rtv{--rds-button-primary-fg: #fff;--rds-accent-color: #ee4642;--rds-accent-color-mid: #ed302b;--rds-accent-color-dark: #d41612;--rds-accent-hover: #d41612;--rds-foreground-primary: #fff;--rds-foreground-secondary: #a8a8a8;--rds-foreground-tertiary: #666;--rds-heading-accent: var(--rds-foreground-primary);--rds-background-primary-rgb: 37, 37, 37;--rds-background-primary: rgb(var(--rds-background-primary-rgb));--rds-background-secondary: #0b0b0b;--rds-background-tertiary: #434343;--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: 4px;--rds-roundness--button: 34px;--rds-roundness--round: 50%;--rds-font-family-lg-headlines: "AvertaBold", Arial, Helvetica, "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}
+: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}.rtv{--rds-button-primary-fg: #fff;--rds-button-secondary-pressed-fg: #666666;--rds-button-secondary-pressed-bg: #fff;--rds-button-tertirary-bg: #3b3b3b;--rds-button-tertiary-hover-bg: #434343;--rds-accent-color: #ee4642;--rds-accent-color-mid: #ed302b;--rds-accent-color-dark: #d41612;--rds-accent-hover: #d41612;--rds-foreground-primary: #fff;--rds-foreground-secondary: #a8a8a8;--rds-foreground-tertiary: #666;--rds-heading-accent: var(--rds-foreground-primary);--rds-background-primary-rgb: 37, 37, 37;--rds-background-primary: rgb(var(--rds-background-primary-rgb));--rds-background-secondary: #434343;--rds-background-tertiary: #0b0b0b;--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: 4px;--rds-roundness--button: 34px;--rds-roundness--round: 50%;--rds-font-family-lg-headlines: "AvertaBold", Arial, Helvetica, "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/Strim.css

@@ -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-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: #001515;--rds-background-tertiary: #004b50;--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}
+: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

@@ -0,0 +1,20 @@
+@use "sass:math";
+
+$pixelsPerRem: 16; //in case people change their browser’s font
+$minWidthPx: 576; //min view port in px
+$maxWidthPx: 1920; //max view port in px
+
+@function get-clamp($minFontSizePx, $maxFontSizePx) {
+  $minWidth: math.div($minWidthPx, $pixelsPerRem);
+  $maxWidth: math.div($maxWidthPx, $pixelsPerRem);
+
+  $minFontSize: math.div($minFontSizePx, $pixelsPerRem);
+  $maxFontSize: math.div($maxFontSizePx, $pixelsPerRem);
+
+  $slope: math.div($maxFontSize - $minFontSize, $maxWidth - $minWidth);
+  $yAxisIntersection: -$minWidth * $slope + $minFontSize;
+
+  $fluid: calc(#{$yAxisIntersection}rem + #{$slope * 100}vw);
+
+  @return clamp(#{$minFontSize}rem, #{$fluid}, #{$maxFontSize}rem);
+}

package/dist/core/rtv.scss

@@ -2,6 +2,10 @@
 
 .rtv {
   --rds-button-primary-fg: #fff;
+  --rds-button-secondary-pressed-fg: #666666;
+  --rds-button-secondary-pressed-bg: #fff;
+  --rds-button-tertirary-bg: #3b3b3b;
+  --rds-button-tertiary-hover-bg: #434343;
   --rds-accent-color: #ee4642;
   --rds-accent-color-mid: #ed302b;
   --rds-accent-color-dark: #d41612;
@@ -14,8 +18,8 @@
 
   --rds-background-primary-rgb: 37, 37, 37;
   --rds-background-primary: rgb(var(--rds-background-primary-rgb));
-  --rds-background-secondary: #0b0b0b;
-  --rds-background-tertiary: #434343;
+  --rds-background-secondary: #434343;
+  --rds-background-tertiary: #0b0b0b;
 
   --rds-foreground-overlay-soft: rgba(255, 255, 255, 0.1);
   --rds-foreground-overlay-medium: rgba(255, 255, 255, 0.3);

package/dist/core/strm.scss

@@ -3,8 +3,11 @@
 .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;
@@ -17,8 +20,8 @@
 
   --rds-background-primary-rgb: 0, 42, 42; // #002a2a
   --rds-background-primary: rgb(var(--rds-background-primary-rgb));
-  --rds-background-secondary: #001515;
-  --rds-background-tertiary: #004b50;
+  --rds-background-secondary: #001d1d;
+  --rds-background-tertiary: #001515;
 
   --rds-foreground-overlay-soft: rgba(255, 255, 255, 0.1);
   --rds-foreground-overlay-medium: rgba(255, 255, 255, 0.3);
@@ -37,7 +40,7 @@
   --rds-roundness--button: 12px;
   --rds-roundness--round: 50%;
 
-  --rds-font-family-lg-headlines: "HalMatexStrim-Regular", "HALMatex", "system-ui", sans-serif;
+  --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;

package/dist/typography/Typography.css

@@ -1 +1 @@
-.rds-display-title{font-family:var(--rds-font-family-lg-headlines);font-size:clamp(2rem,6vw,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.75rem,5vw,2.625rem);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,4vw,2.125rem);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,3vw,1.5rem);line-height:1.2;color:var(--rds-heading-accent)}.rds-title-4{font-family:var(--rds-font-family-m-headlines);font-size:clamp(1rem,2vw,1.375rem);line-height:1.2;color:var(--rds-foreground-primary)}.rds-body{font-family:var(--rds-font-family-body);font-size:clamp(1rem,2vw,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,2vw,1rem);line-height:1.5;color:var(--rds-foreground-primary)}.rds-tag{font-family:var(--rds-font-family-body);text-transform:uppercase;font-size:clamp(.75rem,2vw,1rem);line-height:1.2;letter-spacing:.09375rem;color:var(--rds-foreground-primary)}.rds-bold{font-family:var(--rds-font-family-body);font-weight:bold;font-size:clamp(1.125rem,2vw,1.125rem);line-height:1.5;color:var(--rds-foreground-primary)}.rds-meta{font-family:var(--rds-font-family-body);font-size:clamp(.875rem,2vw,.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)}
+.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

@@ -1,74 +1,83 @@
-/* TODO: linear scaling of target font-size */
-/* https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport */
+@use '../core/mixin/fluid';
+
 .rds-display-title {
   font-family: var(--rds-font-family-lg-headlines);
-  font-size: clamp(2rem, 6vw, 5rem);
+  font-size: fluid.get-clamp(40, 80);
+  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.75rem, 5vw, 2.625rem);
+  font-size: fluid.get-clamp(30, 56);
+  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, 4vw, 2.125rem);
+  font-size: fluid.get-clamp(24, 40);
+  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, 3vw, 1.5rem);
+  font-size: fluid.get-clamp(20, 22);
+  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, 2vw, 1.375rem);
+  font-size: fluid.get-clamp(16, 18);
+  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, 2vw, 1.125rem);
+  font-size: fluid.get-clamp(16, 18);
+  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(0.875rem, 2vw, 1rem);
+  font-size: fluid.get-clamp(14, 16);
+  font-weight: normal;
   line-height: 1.5;
   color: var(--rds-foreground-primary);
 }
 
 .rds-tag {
-  font-family: var(--rds-font-family-body);
+  font-family: var(--rds-font-family-headlines);
   text-transform: uppercase;
-  font-size: clamp(0.75rem, 2vw, 1rem);
+  font-size: fluid.get-clamp(12, 14);
   line-height: 1.2;
+  font-weight: normal;
   letter-spacing: 0.09375rem;
   color: var(--rds-foreground-primary);
 }
 
 .rds-bold {
-  font-family: var(--rds-font-family-body);
-  font-weight: bold;
-  font-size: clamp(1.125rem, 2vw, 1.125rem);
+  font-family: var(--rds-font-family-headlines);
+  font-size: fluid.get-clamp(18, 18);
+  font-weight: normal;
   line-height: 1.5;
   color: var(--rds-foreground-primary);
 }
 
 .rds-meta {
   font-family: var(--rds-font-family-body);
-  font-size: clamp(0.875rem, 2vw, 0.875rem);
+  font-size: fluid.get-clamp(12, 14);
+  font-weight: normal;
   line-height: 1.5;
   color: var(--rds-foreground-overlay-heavy);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rikstv/shared-components",
-  "version": "0.4.3",
+  "version": "0.6.0",
   "publishConfig": {
     "access": "public"
   },
@@ -31,18 +31,17 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@cypress/react": "^5.9.4",
-    "@cypress/vite-dev-server": "^2.0.7",
-    "@testing-library/cypress": "^8.0.0",
-    "react-hook-form": "^7.13.0",
+    "@cypress/react": "^5.10.0",
+    "@cypress/vite-dev-server": "^2.1.0",
+    "@testing-library/cypress": "^8.0.1",
+    "react-hook-form": "^7.15.3",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-svg": "^2.0.0",
     "vite-plugin-react-svg": "^0.2.0"
   },
   "peerDependencies": {
-    "@types/react": "^16.8.6 || ^17.0.0",
-    "@types/react-dom": "^16.8.6 || ^17.0.0",
-    "react": "^16.8.6 || ^17.0.0",
-    "react-dom": "^16.8.6 || ^17.0.0"
+    "@types/react": "^16.8.6 || ^17",
+    "@types/react-dom": "^16.8.6 || ^17",
+    "react": "^16.8.0 || ^17"
   }
 }