Global styles for Halstack library

packages/lib/.storybook/preview-head.html

@@ -0,0 +1,12 @@
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap&family=Material+Symbols+Outlined:FILL@0..1"
+/>
+<link rel="stylesheet" href="../src/styles/variables.css" />
+
+<style>
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+      "Droid Sans", "Helvetica Neue", sans-serif;
+  }
+</style>

packages/lib/.storybook/preview.tsx

@@ -1,5 +1,3 @@
-import { HalstackProvider } from "../src/HalstackContext";
-import styled from "styled-components";
 import type { Preview } from "@storybook/react";
 import { disabledRules } from "../test/accessibility/rules/common/disabledRules";
 
@@ -21,19 +19,7 @@ const preview: Preview = {
       options: {},
     },
   },
-  decorators: [
-    (Story) => (
-      <Container>
-        <Story />
-      </Container>
-    ),
-  ],
+  decorators: [(Story) => <Story />],
 };
 
-const Container = styled.div`
-  @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap&family=Material+Symbols+Outlined:FILL@0..1");
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
-    "Droid Sans", "Helvetica Neue", sans-serif;
-`;
-
 export default preview;

packages/lib/src/index.ts

@@ -1,4 +1,5 @@
-import "./fonts.css";
+import "./styles/fonts.css";
+// import "./styles/variables.css";
 
 export { default as DxcAccordion } from "./accordion/Accordion";
 export { default as DxcAccordionGroup } from "./accordion-group/AccordionGroup";

packages/lib/src/styles/variables.css

