@aivenio/aquarium 5.3.1 → 6.0.0-rc2

package/dist/_variables.scss

@@ -3,12 +3,7 @@
 
 $border-radius-default: 4px;
 $border-radius-full: 9999px;
-$border-radius-3xl: 1.5rem;
-$border-radius-2xl: 1rem;
-$border-radius-xl: 0.75rem;
-$border-radius-lg: 0.5rem;
-$border-radius-md: 0.375rem;
-$border-radius-sm: 0.125rem;
+$border-radius-lg: 6px;
 $border-radius-none: 0px;
 $border-width-0: 0px;
 $border-width-1: 1px;
@@ -66,100 +61,84 @@ $chart-colors-secondary-categorical-38: rgba(137, 235, 128, 1);
 $chart-colors-secondary-categorical-39: rgba(250, 178, 110, 1);
 $chart-colors-secondary-categorical-40: rgba(180, 229, 251, 1);
 $chart-colors-secondary-categorical-41: rgba(255, 173, 179, 1);
-$colors-white: white;
-$colors-black: black;
+$colors-white: rgba(255,255,255,1);
+$colors-black: rgba(0,0,0,1);
 $colors-transparent: transparent;
 $colors-current: currentColor;
-$colors-error-0: rgba(254,242,241,1);
-$colors-error-5: rgba(254,232,231,1);
-$colors-error-10: rgba(255,203,210,1);
-$colors-error-20: rgba(255,173,179,1);
-$colors-error-30: rgba(237,121,117,1);
-$colors-error-40: rgba(224,80,79,1);
-$colors-error-50: rgba(230,39,40,1);
-$colors-error-60: rgba(231,0,0,1);
-$colors-error-70: rgba(216,0,5,1);
-$colors-error-80: rgba(197,0,1,1);
-$colors-error-90: rgba(185,0,0,1);
-$colors-error-100: rgba(170,0,0,1);
-$colors-warning-0: rgba(255,253,249,1);
-$colors-warning-5: rgba(255,248,234,1);
-$colors-warning-10: rgba(255,242,205,1);
-$colors-warning-20: rgba(254,235,178,1);
-$colors-warning-30: rgba(253,223,129,1);
-$colors-warning-40: rgba(253,212,77,1);
-$colors-warning-50: rgba(253,201,38,1);
-$colors-warning-60: rgba(255,193,7,1);
-$colors-warning-70: rgba(255,179,0,1);
-$colors-warning-80: rgba(253,159,0,1);
-$colors-warning-90: rgba(255,144,3,1);
-$colors-warning-100: rgba(254,109,0,1);
-$colors-success-0: rgba(245,250,245,1);
-$colors-success-5: rgba(236,247,237,1);
-$colors-success-10: rgba(203,255,201,1);
-$colors-success-20: rgba(175,255,167,1);
-$colors-success-30: rgba(137,235,128,1);
-$colors-success-40: rgba(96,219,87,1);
-$colors-success-50: rgba(64,206,55,1);
-$colors-success-60: rgba(0,195,0,1);
-$colors-success-70: rgba(0,179,0,1);
-$colors-success-80: rgba(0,159,0,1);
-$colors-success-90: rgba(0,142,0,1);
-$colors-success-100: rgba(0,111,0,1);
-$colors-info-0: rgba(249,253,255,1);
-$colors-info-5: rgba(239,250,255,1);
-$colors-info-10: rgba(224,245,254,1);
-$colors-info-20: rgba(180,229,251,1);
-$colors-info-30: rgba(127,209,247,1);
-$colors-info-40: rgba(76,194,247,1);
-$colors-info-50: rgba(40,180,244,1);
-$colors-info-60: rgba(2,168,243,1);
-$colors-info-70: rgba(3,153,227,1);
-$colors-info-80: rgba(7,136,209,1);
-$colors-info-90: rgba(1,116,186,1);
-$colors-info-100: rgba(2,86,154,1);
-$colors-grey-0: rgba(247,247,250,1);
-$colors-grey-5: rgba(237,237,240,1);
-$colors-grey-10: rgba(225,225,227,1);
-$colors-grey-20: rgba(210,210,214,1);
-$colors-grey-30: rgba(180,180,187,1);
-$colors-grey-40: rgba(150,150,160,1);
-$colors-grey-50: rgba(120,120,133,1);
-$colors-grey-60: rgba(90,91,106,1);
-$colors-grey-70: rgba(74,75,87,1);
-$colors-grey-80: rgba(58,58,68,1);
-$colors-grey-90: rgba(41,42,49,1);
-$colors-grey-100: rgba(25,25,29,1);
-$colors-secondary-0: rgba(255,251,248,1);
-$colors-secondary-5: rgba(255,243,232,1);
-$colors-secondary-10: rgba(254,232,208,1);
-$colors-secondary-20: rgba(248,201,156,1);
-$colors-secondary-30: rgba(250,178,110,1);
-$colors-secondary-40: rgba(251,154,62,1);
-$colors-secondary-50: rgba(252,135,26,1);
-$colors-secondary-60: rgba(255,119,0,1);
-$colors-secondary-70: rgba(249,106,2,1);
-$colors-secondary-80: rgba(243,88,13,1);
-$colors-secondary-90: rgba(235,70,16,1);
-$colors-secondary-100: rgba(225,29,22,1);
-$colors-primary-0: rgba(255,255,255,1);
-$colors-primary-5: rgba(243,246,255,1);
-$colors-primary-10: rgba(227,233,255,1);
-$colors-primary-20: rgba(213,221,250,1);
-$colors-primary-30: rgba(199,209,244,1);
-$colors-primary-40: rgba(185,197,239,1);
-$colors-primary-50: rgba(157,170,238,1);
-$colors-primary-60: rgba(129,142,236,1);
-$colors-primary-70: rgba(88,101,205,1);
-$colors-primary-80: rgba(53,69,190,1);
-$colors-primary-90: rgba(34,47,149,1);
-$colors-primary-100: rgba(14,22,82,1);
+$colors-error-0: rgba(255,241,241,1);
+$colors-error-5: rgba(255,235,235,1);
+$colors-error-10: rgba(254,205,205,1);
+$colors-error-20: rgba(253,164,164,1);
+$colors-error-30: rgba(255,125,125,1);
+$colors-error-40: rgba(237,85,85,1);
+$colors-error-50: rgba(217,65,65,1);
+$colors-error-60: rgba(198,42,42,1);
+$colors-error-70: rgba(166,30,30,1);
+$colors-error-80: rgba(134,25,25,1);
+$colors-error-90: rgba(102,18,18,1);
+$colors-error-100: rgba(69,12,12,1);
+$colors-warning-0: rgba(255,249,230,1);
+$colors-warning-5: rgba(255,243,216,1);
+$colors-warning-10: rgba(255,234,186,1);
+$colors-warning-20: rgba(255,218,133,1);
+$colors-warning-30: rgba(255,201,77,1);
+$colors-warning-40: rgba(255,194,26,1);
+$colors-warning-50: rgba(235,172,0,1);
+$colors-warning-60: rgba(204,139,2,1);
+$colors-warning-70: rgba(145,96,0,1);
+$colors-warning-80: rgba(117,79,0,1);
+$colors-warning-90: rgba(87,59,0,1);
+$colors-warning-100: rgba(56,38,0,1);
+$colors-success-0: rgba(239,255,241,1);
+$colors-success-5: rgba(218,254,233,1);
+$colors-success-10: rgba(178,255,210,1);
+$colors-success-20: rgba(122,255,178,1);
+$colors-success-30: rgba(95,250,160,1);
+$colors-success-40: rgba(61,235,134,1);
+$colors-success-50: rgba(33,209,107,1);
+$colors-success-60: rgba(12,168,82,1);
+$colors-success-70: rgba(9,128,63,1);
+$colors-success-80: rgba(8,87,45,1);
+$colors-success-90: rgba(4,51,26,1);
+$colors-success-100: rgba(2,26,13,1);
+$colors-info-0: rgba(233,249,253,1);
+$colors-info-5: rgba(208,236,247,1);
+$colors-info-10: rgba(172,218,241,1);
+$colors-info-20: rgba(137,194,235,1);
+$colors-info-30: rgba(98,172,233,1);
+$colors-info-40: rgba(43,137,214,1);
+$colors-info-50: rgba(13,111,191,1);
+$colors-info-60: rgba(18,91,150,1);
+$colors-info-70: rgba(14,68,112,1);
+$colors-info-80: rgba(3,45,79,1);
+$colors-info-90: rgba(1,37,65,1);
+$colors-info-100: rgba(0,24,43,1);
+$colors-grey-0: rgba(250,250,250,1);
+$colors-grey-5: rgba(244,244,244,1);
+$colors-grey-10: rgba(235,235,235,1);
+$colors-grey-20: rgba(214,214,214,1);
+$colors-grey-30: rgba(181,181,183,1);
+$colors-grey-40: rgba(145,146,148,1);
+$colors-grey-50: rgba(104,105,107,1);
+$colors-grey-60: rgba(68,69,71,1);
+$colors-grey-70: rgba(45,46,48,1);
+$colors-grey-80: rgba(31,32,33,1);
+$colors-grey-90: rgba(22,23,26,1);
+$colors-grey-100: rgba(13,14,16,1);
+$colors-primary-0: rgba(240,254,254,1);
+$colors-primary-5: rgba(217,249,248,1);
+$colors-primary-10: rgba(183,242,241,1);
+$colors-primary-20: rgba(117,230,228,1);
+$colors-primary-30: rgba(46,208,205,1);
+$colors-primary-40: rgba(27,178,176,1);
+$colors-primary-50: rgba(0,150,147,1);
+$colors-primary-60: rgba(0,128,124,1);
+$colors-primary-70: rgba(0,98,96,1);
+$colors-primary-80: rgba(0,74,72,1);
+$colors-primary-90: rgba(0,49,48,1);
+$colors-primary-100: rgba(0,26,25,1);
 $box-shadow-body-inset: inset 0 0 0 3px var(--aquarium-background-color-body);
