@equinor/amplify-component-lib 9.15.2 → 9.15.3

package/dist/atoms/style/index.d.ts

@@ -0,0 +1,558 @@
+import { animation } from "./animation.js";
+import { colors } from "./colors.js";
+import { spacings } from "./spacings.js";
+
+//#region src/atoms/style/index.d.ts
+declare namespace index_d_exports {
+  export { animation, colors, elevation, shape, spacings, typography };
+}
+declare const shape: {
+    _modes: {
+      compact: {
+        rounded: {
+          minHeight: string;
+          minWidth: string;
+          borderRadius: string;
+        };
+        button: {
+          minHeight: string;
+          minWidth: string;
+          borderRadius: string;
+        };
+        toggle: {
+          minHeight: string;
+          minWidth: string;
+          borderRadius: string;
+        };
+        corners: {
+          minHeight: string;
+          minWidth: string;
+          borderRadius: string;
+        };
+        icon_button: {
+          minHeight: string;
+          minWidth: string;
+          borderRadius: string;
+        };
+        straight: {
+          minHeight: string;
+          minWidth: string;
+          borderRadius: string;
+        };
+        toggle_rounded_border: {
+          minHeight: string;
+          minWidth: string;
+          borderRadius: string;
+        };
+        toggle_straight_border: {
+          minHeight: string;
+          minWidth: string;
+          borderRadius: string;
+        };
+        circle: {
+          minHeight: string;
+          minWidth: string;
+          borderRadius: string;
+        };
+      };
+    };
+    toggle_straight_border: {
+      minHeight: string;
+      minWidth: string;
+      borderRadius: string;
+    };
+    toggle_rounded_border: {
+      minHeight: string;
+      minWidth: string;
+      borderRadius: string;
+    };
+    circle: {
+      minHeight: string;
+      minWidth: string;
+      borderRadius: string;
+    };
+    rounded: {
+      minHeight: string;
+      minWidth: string;
+      borderRadius: string;
+    };
+    button: {
+      minHeight: string;
+      minWidth: string;
+      borderRadius: string;
+    };
+    toggle: {
+      minHeight: string;
+      minWidth: string;
+      borderRadius: string;
+    };
+    corners: {
+      minHeight: string;
+      minWidth: string;
+      borderRadius: string;
+    };
+    icon_button: {
+      minHeight: string;
+      minWidth: string;
+      borderRadius: string;
+    };
+    field: {
+      minHeight: string;
+      minWidth: string;
+      borderRadius: string;
+    };
+    straight: {
+      minHeight: string;
+      minWidth: string;
+      borderRadius: string;
+    };
+    caret: {
+      minHeight: string;
+      minWidth: string;
+      borderRadius: string;
+    };
+  }, elevation: {
+    raised: string;
+    none: string;
+    overlay: string;
+    sticky: string;
+    temporary_nav: string;
+    above_scrim: string;
+  }, typography: {
+    heading: {
+      h1_bold: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        textAlign: string;
+      };
+      h1: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        textAlign: string;
+      };
+      h2: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        textAlign: string;
+      };
+      h3: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        textAlign: string;
+      };
+      h4: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        textAlign: string;
+      };
+      h5: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        letterSpacing: string;
+        lineHeight: string;
+        textAlign: string;
+      };
+      h6: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        letterSpacing: string;
+        lineHeight: string;
+        textAlign: string;
+      };
+    };
+    navigation: {
+      menu_title: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        letterSpacing: string;
+        lineHeight: string;
+        textAlign: string;
+      };
+      menu_tabs: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        letterSpacing: string;
+        lineHeight: string;
+        textAlign: string;
+      };
+      label: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        textAlign: string;
+      };
+      drawer_active: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        letterSpacing: string;
+        lineHeight: string;
+        textAlign: string;
+      };
+      drawer_inactive: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        letterSpacing: string;
+        lineHeight: string;
+        textAlign: string;
+      };
+      button: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        textAlign: string;
+      };
+      breadcrumb: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        textAlign: string;
+      };
+      breadcrumb_hover: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        textDecoration: string;
+        textAlign: string;
+      };
+      menu_title_hover: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        letterSpacing: string;
+        lineHeight: string;
+        textAlign: string;
+      };
+    };
+    input: {
+      label: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        textAlign: string;
+      };
+      text: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        letterSpacing: string;
+        lineHeight: string;
+        textAlign: string;
+      };
+      text_monospaced: {
+        fontFeature: string;
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        letterSpacing: string;
+        lineHeight: string;
+        textAlign: string;
+      };
+      helper: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        letterSpacing: string;
+        lineHeight: string;
+        textAlign: string;
+      };
+    };
+    paragraph: {
+      body_short_italic: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        fontStyle: string;
+        textAlign: string;
+      };
+      caption: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        textAlign: string;
+      };
+      meta: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        textAlign: string;
+      };
+      body_short: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        textAlign: string;
+      };
+      body_short_bold_italic: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        fontStyle: string;
+        textAlign: string;
+      };
+      body_short_bold: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        textAlign: string;
+      };
+      body_short_link: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        textDecoration: string;
+        textAlign: string;
+      };
+      overline: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        letterSpacing: string;
+        lineHeight: string;
+        textTransform: string;
+        textAlign: string;
+      };
+      ingress: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        textAlign: string;
+      };
+      body_long: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        textAlign: string;
+      };
+      body_long_link: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        textDecoration: string;
+        textAlign: string;
+      };
+      body_long_italic: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        fontStyle: string;
+        textAlign: string;
+      };
+      body_long_bold: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        textAlign: string;
+      };
+      body_long_bold_italic: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        fontStyle: string;
+        textAlign: string;
+      };
+    };
+    table: {
+      cell_header: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        textAlign: string;
+      };
+      cell_text: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        textAlign: string;
+      };
+      cell_text_bold: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        textAlign: string;
+      };
+      cell_text_link: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        textDecoration: string;
+        textAlign: string;
+      };
+      cell_numeric_monospaced: {
+        fontFeature: string;
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        textAlign: string;
+      };
+    };
+    _modes: {
+      compact: {
+        table: {
+          cell_header: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            textAlign: string;
+          };
+          cell_text: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            textAlign: string;
+          };
+          cell_text_bold: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            textAlign: string;
+          };
+          cell_text_link: {
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            textDecoration: string;
+            textAlign: string;
+          };
+          cell_numeric_monospaced: {
+            fontFeature: string;
+            color: string;
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+            textAlign: string;
+          };
+        };
+      };
+    };
+    ui: {
+      tooltip: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        textAlign: string;
+      };
+      snackbar: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        textAlign: string;
+      };
+      accordion_header: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        textAlign: string;
+      };
+      chip__badge: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        textAlign: string;
+      };
+      chart: {
+        color: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+        textAlign: string;
+      };
+    };
+  };
+//#endregion
+export { elevation, index_d_exports, shape, typography };

