@tetherto/mdk-react-devkit 0.0.0 → 0.12.1

package/src/primitives/styles/_mixins.scss

@@ -0,0 +1,202 @@
+/**
+ * Shared SCSS Mixins
+ * Import this file to use the mixins in your SCSS files.
+ */
+
+@mixin flex_align {
+  display: flex;
+  align-items: center;
+}
+
+@mixin flex_wrap {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@mixin inline_flex_align {
+  display: inline-flex;
+  align-items: center;
+}
+
+@mixin flex_justify_end {
+  display: flex;
+  justify-content: flex-end;
+}
+
+@mixin flex_align_start {
+  display: flex;
+  align-items: flex-start;
+}
+
+@mixin flex_align_end {
+  display: flex;
+  align-items: flex-end;
+}
+
+@mixin flex_column {
+  display: flex;
+  flex-direction: column;
+}
+
+@mixin flex_row {
+  display: flex;
+  flex-direction: row;
+}
+
+@mixin flex_justify_center {
+  display: flex;
+  justify-content: center;
+}
+
+@mixin flex_between {
+  display: flex;
+  justify-content: space-between;
+}
+
+@mixin flex_column_align_end {
+  @include flex_column;
+
+  align-items: flex-end;
+}
+
+@mixin flex_justify_end_align_center {
+  @include flex_align;
+
+  justify-content: flex-end;
+}
+
+@mixin flex_center_justify_start {
+  @include flex_align;
+
+  justify-content: flex-start;
+}
+
+@mixin flex_column_justify_start {
+  @include flex_column;
+
+  justify-content: flex-start;
+}
+
+@mixin flex_end_justify_start {
+  @include flex_align_end;
+
+  justify-content: flex-start;
+}
+
+@mixin flex_center_justify_end {
+  @include flex_align;
+
+  justify-content: flex-end;
+}
+
+@mixin flex_column_align_center {
+  @include flex_column;
+
+  align-items: center;
+}
+
+@mixin flex_align_start_center {
+  @include flex_align_start;
+
+  justify-content: center;
+}
+
+@mixin flex_align_start_between {
+  @include flex_align_start;
+
+  justify-content: space-between;
+}
+
+@mixin flex_column_center_start {
+  @include flex_column;
+
+  align-items: flex-start;
+  justify-content: center;
+}
+
+@mixin flex_column_center_between {
+  @include flex_column;
+
+  align-items: center;
+  justify-content: space-between;
+}
+
+@mixin flex_column_justify_end {
+  @include flex_column;
+
+  justify-content: flex-end;
+}
+
+@mixin flex_center {
+  @include flex_align;
+
+  justify-content: center;
+}
+
+@mixin flex_align_between {
+  @include flex_align;
+
+  justify-content: space-between;
+}
+
+@mixin flex_between_end {
+  @include flex_between;
+
+  align-items: flex-end;
+}
+
+@mixin flex_column_center {
+  @include flex_column;
+
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin flex_column_between {
+  @include flex_column;
+
+  justify-content: space-between;
+}
+
+@mixin flex_column_align_start {
+  @include flex_column;
+
+  align-items: flex-start;
+}
+
+@mixin flex_row_align_start {
+  @include flex_row;
+
+  align-items: flex-start;
+}
+
+@mixin flex_column_justify_center {
+  @include flex_column;
+
+  justify-content: center;
+}
+
+@mixin text_ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/** Min / Max / Avg label (orange, extra-bold, 14px) */
+@mixin chart_stat_label {
+  color: var(--mdk-color-primary);
+  font-family: var(--font-mono);
+  font-weight: 800;
+  font-size: 14px;
+  line-height: 1.25;
+}
+
+/** Min / Max / Avg value (#9FA6AC, 14px) */
+@mixin chart_stat_value {
+  color: #9fa6ac;
+  color: rgb(var(--mdk-color-dark-grey));
+  font-family: var(--font-mono);
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.25;
+}

package/src/primitives/styles/index.scss

@@ -0,0 +1,72 @@
+// Shared tools
+@use 'mixins' as *;
+@forward 'base';
+@forward 'mixins';
+@forward 'colors';
+@forward 'fonts';
+@forward 'animations';
+
+// Component Styles
+@use '../components/accordion/styles' as accordion;
+@use '../components/action-button/styles' as action-button;
+@use '../components/avatar/styles' as avatar;
+@use '../components/button/styles' as button;
+@use '../components/card/styles' as card;
+@use '../components/chart-container/styles' as chart-container;
+@use '../components/checkbox/styles' as checkbox;
+@use '../components/currency-toggler/styles' as currency-toggler;
+@use '../components/date-picker/styles' as date-picker;
+@use '../components/dialog/styles' as dialog;
+@use '../components/empty-state/styles' as empty-state;
+@use '../components/form/styles' as form;
+@use '../components/error-boundary/styles' as error-boundary;
+@use '../components/error-card/styles' as error-card;
+@use '../components/not-found-page/styles' as not-found-page;
+@use '../components/tabs/styles' as tabs;
+@use '../components/input/styles' as input;
+@use '../components/label/styles' as label;
+@use '../components/switch/styles' as switch;
+@use '../components/typography/styles' as typography;
+@use '../components/breadcrumbs/styles' as breadcrumbs;
+@use '../components/radio/styles' as radio;
+@use '../components/tooltip/styles' as tooltip;
+@use '../components/popover/styles' as popover;
+@use '../components/tag/styles' as tag;
+@use '../components/tag-input/styles' as tag-input;
+@use '../components/textarea/styles' as textarea;
+@use '../components/indicator/styles' as indicator;
+@use '../components/select/styles' as select;
+@use '../components/multi-select/styles' as multi-select;
+@use '../components/multi-level-select/styles' as multi-level-select;
+@use '../components/skeleton/styles' as skeleton;
+@use '../components/dropdown-menu/styles' as dropdown-menu;
+@use '../components/toast/styles' as toast;
+@use '../components/pagination/styles' as pagination;
+@use '../components/data-table/styles' as data-table;
+@use '../components/data-label/styles' as data-label;
+@use '../components/sidebar/styles' as sidebar;
+@use '../components/app-header/app-header' as app-header;
+@use '../components/mdk-wordmark/mdk-wordmark' as mdk-wordmark;
+@use '../components/spinner/styles' as spinner;
+@use '../components/loader/styles' as loader;
+@use '../components/cascader/styles' as cascader;
+@use '../components/badge/styles' as badge;
+@use '../components/list-view-filter/styles' as list-view-filter;
+@use '../components/area-chart/styles' as area-chart;
+@use '../components/average-downtime-chart/styles' as average-downtime-chart;
+@use '../components/bar-chart/styles' as bar-chart;
+@use '../components/btc-average-price/styles' as btc-average-price;
+@use '../components/doughnut-chart/styles' as doughnut-chart;
+@use '../components/operations-energy-cost-chart/styles' as operations-energy-cost-chart;
+@use '../components/gauge-chart/styles' as gauge-chart;
+@use '../components/mosaic/styles' as mosaic;
+@use '../components/heatmap/styles' as heatmap;
+@use '../components/line-chart/styles' as line-chart;
+@use '../components/labeled-card/styles' as labeled-card;
+@use '../components/logs/styles' as logs;
+@use '../components/min-max-avg/styles' as min-max-avg;
+@use '../components/chart-stats-footer/styles' as chart-stats-footer;
+@use '../components/detail-legend/styles' as detail-legend;
+@use '../components/alert/styles' as alert;
+@use '../components/divider/styles' as divider;
+@use 'example';

package/src/styles-domain.scss

@@ -0,0 +1,11 @@
+// Mining-domain stylesheet.
+// Builds to dist/styles-domain.css and is exported as
+// `@tetherto/mdk-react-devkit/styles-domain.css`.
+//
+// Carries the styles for the mining-domain components only —
+// dashboard, alerts, settings, etc. It relies
+// on the design tokens defined in the primitives stylesheet, so consumers MUST import
+// `@tetherto/mdk-react-devkit/styles.css` first. Apps that use only the generic
+// primitives can skip this file to ship roughly half the CSS.
+
+@forward "./domain/styles/index";

package/src/styles.scss

@@ -0,0 +1,9 @@
+// Primitives stylesheet.
+// Builds to dist/styles.css and is exported as `@tetherto/mdk-react-devkit/styles.css`.
+//
+// Carries the design tokens plus the styles for the generic primitives
+// (Button, Card, Input, charts, …). Apps that also use the mining-domain
+// components must additionally import
+// `@tetherto/mdk-react-devkit/styles-domain.css` (loaded after this file).
+
+@forward "./primitives/styles/index";