@@ -0,0 +1,325 @@
+:root {
+  /* _Core */
+  --color-absolutes-black: #000000;
+  --color-absolutes-white: #ffffff;
+  --color-alpha-100-a: #ebebeb1a;
+  --color-alpha-200-a: #dedede33;
+  --color-alpha-300-a: #d1d1d14d;
+  --color-alpha-400-a: #b5b5b566;
+  --color-alpha-500-a: #9a9a9a80;
+  --color-alpha-600-a: #79797999;
+  --color-alpha-700-a: #5b5b5bb2;
+  --color-alpha-800-a: #494949cc;
+  --color-alpha-900-a: #333333e5;
+  --color-blue-50: #f8fcff;
+  --color-blue-100: #d9efff;
+  --color-blue-200: #bce3ff;
+  --color-blue-300: #a0d7ff;
+  --color-blue-400: #61bdff;
+  --color-blue-500: #30a1f1;
+  --color-blue-600: #267fbf;
+  --color-blue-700: #1d6091;
+  --color-blue-800: #174e74;
+  --color-blue-900: #103651;
+  --color-green-50: #f3fcf5;
+  --color-green-100: #d1f5db;
+  --color-green-200: #acecbe;
+  --color-green-300: #87e3a0;
+  --color-green-400: #53cb75;
+  --color-green-500: #47ae64;
+  --color-green-600: #39884f;
+  --color-green-700: #2a673b;
+  --color-green-800: #225230;
+  --color-green-900: #183921;
+  --color-grey-50: #fbfbfb;
+  --color-grey-100: #ebebeb;
+  --color-grey-200: #dedede;
+  --color-grey-300: #d1d1d1;
+  --color-grey-400: #b5b5b5;
+  --color-grey-500: #9a9a9a;
+  --color-grey-600: #797979;
+  --color-grey-700: #5b5b5b;
+  --color-grey-800: #494949;
+  --color-grey-900: #333333;
+  --color-orange-50: #fffbf6;
+  --color-orange-100: #fde9d2;
+  --color-orange-200: #fbd9b3;
+  --color-orange-300: #f9c78f;
+  --color-orange-400: #f5a344;
+  --color-orange-500: #d58a35;
+  --color-orange-600: #a76d2b;
+  --color-orange-700: #7f5121;
+  --color-orange-800: #66421a;
+  --color-orange-900: #3d3309;
+  --color-purple-50: #fcfbfe;
+  --color-purple-100: #f0e8fa;
+  --color-purple-200: #e7d9f6;
+  --color-purple-300: #ddc9f3;
+  --color-purple-400: #c8a7eb;
+  --color-purple-500: #b487e4;
+  --color-purple-600: #9363c8;
+  --color-purple-700: #6f4b97;
+  --color-purple-800: #5a3c7a;
+  --color-purple-900: #3e2a55;
+  --color-red-50: #fff7f6;
+  --color-red-100: #ffe6e4;
+  --color-red-200: #ffd3d0;
+  --color-red-300: #ffc1bd;
+  --color-red-400: #ff9896;
+  --color-red-500: #ff696f;
+  --color-red-600: #e33248;
+  --color-red-700: #a92c37;
+  --color-red-800: #87262d;
+  --color-red-900: #5b1f21;
+  --color-yellow-50: #fefbef;
+  --color-yellow-100: #fcedae;
+  --color-yellow-200: #f9de6e;
+  --color-yellow-300: #f5cd2b;
+  --color-yellow-400: #d4b226;
+  --color-yellow-500: #b6981f;
+  --color-yellow-600: #8f7818;
+  --color-yellow-700: #6c5a12;
+  --color-yellow-800: #57490f;
+  --color-yellow-900: #3d3309;
+  --dimensions-0: 0px;
+  --dimensions-1: 1px;
+  --dimensions-2: 2px;
+  --dimensions-4: 4px;
+  --dimensions-8: 8px;
+  --dimensions-12: 12px;
+  --dimensions-16: 16px;
+  --dimensions-20: 20px;
+  --dimensions-24: 24px;
+  --dimensions-28: 28px;
+  --dimensions-32: 32px;
+  --dimensions-36: 36px;
+  --dimensions-40: 40px;
+  --dimensions-44: 44px;
+  --dimensions-48: 48px;
+  --dimensions-56: 56px;
+  --dimensions-64: 64px;
+  --dimensions-72: 72px;
+  --dimensions-80: 80px;
+  --dimensions-96: 96px;
+  --font-size-12: 12px;
+  --font-size-14: 14px;
+  --font-size-16: 16px;
+  --font-size-18: 18px;
+  --font-size-20: 20px;
+  --font-size-24: 24px;
+  --font-size-32: 32px;
+  --font-size-48: 48px;
+  --font-size-60: 60px;
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-family-mono: Source Code Pro, mono;
+  --font-family-sans: Open Sans, sans-serif;
+  --font-style-lightitalic: light italic;
+  --font-style-normal: normal;
+  --line-style-dashed: dashed;
+  --line-style-solid: solid;
+
+  /* Alias */
+  --border-color-error-light: var(--color-red-300);
+  --border-color-error-medium: var(--color-red-600);
+  --border-color-error-strong: var(--color-red-700);
+  --border-color-error-stronger: var(--color-red-800);
+  --border-color-neutral-bright: var(--color-grey-50);
+  --border-color-neutral-brighter: var(--color-absolutes-white);
+  --border-color-neutral-dark: var(--color-grey-900);
+  --border-color-neutral-light: var(--color-grey-300);
+  --border-color-neutral-lighter: var(--color-grey-200);
+  --border-color-neutral-lightest: var(--color-grey-100);
+  --border-color-neutral-medium: var(--color-grey-400);
+  --border-color-neutral-strong: var(--color-grey-500);
+  --border-color-neutral-stronger: var(--color-grey-600);
+  --border-color-neutral-strongest: var(--color-grey-700);
+  --border-color-primary-light: var(--color-purple-400);
+  --border-color-primary-lighter: var(--color-purple-300);
+  --border-color-primary-medium: var(--color-purple-500);
+  --border-color-primary-strong: var(--color-purple-600);
+  --border-color-primary-stronger: var(--color-purple-700);
+  --border-color-secondary-light: var(--color-blue-300);
+  --border-color-secondary-medium: var(--color-blue-500);
+  --border-color-secondary-strong: var(--color-blue-600);
+  --border-color-secondary-stronger: var(--color-blue-700);
+  --border-color-secondary-strongest: var(--color-blue-800);
+  --border-color-success-light: var(--color-green-300);
+  --border-color-success-medium: var(--color-green-600);
+  --border-color-warning-light: var(--color-orange-300);
+  --border-color-warning-medium: var(--color-orange-500);
+  --color-bg-overlay-dark: var(--color-alpha-800-a);
+  --color-bg-yellow-light: var(--color-yellow-100);
+  --color-bg-alpha-light: var(--color-alpha-300-a);
+  --color-bg-alpha-medium: var(--color-alpha-800-a);
+  --color-bg-alpha-strong: var(--color-alpha-900-a);
+  --color-bg-error-light: var(--color-red-200);
+  --color-bg-error-lighter: var(--color-red-100);
+  --color-bg-error-lightest: var(--color-red-50);
+  --color-bg-error-medium: var(--color-red-300);
+  --color-bg-error-strong: var(--color-red-600);
+  --color-bg-error-stronger: var(--color-red-700);
+  --color-bg-error-strongest: var(--color-red-800);
+  --color-bg-neutral-light: var(--color-grey-100);
+  --color-bg-neutral-lighter: var(--color-grey-50);
+  --color-bg-neutral-lightest: var(--color-absolutes-white);
+  --color-bg-neutral-medium: var(--color-grey-200);
+  --color-bg-neutral-strong: var(--color-grey-300);
+  --color-bg-neutral-stronger: var(--color-grey-800);
+  --color-bg-neutral-strongest: var(--color-grey-900);
+  --color-bg-primary-light: var(--color-purple-200);
+  --color-bg-primary-lighter: var(--color-purple-100);
+  --color-bg-primary-lightest: var(--color-purple-50);
+  --color-bg-primary-medium: var(--color-purple-300);
+  --color-bg-primary-strong: var(--color-purple-700);
+  --color-bg-primary-stronger: var(--color-purple-800);
+  --color-bg-primary-strongest: var(--color-purple-900);
+  --color-bg-secondary-light: var(--color-blue-200);
+  --color-bg-secondary-lighter: var(--color-blue-100);
+  --color-bg-secondary-lightest: var(--color-blue-50);
+  --color-bg-secondary-medium: var(--color-blue-300);
+  --color-bg-secondary-strong: var(--color-blue-600);
+  --color-bg-secondary-stronger: var(--color-blue-700);
+  --color-bg-secondary-strongest: var(--color-blue-800);
+  --color-bg-success-light: var(--color-green-200);
+  --color-bg-success-lighter: var(--color-green-100);
+  --color-bg-success-lightest: var(--color-green-50);
+  --color-bg-success-medium: var(--color-green-300);
+  --color-bg-success-strong: var(--color-green-600);
+  --color-bg-success-stronger: var(--color-green-700);
+  --color-bg-success-strongest: var(--color-green-800);
+  --color-bg-warning-light: var(--color-orange-200);
+  --color-bg-warning-lighter: var(--color-orange-100);
+  --color-bg-warning-lightest: var(--color-orange-50);
+  --color-bg-warning-medium: var(--color-orange-300);
+  --color-bg-warning-strong: var(--color-orange-500);
+  --color-bg-warning-stronger: var(--color-orange-600);
+  --color-bg-warning-strongest: var(--color-orange-700);
+  --color-fg-error-light: var(--color-red-300);
+  --color-fg-error-lighter: var(--color-red-200);
+  --color-fg-error-medium: var(--color-red-600);
+  --color-fg-error-strong: var(--color-red-700);
+  --color-fg-error-stronger: var(--color-red-800);
+  --color-fg-neutral-bright: var(--color-absolutes-white);
+  --color-fg-neutral-dark: var(--color-grey-900);
+  --color-fg-neutral-light: var(--color-grey-400);
+  --color-fg-neutral-lighter: var(--color-grey-200);
+  --color-fg-neutral-lightest: var(--color-grey-100);
+  --color-fg-neutral-medium: var(--color-grey-500);
+  --color-fg-neutral-strong: var(--color-grey-600);
+  --color-fg-neutral-stronger: var(--color-grey-700);
+  --color-fg-neutral-strongest: var(--color-grey-800);
+  --color-fg-neutral-yellow-dark: var(--color-yellow-800);
+  --color-fg-primary-light: var(--color-purple-300);
+  --color-fg-primary-lighter: var(--color-purple-100);
+  --color-fg-primary-medium: var(--color-purple-400);
+  --color-fg-primary-strong: var(--color-purple-700);
+  --color-fg-primary-stronger: var(--color-purple-800);
+  --color-fg-primary-strongest: var(--color-purple-900);
+  --color-fg-secondary-light: var(--color-blue-500);
+  --color-fg-secondary-lighter: var(--color-blue-300);
+  --color-fg-secondary-medium: var(--color-blue-600);
+  --color-fg-secondary-strong: var(--color-blue-700);
+  --color-fg-secondary-stronger: var(--color-blue-800);
+  --color-fg-secondary-strongest: var(--color-blue-900);
+  --color-fg-success-light: var(--color-green-300);
+  --color-fg-success-lighter: var(--color-green-200);
+  --color-fg-success-medium: var(--color-green-600);
+  --color-fg-success-strong: var(--color-green-700);
+  --color-fg-success-stronger: var(--color-green-800);
+  --color-fg-warning-light: var(--color-orange-300);
+  --color-fg-warning-medium: var(--color-orange-500);
+  --color-fg-warning-strong: var(--color-orange-600);
+  --color-fg-warning-stronger: var(--color-orange-800);
+  --shadow-dark: var(--color-alpha-400-a);
+  --shadow-light: var(--color-alpha-300-a);
+  --border-radius-none: var(--dimensions-0);
+  --border-radius-xs: var(--dimensions-2);
+  --border-radius-s: var(--dimensions-4);
+  --border-radius-m: var(--dimensions-8);
+  --border-radius-l: var(--dimensions-16);
+  --border-radius-xl: var(--dimensions-24);
+  --border-width-none: var(--dimensions-0);
+  --border-width-s: var(--dimensions-1);
+  --border-width-m: var(--dimensions-2);
+  --border-width-l: var(--dimensions-4);
+  --height-xxxs: var(--dimensions-12);
+  --height-xxs: var(--dimensions-16);
+  --height-xs: var(--dimensions-20);
+  --height-s: var(--dimensions-24);
+  --height-m: var(--dimensions-32);
+  --height-l: var(--dimensions-36);
+  --height-xl: var(--dimensions-40);
+  --height-xxl: var(--dimensions-48);
+  --height-xxxl: var(--dimensions-56);
+  --shadow-high-spread: var(--dimensions-0);
+  --shadow-high-x-position: var(--dimensions-0);
+  --shadow-high-blur: var(--dimensions-24);
+  --shadow-high-y-position: var(--dimensions-24);
+  --shadow-higher-spread: var(--dimensions-0);
+  --shadow-higher-x-position: var(--dimensions-0);
+  --shadow-higher-blur: var(--dimensions-48);
+  --shadow-higher-y-position: var(--dimensions-48);
+  --shadow-low-spread: var(--dimensions-0);
+  --shadow-low-x-position: var(--dimensions-0);
+  --shadow-low-blur: var(--dimensions-2);
+  --shadow-low-y-position: var(--dimensions-2);
+  --shadow-mid-spread: var(--dimensions-0);
+  --shadow-mid-x-position: var(--dimensions-0);
+  --shadow-mid-blur: var(--dimensions-12);
+  --shadow-mid-y-position: var(--dimensions-12);
+  --spacing-gap-none: var(--dimensions-0);
+  --spacing-gap-xxs: var(--dimensions-2);
+  --spacing-gap-xs: var(--dimensions-4);
+  --spacing-gap-s: var(--dimensions-8);
+  --spacing-gap-m: var(--dimensions-12);
+  --spacing-gap-ml: var(--dimensions-16);
+  --spacing-gap-l: var(--dimensions-24);
+  --spacing-gap-xl: var(--dimensions-48);
+  --spacing-padding-none: var(--dimensions-0);
+  --spacing-padding-xxxs: var(--dimensions-2);
+  --spacing-padding-xxs: var(--dimensions-4);
+  --spacing-padding-xs: var(--dimensions-8);
+  --spacing-padding-s: var(--dimensions-12);
+  --spacing-padding-m: var(--dimensions-16);
+  --spacing-padding-ml: var(--dimensions-20);
+  --spacing-padding-l: var(--dimensions-24);
+  --spacing-padding-xl: var(--dimensions-32);
+  --spacing-padding-xxl: var(--dimensions-40);
+  --typography-body-xs: var(--font-size-12);
+  --typography-body-s: var(--font-size-14);
+  --typography-body-m: var(--font-size-16);
+  --typography-body-l: var(--font-size-18);
+  --typography-body-xl: var(--font-size-20);
+  --typography-body-xxl: var(--font-size-24);
+  --typography-body-regular: var(--font-weight-regular);
+  --typography-heading-xs: var(--font-size-12);
+  --typography-heading-s: var(--font-size-16);
+  --typography-heading-m: var(--font-size-20);
+  --typography-heading-l: var(--font-size-24);
+  --typography-heading-xl: var(--font-size-32);
+  --typography-heading-semibold: var(--font-weight-semibold);
+  --typography-helper-text-s: var(--font-size-12);
+  --typography-helper-text-m: var(--font-size-14);
+  --typography-helper-text-l: var(--font-size-16);
+  --typography-helper-text-light: var(--font-weight-light);
+  --typography-helper-text-regular: var(--font-weight-regular);
+  --typography-helper-text-semibold: var(--font-weight-semibold);
+  --typography-label-s: var(--font-size-12);
+  --typography-label-m: var(--font-size-14);
+  --typography-label-l: var(--font-size-16);
+  --typography-label-xl: var(--font-size-20);
+  --typography-label-regular: var(--font-weight-regular);
+  --typography-label-semibold: var(--font-weight-semibold);
+  --typography-title-s: var(--font-size-14);
+  --typography-title-m: var(--font-size-16);
+  --typography-title-l: var(--font-size-20);
+  --typography-title-xl: var(--font-size-24);
+  --typography-title-bold: var(--font-weight-bold);
+  --border-style-default: var(--line-style-solid);
+  --border-style-outline: var(--line-style-dashed);
+  --typography-font-family: var(--font-family-sans);
+  --typography-helper-text-italic: var(--font-style-lightitalic);
+}