feat(chart): add new component

Author: Kiarokh

src/components/chart/chart.scss

@@ -0,0 +1,103 @@
+@use '../../style/mixins';
+$min-item-size: 0.5rem;
+
+/**
+* @prop --chart-background-color: Defines the background color of the chart. Defaults to `transparent` for _most_ chart types.
+* @prop --chart-axis-line-color: Defines color of the axis lines. Defaults to `--contrast-900`. Note that lines have opacity as well, and get opaque on hover.
+* @prop --chart-item-border-radius: Defines the roundness of corners of items in a chart. Defaults to different values depending on the chart type. Does not have any effect on `pie` and `doughnut` types.
+* @prop --chart-stacked-item-divider-color: Defines the color that visually separates stacked chart items, for example for a `stacked-bar` chart. Defaults to `rgb(var(--color-white), 0.6)`.
+*/
+
+:host(limel-chart) {
+    --chart-axis-line-color: var(
+        --limel-chart-axis-line-color,
+        rgb(var(--contrast-900))
+    );
+    box-sizing: border-box;
+    isolation: isolate;
+
+    display: flex;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    padding: var(--limel-chart-padding);
+}
+
+table {
+    // Since these are mainly "resets", no styles should be before them.
+    all: unset;
+    border-collapse: collapse;
+    border-spacing: 0;
+    empty-cells: show;
+
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+
+    colgroup,
+    thead,
+    tbody,
+    tr,
+    th,
+    td {
+        all: unset;
+    }
+
+    caption,
+    colgroup,
+    thead,
+    tfoot,
+    th,
+    td {
+        @include mixins.visually-hidden;
+    }
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: border-box;
+}
+
+.chart {
+    position: relative;
+    flex-grow: 1;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    min-width: 0;
+
+    &:has(.item:hover),
+    &:has(.item:focus-visible) {
+        .item {
+            opacity: 0.4;
+        }
+    }
+}
+
+.item {
+    transition:
+        background-color 0.2s ease,
+        filter 0.2s ease,
+        opacity 0.4s ease;
+    cursor: help;
+
+    &:focus-visible,
+    &:hover {
+        opacity: 1 !important;
+    }
+}
+
+@import './partial-styles/_layout-for-charts-with-x-y-axises';
+@import './partial-styles/_layout-for-charts-with-circular-shape';
+@import './partial-styles/_bar-gantt-scatter';
+@import './partial-styles/_area';
+@import './partial-styles/_line';
+@import './partial-styles/_pie-doughnut';
+@import './partial-styles/_ring';
+@import './partial-styles/_stacked-bar';
+@import './partial-styles/_axises';