-$elevations-24dp: 0px 24px 48px rgba(90, 91, 106, 0.08), 0px 12px 24px rgba(58, 58, 68, 0.08);
-$elevations-16dp: 0px 16px 32px rgba(90, 91, 106, 0.12), 0px 8px 16px rgba(58, 58, 68, 0.12);
-$elevations-8dp: 0px 8px 16px rgba(90, 91, 106, 0.16), 0px 4px 8px rgba(58, 58, 68, 0.16);
-$elevations-4dp: 0px 4px 8px rgba(90, 91, 106, 0.20), 0px 2px 4px rgba(58, 58, 68, 0.20);
-$elevations-2dp: 0px 2px 4px rgba(90, 91, 106, 0.24), 0px 1px 2px rgba(58, 58, 68, 0.24);
+$elevations-md: 0px 4px 16px rgba(74, 74, 83, 0.05), 0px 14px 32px rgba(126, 126, 126, 0.05);
 $screens-default: 0px;
 $screens-xs: 320px;
 $screens-sm: 672px;
@@ -184,137 +163,73 @@ $spacing-l4: 48px;
 $spacing-l5: 64px;
 $spacing-l6: 96px;
 $spacing-l7: 160px;
-$font-size-base: 1rem;
-$font-size-base-line-height: 1.5rem;
-$font-size-xs: 0.75rem;
-$font-size-xs-line-height: 1rem;
-$font-size-sm: 0.875rem;
-$font-size-sm-line-height: 1.25rem;
-$font-size-lg-line-height: 1.75rem;
-$font-size-lg: 1.125rem;
-$font-size-xl-line-height: 1.75rem;
-$font-size-xl: 1.25rem;
-$font-size-2xl-line-height: 2rem;
-$font-size-2xl: 1.5rem;
-$font-size-3xl-line-height: 2.25rem;
-$font-size-3xl: 1.875rem;
-$font-size-4xl-line-height: 2.5rem;
-$font-size-4xl: 2.25rem;
-$font-size-5xl-line-height: 1;
-$font-size-5xl: 3rem;
-$font-size-6xl-line-height: 1;
-$font-size-6xl: 3.75rem;
-$font-size-7xl-line-height: 1;
-$font-size-7xl: 4.5rem;
-$font-size-8xl-line-height: 1;
-$font-size-8xl: 6rem;
-$font-size-9xl-line-height: 1;
-$font-size-9xl: 8rem;
 $background-color-body: $colors-white;
 $background-color-layer: $colors-white;