package/dist/atoms/style/index.js

@@ -0,0 +1 @@
+import{__export as e}from"../../_virtual/rolldown_runtime.js";import{tokens as t}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{animation as n}from"./animation.js";import{colors as r}from"./colors.js";import{spacings as i}from"./spacings.js";var a={};e(a,{animation:()=>n,colors:()=>r,elevation:()=>s,shape:()=>o,spacings:()=>i,typography:()=>c});const{shape:o,elevation:s,typography:c}=t;export{s as elevation,o as shape,a as style_exports,c as typography};

package/dist/atoms/style/lightTokens.js

@@ -0,0 +1,158 @@
+import{css as e}from"styled-components";const t=e`
+  [data-theme='light'] {
+    --amplify_ui_background_light_medium: rgba(235, 235, 235, 1);
+    --amplify_ui_background_heavy: rgba(189, 189, 189, 1);
+    --amplify_ui_background_tutorial_card: rgba(222, 237, 238, 1);
+
+    --amplify_interactive_primary_pressed: rgba(19, 46, 49, 1);
+    --amplify_interactive_tutorial_active_step: rgba(0, 112, 121, 1);
+    --amplify_interactive_tutorial_inactive_step: rgba(168, 206, 209, 1);
+
+    --amplify_dataviz_primary_default: rgba(0, 107, 229, 1);
+    --amplify_dataviz_primary_darker: rgba(0, 83, 178, 1);
+    --amplify_dataviz_primary_lighter: rgba(206, 229, 255, 1);
+
+    --amplify_dataviz_primary_10: rgba(235, 245, 255, 1);
+    --amplify_dataviz_primary_20: rgba(211, 231, 253, 1);
+    --amplify_dataviz_primary_30: rgba(167, 206, 251, 1);
+    --amplify_dataviz_primary_40: rgba(133, 187, 250, 1);
+    --amplify_dataviz_primary_50: rgba(89, 163, 248, 1);
+    --amplify_dataviz_primary_60: rgba(40, 136, 246, 1);
+    --amplify_dataviz_primary_70: rgba(0, 107, 229, 1);
+    --amplify_dataviz_primary_80: rgba(0, 83, 178, 1);
+    --amplify_dataviz_primary_90: rgba(5, 60, 122, 1);
+
+    --amplify_dataviz_darkblue_default: rgba(0, 71, 153, 1);
+    --amplify_dataviz_darkblue_darker: rgba(4, 48, 98, 1);
+    --amplify_dataviz_darkblue_lighter: rgba(191, 220, 252, 1);
+
+    --amplify_dataviz_lightblue_default: rgba(133, 208, 250, 1);
+    --amplify_dataviz_lightblue_darker: rgba(35, 170, 246, 1);
+    --amplify_dataviz_lightblue_lighter: rgba(211, 238, 253, 1);
+
+    --amplify_dataviz_lightgreen_default: rgba(10, 194, 154, 1);
+    --amplify_dataviz_lightgreen_darker: rgba(8, 145, 115, 1);
+    --amplify_dataviz_lightgreen_lighter: rgba(220, 241, 236, 1);
+
+    --amplify_dataviz_darkgreen_default: rgba(0, 102, 76, 1);
+    --amplify_dataviz_darkgreen_darker: rgba(0, 61, 46, 1);
+    --amplify_dataviz_darkgreen_lighter: rgba(200, 237, 227, 1);
+
+    --amplify_dataviz_darkpink_default: rgba(169, 30, 88, 1);
+    --amplify_dataviz_darkpink_darker: rgba(135, 18, 67, 1);
+    --amplify_dataviz_darkpink_lighter: rgba(252, 212, 229, 1);
+
+    --amplify_dataviz_lightpink_default: rgba(255, 128, 138, 1);
+    --amplify_dataviz_lightpink_darker: rgba(225, 81, 93, 1);
+    --amplify_dataviz_lightpink_lighter: rgba(255, 219, 222, 1);
+
+    --amplify_dataviz_darkyellow_default: rgba(160, 112, 28, 1);
+    --amplify_dataviz_darkyellow_darker: rgba(121, 85, 21, 1);
+    --amplify_dataviz_darkyellow_lighter: rgba(244, 226, 195, 1);
+
+    --amplify_dataviz_lightyellow_default: rgba(253, 203, 53, 1);
+    --amplify_dataviz_lightyellow_darker: rgba(227, 171, 2, 1);
+    --amplify_dataviz_lightyellow_lighter: rgba(255, 240, 194, 1);
+
+    --amplify_dataviz_darkpurple_default: rgba(147, 20, 219, 1);
+    --amplify_dataviz_darkpurple_darker: rgba(97, 1, 152, 1);
+    --amplify_dataviz_darkpurple_lighter: rgba(232, 209, 246, 1);
+
+    --amplify_dataviz_lightpurple_default: rgba(186, 153, 255, 1);
+    --amplify_dataviz_lightpurple_darker: rgba(155, 89, 242, 1);
+    --amplify_dataviz_lightpurple_lighter: rgba(234, 224, 255, 1);
+
+    --amplify_dataviz_darkgray_default: rgba(122, 122, 122, 1);
+    --amplify_dataviz_darkgray_darker: rgba(86, 86, 86, 1);
+    --amplify_dataviz_darkgray_lighter: rgba(173, 173, 173, 1);
+
+    --amplify_dataviz_lightgray_default: rgba(144, 155, 162, 1);
+    --amplify_dataviz_lightgray_darker: rgba(91, 102, 108, 1);
+    --amplify_dataviz_lightgray_lighter: rgba(194, 200, 204, 1);
+
+    --eds_text__static_icons__default: rgba(61, 61, 61, 1);
+    --eds_text__static_icons__secondary: rgba(86, 86, 86, 1);
+    --eds_text__static_icons__tertiary: rgba(111, 111, 111, 1);
+    --eds_text__static_icons__primary_white: rgba(255, 255, 255, 1);
+    --eds_ui_background__default: rgba(255, 255, 255, 1);
+    --eds_ui_background__semitransparent: rgba(255, 255, 255, 0.2);
+    --eds_ui_background__light: rgba(247, 247, 247, 1);
+    --eds_ui_background__scrim: rgba(0, 0, 0, 0.4);
+    --eds_ui_background__overlay: rgba(0, 0, 0, 0.8);
+    --eds_ui_background__medium: rgba(220, 220, 220, 1);
+    --eds_ui_background__info: rgba(213, 234, 244, 1);
+    --eds_ui_background__warning: rgba(255, 231, 214, 1);
+    --eds_ui_background__danger: rgba(255, 193, 193, 1);
+    --eds_infographic_substitute__purple_berry: rgba(140, 17, 89, 1);
+    --eds_infographic_substitute__pink_rose: rgba(226, 73, 115, 1);
+    --eds_infographic_substitute__pink_salmon: rgba(255, 146, 168, 1);
+    --eds_infographic_substitute__green_cucumber: rgba(0, 95, 87, 1);
+    --eds_infographic_substitute__green_succulent: rgba(0, 151, 123, 1);
+    --eds_infographic_substitute__green_mint: rgba(64, 211, 143, 1);
+    --eds_infographic_substitute__blue_ocean: rgba(0, 64, 136, 1);
+    --eds_infographic_substitute__blue_overcast: rgba(0, 132, 196, 1);
+    --eds_infographic_substitute__blue_sky: rgba(82, 192, 255, 1);
+    --eds_infographic_primary__moss_green_100: rgba(0, 112, 121, 1);
+    --eds_infographic_primary__moss_green_55: rgba(115, 177, 181, 1);
+    --eds_infographic_primary__moss_green_34: rgba(168, 206, 209, 1);
+    --eds_infographic_primary__moss_green_21: rgba(201, 224, 226, 1);
+    --eds_infographic_primary__moss_green_13: rgba(222, 237, 238, 1);
+    --eds_infographic_primary__energy_red_100: rgba(235, 0, 55, 1);
+    --eds_infographic_primary__energy_red_55: rgba(255, 125, 152, 1);
+    --eds_infographic_primary__energy_red_34: rgba(255, 174, 191, 1);
+    --eds_infographic_primary__energy_red_21: rgba(255, 205, 215, 1);
+    --eds_infographic_primary__energy_red_13: rgba(255, 224, 231, 1);
+    --eds_infographic_primary__weathered_red: rgba(125, 0, 35, 1);
+    --eds_infographic_primary__slate_blue: rgba(36, 55, 70, 1);
+    --eds_infographic_primary__spruce_wood: rgba(255, 231, 214, 1);
+    --eds_infographic_primary__mist_blue: rgba(213, 234, 244, 1);
+    --eds_infographic_primary__lichen_green: rgba(230, 250, 236, 1);
+    --eds_logo__fill_positive: rgba(235, 0, 55, 1);
+    --eds_logo__fill_negative: rgba(255, 255, 255, 1);
+    --eds_interactive_primary__selected_highlight: rgba(230, 250, 236, 1);
+    --eds_interactive_primary__selected_hover: rgba(195, 243, 210, 1);
+    --eds_interactive_primary__resting: rgba(0, 112, 121, 1);
+    --eds_interactive_primary__hover: rgba(0, 79, 85, 1);
+    --eds_interactive_primary__hover_alt: rgba(222, 237, 238, 1);
+    --eds_interactive_secondary__highlight: rgba(213, 234, 244, 1);
+    --eds_interactive_secondary__resting: rgba(36, 55, 70, 1);
+    --eds_interactive_secondary__link_hover: rgba(23, 36, 47, 1);
+    --eds_interactive_danger__highlight: rgba(255, 193, 193, 1);
+    --eds_interactive_danger__resting: rgba(235, 0, 0, 1);
+    --eds_interactive_danger__hover: rgba(179, 13, 47, 1);
+    --eds_interactive_danger__text: rgba(179, 13, 47, 1);
+    --eds_interactive_warning__highlight: rgba(255, 231, 214, 1);
+    --eds_interactive_warning__resting: rgba(255, 146, 0, 1);
+    --eds_interactive_warning__hover: rgba(173, 98, 0, 1);
+    --eds_interactive_warning__text: rgba(173, 98, 0, 1);
+    --eds_interactive_success__highlight: rgba(230, 250, 236, 1);
+    --eds_interactive_success__resting: rgba(75, 183, 72, 1);
+    --eds_interactive_success__hover: rgba(53, 129, 50, 1);
+    --eds_interactive_success__text: rgba(53, 129, 50, 1);
+    --eds_interactive_table__cell__fill_resting: rgba(255, 255, 255, 1);
+    --eds_interactive_table__cell__fill_hover: rgba(234, 234, 234, 1);
+    --eds_interactive_table__cell__fill_activated: rgba(230, 250, 236, 1);
+    --eds_interactive_table__header__fill_activated: rgba(234, 234, 234, 1);
+    --eds_interactive_table__header__fill_hover: rgba(220, 220, 220, 1);
+    --eds_interactive_table__header__fill_resting: rgba(247, 247, 247, 1);
+    --eds_interactive__disabled__text: rgba(190, 190, 190, 1);
+    --eds_interactive__text_highlight: rgba(213, 234, 244, 1);
+    --eds_interactive__focus: rgba(0, 112, 121, 1);
+    --eds_interactive__disabled__border: rgba(220, 220, 220, 1);
+    --eds_interactive__disabled__fill: rgba(234, 234, 234, 1);
+    --eds_interactive__link_on_interactive_colors: rgba(255, 255, 255, 1);
+    --eds_interactive__icon_on_interactive_colors: rgba(255, 255, 255, 1);
+    --eds_interactive__link_in_snackbars: rgba(151, 202, 206, 1);
+    --eds_interactive__pressed_overlay_dark: rgba(0, 0, 0, 0.2);
+    --eds_interactive__pressed_overlay_light: rgba(255, 255, 255, 0.2);
+
+    /* Override table typography variables */
+    --eds_table__cell_header_color: var(--eds_text__static_icons__default);
+    --eds_table__cell_text_color: var(--eds_text__static_icons__default);
+    --eds_table__cell_text_bold_color: var(--eds_text__static_icons__default);
+    --eds_table__cell_text_link_color: var(--eds_text__static_icons__default);
+    --eds_table__cell_numeric_monospaced_color: var(
+      --eds_text__static_icons__default
+    );
+  }
+`;export{t as lightTokens};