@rikstv/shared-components 3.0.16 → 3.0.18

package/dist/components/alert/Alert.d.ts

@@ -5,6 +5,10 @@ import { HTMLAttributes, ReactElement } from "react";
  * intents include: `"warning", "error", "success", "info"`
  *
  * variants include: `"filled", "translucent", "inline"`
+ *
+ * Dismiss icon can be hidden by passing `dismissible={false}`
+ *
+ * An optional link to details can be passed as `LinkToDetails={JsxElement}`
  */
 export declare const Alert: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
 export interface Props extends HTMLAttributes<HTMLDivElement> {

package/dist/components/breadcrumb/breadcrumb.scss

@@ -1,5 +1,3 @@
-@use "../core/mixin/breakpoints" as break;
-
 .rds-breadcrumb {
   --rds-crumb-separator: "/";
   // --rds-crumb-separator: "›";
@@ -39,7 +37,7 @@
     // you're most likely to either go all the way back to the start, or back one step, so that's
     // the ones we show
     &--truncate {
-      @include break.breakpoint("sm") {
+      @media (max-width: 768px) {
         // Flip everything to be not visible
         display: none;
         &::after {

package/dist/components/button/arrow-button.scss

@@ -1,8 +1,6 @@
-@use "../core/mixin/rem";
-
 .rds-arrow-button {
-  --default-arrow-size: #{rem.convert(18px)};
-  --default-arrow-margin: #{rem.convert(10px)};
+  --default-arrow-size: 1.125rem;
+  --default-arrow-margin: 0.625rem;
   --hover-transform: 4px;
 
   align-items: center;

package/dist/components/button/button.scss

@@ -1,13 +1,11 @@
-@use "../core/mixin/rem";
-
 .rds-arrow-button,
 .rds-button {
-  --fluid-block: clamp(#{rem.convert(10.5px)}, 2vw, #{rem.convert(12.5px)});
-  --fluid-inline: clamp(#{rem.convert(16px)}, 2vw, #{rem.convert(24px)});
+  --fluid-block: clamp(0.65625rem, 2vw, 0.78125rem);
+  --fluid-inline: clamp(1rem, 2vw, 1.5rem);
 
   padding: var(--fluid-block) var(--fluid-inline);
   border-radius: var(--rds-roundness--button);
-  font-size: rem.convert(18px);
+  font-size: 1.125rem;
   overflow-y: hidden;
   cursor: pointer;
 

package/dist/components/button/icon-button.scss

@@ -1,8 +1,6 @@
-@use '../core/mixin/rem';
-
 .rds-icon-button {
-  --default-icon-size: #{rem.convert(48px)};
-  --default-icon-margin: #{rem.convert(12px)};
+  --default-icon-size: 3rem;
+  --default-icon-margin: 0.75rem;
 
   border-radius: 50%;
   max-height: var(--default-icon-size);

package/dist/components/core/rtv.scss

@@ -1,5 +1,75 @@
-@use "./core";
-@use "./rikstvColors";
+@import "./core.css";
+
+/* RIKSTV COLORS */
+.rtv {
+  // RiksTV Red
+  --rikstv-red: #ef4642;
+  --rikstv-red-120: #d41612;
+
+  // Neutrals
+  --rikstv-white: #ffffff;
+  --rikstv-black: #000000;
+
+  // Onyx
+  --rikstv-onyx-150: #0f0f0f;
+  --rikstv-onyx: #1d1d1d;
+  --rikstv-onyx-90: #313131;
+
+  // Slate
+  --rikstv-slate: #353535;
+  --rikstv-slate-80: #626262;
+  --rikstv-slate-60: #828282;
+  --rikstv-slate-40: #afafaf;
+  --rikstv-slate-20: #ddd;
+
+  // Ask
+  --rikstv-ask: #5c5c5c;
+  --rikstv-ask-80: #787878;
+  --rikstv-ask-60: #9c9c9c;
+  --rikstv-ask-40: #c0c0c0;
+
+  // Sterling
+  --rikstv-sterling: #b8b8b8;
+  --rikstv-sterling-40: #e5e5e5;
+  --rikstv-sterling-20: #f1f1f1;
+  --rikstv-sterling-10: #f8f8f8;
+
+  // Secondary
+  --rikstv-purple: #542453;
+  --rikstv-green: #00816d;
+  --rikstv-blue: #195a89;
+  --rikstv-light-blue: #0f7ca2;
+  --rikstv-yellow: #f2a900;
+
+  // Feedback colors
+  --rikstv-info-light: #00aec7;
+  --rikstv-warning-light: #f2a900;
+  --rikstv-success-light: #4cbb81;
+  --rikstv-error-light: #f17774;
+
+  --rikstv-info-dark: #007485;
+  --rikstv-warning-dark: #996b00;
+  --rikstv-success-dark: #2a6f4b;
+  --rikstv-error-dark: #e01c17;
+
+  // NEEDS HANDLING
+  // Background
+  --rikstv-background-gray-150: #0b0b0b;
+  --rikstv-background-gray: #252525;
+  --rikstv-background-gray-90: #3b3b3b;
+  --rikstv-banner-background: #e9e9e9;
+  --rikstv-background: #f9f9f9;
+
+  // Card
+  --rikstv-card-gray: #434343;
+  --rikstv-card-gray-80: #333333;
+  --rikstv-card-gray-60: #6e6e6e;
+  --rikstv-card-gray-20: #d9d9d9;
+
+  // Foreground
+  --rikstv-foreground-gray: #666666;
+  --rikstv-foreground-gray-80: #858585;
+}
 
 // Source of truth: https://www.figma.com/file/eZpToN8EpnZiD9AU2Xc8bN/Global-%2F-Farger?node-id=399%3A0&mode=dev
 

package/dist/components/core/strm.scss

@@ -1,5 +1,52 @@
-@use "./core";
-@use "./strimColors";
+@import "./core.css";
+
+/** STRIM COLORS */
+.strm {
+  // Yellow
+  --strim-action-yellow: #faed6f;
+  --strim-action-yellow-60: #fcf4a9;
+  --strim-action-yellow-40: #fefbe2;
+
+  // Neutrals
+  --strim-white: #ffffff;
+  --strim-black: #000000;
+
+  // Fantasy green
+  --strim-fantasy-green-150: #001515;
+  --strim-fantasy-green: #002a2a;
+  --strim-fantasy-green-90: #193f3f;
+  --strim-fantasy-green-60: #4c7571;
+
+  // Thriller teal
+  --strim-thriller-teal: #004b50;
+  --strim-thriller-teal-80: #267c82;
+  --strim-thriller-teal-60: #419da2;
+  --strim-thriller-teal-40: #79c6c6;
+  --strim-thriller-teal-20: #c3e8e7;
+
+  // Romance green
+  --strim-romance-green: #356e63;
+  --strim-romance-green-80: #429181;
+  --strim-romance-green-60: #62b7a5;
+  --strim-romance-green-40: #93d6c9;
+
+  // Standup green
+  --strim-standup-green: #49f5a4;
+  --strim-standup-green-40: #bcfbde;
+  --strim-standup-green-20: #d6ffec;
+  --strim-standup-green-10: #edfef6;
+
+  // Feedback colors
+  --strim-info-light: #30d7f9;
+  --strim-warning-light: #f2a900;
+  --strim-success-light: #80ed99;
+  --strim-error-light: #ff8fa3;
+
+  --strim-info-dark: #167183;
+  --strim-warning-dark: #996b00;
+  --strim-success-dark: #13862d;
+  --strim-error-dark: #d91b4e;
+}
 
 // Source of truth: https://www.figma.com/file/eZpToN8EpnZiD9AU2Xc8bN/Global-%2F-Farger?node-id=399%3A0&mode=dev
 

package/dist/components/list/List.scss

@@ -1,5 +1,3 @@
-@use "../core/mixin/rem";
-
 .rds-list {
   --list-item__spacing: var(--rds-list-gap, 1em);
 
@@ -13,6 +11,6 @@
 
   & .rds-list > li {
     // Targets only nested lists
-    padding-left: rem.convert(32px);
+    padding-left: 2rem;
   }
 }

package/dist/components/panel/panel.scss

@@ -1,6 +1,5 @@
 @use "../core/mixin/fluid";
 @use "../core/mixin/focus";
-@use "../core/mixin/breakpoints" as break;
 
 .rds-panel {
   --panel-info-background-color: var(--rds-heading-accent);
@@ -12,6 +11,7 @@
   --panel-border: none;
   --panel-color: #fff;
 
+  container-type: inline-size; /* enables container queries */
   padding: var(--panel-fluid-padding);
   border-radius: var(--rds-roundness--medium);
   border: var(--panel-border);
@@ -58,7 +58,7 @@
     }
   }
 
-  @include break.breakpoint("sm") {
+  @container (max-width: 768px) {
     flex-direction: column;
     align-items: flex-start;
 

package/dist/components/progress/Progress.scss

@@ -1,7 +1,5 @@
-@use "../core/mixin/rem";
-
 .rds-progress {
-  --rds-progress-height: #{rem.convert(3px)};
+  --rds-progress-height: 0.1875rem;
   --rds-progress-color: var(--rds-accent-color);
   --rds-progress-track-color: var(--rds-foreground-overlay-medium);
 

package/dist/components/textfield/textfield.scss

@@ -1,6 +1,5 @@
 @use "../core/mixin/focus" as mix;
 @use "../core/mixin/fluid";
-@use "../core/mixin/rem";
 
 .rds-textfield {
   --textfield-color: var(--rds-foreground-primary);
@@ -102,7 +101,7 @@
     transition-property: top, font-size;
     border-radius: 8px;
 
-    font-size: rem.convert(18px);
+    font-size: 1.125rem;
     color: var(--textfield-label-color);
     font-family: var(--rds-font-family-body);
     font-weight: normal;

package/dist/components/toggle/radioToggle.scss

@@ -1,5 +1,4 @@
 @use "../core/mixin/focus" as mix;
-@use "../core/mixin/rem";
 @use "../button/button-shared";
 @use "../button/button";
 
@@ -44,7 +43,7 @@
     display: grid;
     place-items: center;
     transition: 125ms ease background-color;
-    padding: rem.convert(12.5px) var(--rds-spacing--24);
+    padding: 0.78125rem var(--rds-spacing--24);
     box-sizing: border-box;
     user-select: none;
   }

package/dist/components/toggleButton/toggleButton.scss

@@ -1,6 +1,5 @@
 @use "../button/button-shared";
 @use "../button/button";
-@use "../core/mixin/breakpoints" as break;
 @use "../core/mixin/focus.scss" as mix;
 
 .rds-toggle-button-container:focus-within {
@@ -52,7 +51,7 @@
     display: none;
     margin-left: var(--rds-spacing--16);
 
-    @include break.min("sm") {
+    @media (min-width: 768px) {
       display: block;
     }
 

package/dist/components/typography/typography.scss

@@ -86,7 +86,7 @@
 
 .rds-title-4 {
   font-family: var(--rds-font-family-m-headlines);
-  font-size: fluid.get-clamp(16, 18);
+  font-size: fluid.get-clamp(16, 20);
   font-weight: normal;
   line-height: 1.2;
   color: var(--rds-foreground-primary);

package/dist/shared-components.mjs

@@ -6,7 +6,7 @@ import { G as Y } from "./components/spacing/GutterPadding-eb4c4631.mjs";
 import { N as ee } from "./components/notificationDot/NotificationDot-630a5e23.mjs";
 import { A as te } from "./components/accordion/Accordion-b8669b7e.mjs";
 import { P as oe } from "./components/panel/Panel-aba8ed29.mjs";
-import { A as ie } from "./components/alert/Alert-0d6a7d07.mjs";
+import { A as ie } from "./components/alert/Alert-cf8930d7.mjs";
 import { B as ce, a as ue } from "./components/breadcrumb/Breadcrumb-64b3a50e.mjs";
 import { P as de } from "./components/progress/Progress-c5ae3c43.mjs";
 import { L as le } from "./components/loader/Loader-ff2a99f4.mjs";