-$background-color-body-intense: $colors-grey-80;
 $background-color-inverse: $colors-grey-80;
 $background-color-overlay: $colors-white;
-$background-color-popover-content: $colors-white;
-$background-color-muted: $colors-grey-0;
-$background-color-default: $colors-grey-5;
-$background-color-medium: $colors-grey-5;
-$background-color-intense: $colors-grey-20;
-$background-color-primary-muted: $colors-primary-40;
-$background-color-primary-default: $colors-primary-80;
-$background-color-primary-graphic: $colors-primary-80;
-$background-color-primary-intense: $colors-primary-90;
-$background-color-primary-inverse: $colors-primary-90;
-$background-color-primary-active: $colors-primary-5;
-$background-color-primary-hover: $colors-primary-5;
-$background-color-action-primary-button-default: $colors-primary-80;
-$background-color-action-primary-button-active: $colors-primary-5;
-$background-color-action-primary-button-hover: $colors-primary-90;
-$background-color-action-primary-button-disabled: $colors-primary-40;
-$background-color-info-muted: $colors-info-10;
-$background-color-info-default: $colors-info-70;
-$background-color-info-graphic: $colors-info-70;
-$background-color-info-intense: $colors-info-90;
-$background-color-info-inverse: $colors-info-70;
-$background-color-success-muted: $colors-success-5;
-$background-color-success-default: $colors-success-70;
-$background-color-success-graphic: $colors-success-70;
-$background-color-success-intense: $colors-success-90;
+$background-color-muted: $colors-grey-5;
+$background-color-medium: $colors-grey-10;
+$background-color-intense: $colors-grey-30;
+$background-color-primary-default: $colors-primary-0;
+$background-color-primary-graphic: $colors-primary-30;
+$background-color-primary-inverse: $colors-primary-60;
+$background-color-primary-active: $colors-primary-0;
+$background-color-action-primary-button-default: $colors-grey-80;
+$background-color-action-primary-button-active: $colors-grey-50;
+$background-color-action-primary-button-hover: $colors-grey-60;
+$background-color-action-primary-button-disabled: $colors-grey-10;
+$background-color-info-default: $colors-info-0;
+$background-color-info-graphic: $colors-info-30;
+$background-color-info-inverse: $colors-info-50;
+$background-color-success-default: $colors-success-0;
+$background-color-success-graphic: $colors-success-40;
 $background-color-success-inverse: $colors-success-70;
-$background-color-warning-muted: $colors-warning-5;
-$background-color-warning-default: $colors-warning-70;
-$background-color-warning-graphic: $colors-warning-70;
-$background-color-warning-intense: $colors-warning-90;
+$background-color-warning-default: $colors-warning-0;
+$background-color-warning-graphic: $colors-warning-30;
 $background-color-warning-inverse: $colors-warning-70;
-$background-color-danger-muted: $colors-error-10;
-$background-color-danger-default: $colors-error-20;
-$background-color-danger-intense: $colors-error-50;
-$background-color-danger-graphic: $colors-error-50;
-$background-color-danger-inverse: $colors-error-70;
-$background-color-status-announcement: $colors-primary-5;
-$background-color-status-info: $colors-info-10;
-$background-color-status-warning: $colors-warning-5;
-$background-color-status-danger: $colors-error-5;
-$background-color-status-success: $colors-success-5;
-$border-color-muted: $colors-grey-5;
+$background-color-danger-default: $colors-error-0;
+$background-color-danger-graphic: $colors-error-40;
+$background-color-danger-inverse: $colors-error-60;
+$border-color-muted: $colors-grey-10;
 $border-color-default: $colors-grey-20;
-$border-color-intense: $colors-grey-50;
-$border-color-primary-muted: $colors-primary-60;
-$border-color-primary-default: $colors-primary-80;
+$border-color-intense: $colors-grey-70;
+$border-color-primary-muted: $colors-primary-10;
+$border-color-primary-default: $colors-primary-20;
 $border-color-primary-intense: $colors-primary-100;
-$border-color-action-focus: $colors-primary-80;
-$border-color-action-secondary-button-default: $colors-primary-80;
-$border-color-action-secondary-button-active: $colors-primary-5;
-$border-color-action-secondary-button-hover: $colors-primary-5;
-$border-color-action-secondary-button-disabled: $colors-primary-60;
+$border-color-action-focus: $colors-info-40;
+$border-color-action-secondary-button-default: $colors-primary-60;
+$border-color-action-secondary-button-active: $colors-primary-30;
+$border-color-action-secondary-button-hover: $colors-primary-40;
+$border-color-action-secondary-button-disabled: $colors-grey-20;
 $border-color-info-muted: $colors-info-50;
-$border-color-info-default: $colors-info-70;
-$border-color-info-intense: $colors-info-90;
+$border-color-info-default: $colors-info-20;
+$border-color-info-intense: $colors-info-50;
 $border-color-success-muted: $colors-success-10;
-$border-color-success-default: $colors-success-40;
+$border-color-success-default: $colors-success-30;
 $border-color-success-intense: $colors-success-70;
+$border-color-warning-default: $colors-warning-20;
 $border-color-warning-muted: $colors-warning-20;
-$border-color-warning-default: $colors-warning-70;
-$border-color-warning-intense: $colors-warning-90;
+$border-color-warning-intense: $colors-warning-60;
 $border-color-danger-muted: $colors-error-10;
-$border-color-danger-default: $colors-error-50;
-$border-color-danger-intense: $colors-error-80;
-$text-color-inactive: $colors-grey-40;
+$border-color-danger-default: $colors-error-20;
+$border-color-danger-intense: $colors-error-50;
+$text-color-inactive: $colors-grey-30;
 $text-color-muted: $colors-grey-50;
 $text-color-default: $colors-grey-70;
-$text-color-intense: $colors-grey-90;
 $text-color-opposite-default: $colors-white;
-$text-color-primary-inactive: $colors-primary-40;
-$text-color-primary-active: $colors-primary-90;
-$text-color-primary-muted: $colors-primary-60;
-$text-color-primary-graphic: $colors-primary-60;
-$text-color-primary-default: $colors-primary-70;
-$text-color-primary-intense: $colors-primary-80;
-$text-color-info-inactive: $colors-info-20;
-$text-color-info-muted: $colors-info-40;
+$text-color-primary-inactive: $colors-primary-10;
+$text-color-primary-active: $colors-primary-30;
+$text-color-primary-graphic: $colors-primary-40;
+$text-color-primary-default: $colors-primary-60;
 $text-color-info-graphic: $colors-info-40;
-$text-color-info-default: $colors-info-70;
-$text-color-info-intense: $colors-info-90;
-$text-color-success-inactive: $colors-success-10;
-$text-color-success-muted: $colors-success-30;
-$text-color-success-graphic: $colors-success-30;
+$text-color-info-default: $colors-info-50;
+$text-color-success-graphic: $colors-success-60;
 $text-color-success-default: $colors-success-70;
-$text-color-success-intense: $colors-success-90;
-$text-color-warning-inactive: $colors-warning-20;
-$text-color-warning-muted: $colors-warning-40;
-$text-color-warning-graphic: $colors-warning-40;
-$text-color-warning-default: $colors-warning-80;
-$text-color-warning-intense: $colors-warning-100;
-$text-color-danger-inactive: $colors-error-10;
-$text-color-danger-muted: $colors-error-20;
-$text-color-danger-graphic: $colors-error-20;
-$text-color-danger-default: $colors-error-50;
-$text-color-danger-intense: $colors-error-80;
-$box-shadow-24dp: $elevations-24dp;
-$box-shadow-16dp: $elevations-16dp;
-$box-shadow-8dp: $elevations-8dp;
-$box-shadow-4dp: $elevations-4dp;
-$box-shadow-2dp: $elevations-2dp;
+$text-color-warning-graphic: $colors-warning-60;
+$text-color-warning-default: $colors-warning-70;
+$text-color-danger-graphic: $colors-error-50;
+$text-color-danger-default: $colors-error-60;
+$box-shadow-overlay: $elevations-md;
 $margin-0: $spacing-0;
 $margin-1: $spacing-1;
 $margin-2: $spacing-2;
@@ -333,3 +248,40 @@ $margin-l4: $spacing-l4;
 $margin-l5: $spacing-l5;
 $margin-l6: $spacing-l6;
 $margin-l7: $spacing-l7;
+$background-color-body-intense: $background-color-inverse;
+$background-color-popover-content: $background-color-overlay;
+$background-color-default: $background-color-medium;
+$background-color-primary-muted: $background-color-primary-default;
+$background-color-primary-intense: $background-color-primary-inverse;
+$background-color-primary-hover: $background-color-primary-active;
+$background-color-info-muted: $background-color-info-default;
+$background-color-info-intense: $background-color-info-graphic;
+$background-color-success-muted: $background-color-success-default;
+$background-color-success-intense: $background-color-success-graphic;
+$background-color-warning-muted: $background-color-warning-default;
+$background-color-warning-intense: $background-color-warning-graphic;
+$background-color-danger-muted: $background-color-danger-default;
+$background-color-danger-intense: $background-color-danger-graphic;
+$text-color-intense: $text-color-default;
+$text-color-primary-muted: $text-color-primary-graphic;
+$text-color-primary-intense: $text-color-primary-default;
+$text-color-info-inactive: $text-color-info-graphic;
+$text-color-info-muted: $text-color-info-graphic;
+$text-color-info-intense: $text-color-info-default;
+$text-color-success-inactive: $text-color-success-graphic;
+$text-color-success-muted: $text-color-success-graphic;
+$text-color-success-intense: $text-color-success-default;
+$text-color-warning-inactive: $text-color-warning-graphic;
+$text-color-warning-muted: $text-color-warning-graphic;
+$text-color-warning-intense: $text-color-warning-default;
+$text-color-danger-inactive: $text-color-danger-graphic;
+$text-color-danger-muted: $text-color-danger-graphic;
+$text-color-danger-intense: $text-color-danger-default;
+$box-shadow-2dp: $box-shadow-overlay;
+$box-shadow-4dp: $box-shadow-overlay;
+$box-shadow-8dp: $box-shadow-overlay;
+$background-color-status-announcement: $background-color-primary-muted;
+$background-color-status-info: $background-color-info-muted;
+$background-color-status-warning: $background-color-warning-muted;
+$background-color-status-danger: $background-color-danger-muted;
+$background-color-status-success: $background-color-success-muted;