@amboss/design-system 2.4.0 → 2.4.2

package/build/scss/_theming.scss

@@ -1,5 +1,29 @@
 @mixin ds-theme-light {
   & {
+    --color-badge-background-default: #ffffff;
+    --color-badge-background-green: #e8f8f4;
+    --color-badge-background-blue: #e7effe;
+    --color-badge-background-yellow: #fef3e1;
+    --color-badge-background-brand: #e7f6f8;
+    --color-badge-background-purple: #f2effb;
+    --color-badge-background-red: #fde8e8;
+    --color-badge-background-gray: #eef2f5;
+    --color-badge-text-default: #1a1c1c;
+    --color-badge-text-green: #0b8363;
+    --color-badge-text-blue: #295dae;
+    --color-badge-text-yellow: #9a6304;
+    --color-badge-text-brand: #047a88;
+    --color-badge-text-purple: #5d44ab;
+    --color-badge-text-red: #c02725;
+    --color-badge-text-gray: #607585;
+    --color-badge-border-default: #e0e6eb;
+    --color-badge-border-green: #d0f1e8;
+    --color-badge-border-blue: #d2e2f9;
+    --color-badge-border-yellow: #fceaca;
+    --color-badge-border-brand: #ceedf1;
+    --color-badge-border-purple: #d8d0f3;
+    --color-badge-border-red: #fad1d1;
+    --color-badge-border-gray: #e0e6eb;
     --color-canvas: #eef2f5;
     --color-background-primary-default: #ffffff;
     --color-background-secondary-default: #f5f7f9;
@@ -89,30 +113,6 @@
     --color-divider-primary: #e0e6eb;
     --color-divider-secondary: rgba(163, 178, 189, 0.3);
     --color-divider-secondarySolid: #eef2f5;
-    --color-badge-background-default: #ffffff;
-    --color-badge-background-green: #e8f8f4;
-    --color-badge-background-blue: #e7effe;
-    --color-badge-background-yellow: #fef3e1;
-    --color-badge-background-brand: #e7f6f8;
-    --color-badge-background-purple: #f2effb;
-    --color-badge-background-red: #fde8e8;
-    --color-badge-background-gray: #eef2f5;
-    --color-badge-text-default: #1a1c1c;
-    --color-badge-text-green: #0b8363;
-    --color-badge-text-blue: #295dae;
-    --color-badge-text-yellow: #9a6304;
-    --color-badge-text-brand: #047a88;
-    --color-badge-text-purple: #5d44ab;
-    --color-badge-text-red: #c02725;
-    --color-badge-text-gray: #607585;
-    --color-badge-border-default: #e0e6eb;
-    --color-badge-border-green: #e8f8f4;
-    --color-badge-border-blue: #e7effe;
-    --color-badge-border-yellow: #fef3e1;
-    --color-badge-border-brand: #e7f6f8;
-    --color-badge-border-purple: #f2effb;
-    --color-badge-border-red: #fde8e8;
-    --color-badge-border-gray: #eef2f5;
     --color-segmented-progress-bar-monochrome: #607585;
     --color-segmented-progress-bar-success: #39d6ac;
     --color-segmented-progress-bar-warning: #f1d56b;
@@ -130,6 +130,32 @@
     --color-qbank-answer-border-correct-default: #8adcc6;
     --color-qbank-answer-border-correct-with-hint-default: #f6c66f;
     --color-qbank-answer-border-incorrect-default: #f07575;
+    --color-chart-border-default: #a3b2bd;
+    --color-chart-grid-primary-default: rgba(163, 178, 189, 0.3);
+    --color-chart-grid-secondary-default: rgba(163, 178, 189, 0.3);
+    --color-chart-background-default: #ffffff;
+    --color-chart-background-inverted: #282c34;
+    --color-chart-text-positive-default: #0b8363;
+    --color-chart-text-negative-default: #dc4847;
+    --color-chart-text-warning-default: #df9411;
+    --color-chart-neutral-default: #a3b2bd;
+    --color-chart-neutral-subtle: #eef2f5;
+    --color-chart-neutral-bold: #607585;
+    --color-chart-positive-default: #0b8363;
+    --color-chart-positive-subtle: #e8f8f4;
+    --color-chart-positive-bold: #0a5c45;
+    --color-chart-warning-default: #f6bc56;
+    --color-chart-warning-subtle: #fef3e1;
+    --color-chart-warning-bold: #f6c66f;
+    --color-chart-negative-default: #f07575;
+    --color-chart-negative-subtle: #fde8e8;
+    --color-chart-negative-bold: #dc4847;
+    --color-chart-info-default: #6e95cf;
+    --color-chart-info-subtle: #e7effe;
+    --color-chart-info-bold: #295dae;
+    --color-chart-accent-default: #0aa6b8;
+    --color-chart-accent-subtle: #e7f6f8;
+    --color-chart-accent-bold: #047a88;
     --elevation-1: 0px 0.3px 0.6px rgba(0, 0, 0, 0.0035), 0px 2px 5px rgba(0, 0, 0, 0.07);
     --elevation-2: 0px 2px 8px 0px rgba(0, 0, 0, 0.12), 0px 0.3px 1px 0px rgba(0, 0, 0, 0.01);
     --elevation-3: 0px 0.5px 2.5px rgba(0, 0, 0, 0.16), 0px 4px 20px rgba(0, 0, 0, 0.2);
@@ -138,6 +164,30 @@
 }
 @mixin ds-theme-dark {
   & {
+    --color-badge-background-default: rgba(255, 255, 255, 0);
+    --color-badge-background-green: rgba(255, 255, 255, 0);
+    --color-badge-background-blue: rgba(255, 255, 255, 0);
+    --color-badge-background-yellow: rgba(255, 255, 255, 0);
+    --color-badge-background-brand: rgba(255, 255, 255, 0);
+    --color-badge-background-purple: rgba(255, 255, 255, 0);
+    --color-badge-background-red: rgba(255, 255, 255, 0);
+    --color-badge-background-gray: rgba(255, 255, 255, 0);
+    --color-badge-text-default: #ced1d6;
+    --color-badge-text-green: #41a48a;
+    --color-badge-text-blue: #6e95cf;
+    --color-badge-text-yellow: #cbac76;
+    --color-badge-text-brand: #2e9aa7;
+    --color-badge-text-purple: #ad97f7;
+    --color-badge-text-red: #d07c7c;
+    --color-badge-text-gray: #93979f;
+    --color-badge-border-default: #393e47;
+    --color-badge-border-green: #393e47;
+    --color-badge-border-blue: #393e47;
+    --color-badge-border-yellow: #393e47;
+    --color-badge-border-brand: #393e47;
+    --color-badge-border-purple: #393e47;
+    --color-badge-border-red: #393e47;
+    --color-badge-border-gray: #393e47;
     --color-canvas: #111111;
     --color-background-primary-default: #1a1c1c;
     --color-background-secondary-default: #24282d;
@@ -227,30 +277,6 @@
     --color-divider-primary: #32363e;
     --color-divider-secondary: rgba(147, 149, 159, 0.15);
     --color-divider-secondarySolid: #32363e;
-    --color-badge-background-default: transparent;
-    --color-badge-background-green: transparent;
-    --color-badge-background-blue: transparent;
-    --color-badge-background-yellow: transparent;
-    --color-badge-background-brand: transparent;
-    --color-badge-background-purple: transparent;
-    --color-badge-background-red: transparent;
-    --color-badge-background-gray: transparent;
-    --color-badge-text-default: #ced1d6;
-    --color-badge-text-green: #41a48a;
-    --color-badge-text-blue: #6e95cf;
-    --color-badge-text-yellow: #cbac76;
-    --color-badge-text-brand: #2e9aa7;
-    --color-badge-text-purple: #ad97f7;
-    --color-badge-text-red: #d07c7c;
-    --color-badge-text-gray: #93979f;
-    --color-badge-border-default: #393e47;
-    --color-badge-border-green: #393e47;
-    --color-badge-border-blue: #393e47;
-    --color-badge-border-yellow: #393e47;
-    --color-badge-border-brand: #393e47;
-    --color-badge-border-purple: #393e47;
-    --color-badge-border-red: #393e47;
-    --color-badge-border-gray: #393e47;
     --color-segmented-progress-bar-monochrome: #ced1d6;
     --color-segmented-progress-bar-success: #28816b;
     --color-segmented-progress-bar-warning: #a4792d;
@@ -268,6 +294,32 @@
     --color-qbank-answer-border-correct-default: #28816b;
     --color-qbank-answer-border-correct-with-hint-default: #a4792d;
     --color-qbank-answer-border-incorrect-default: #a45355;
+    --color-chart-border-default: #5b5f67;
+    --color-chart-grid-primary-default: rgba(147, 149, 159, 0.3);
+    --color-chart-grid-secondary-default: rgba(147, 149, 159, 0.3);
+    --color-chart-background-default: #282c34;
+    --color-chart-background-inverted: #ffffff;
+    --color-chart-text-positive-default: #a6f2dd;
+    --color-chart-text-negative-default: #f49a9a;
+    --color-chart-text-warning-default: #a4792d;
+    --color-chart-neutral-default: #5b5f67;
+    --color-chart-neutral-subtle: #1e2125;
+    --color-chart-neutral-bold: #93979f;
+    --color-chart-positive-default: #41a48a;
+    --color-chart-positive-subtle: #262e33;
+    --color-chart-positive-bold: #a6f2dd;
+    --color-chart-warning-default: #cbac76;
+    --color-chart-warning-subtle: #32302f;
+    --color-chart-warning-bold: #fae0b3;
+    --color-chart-negative-default: #d07c7c;
+    --color-chart-negative-subtle: #312b31;
+    --color-chart-negative-bold: #f49a9a;
+    --color-chart-info-default: #6e95cf;
+    --color-chart-info-subtle: #282e39;
+    --color-chart-info-bold: #99c1fa;
+    --color-chart-accent-default: #0aa6b8;
+    --color-chart-accent-subtle: #262f36;
+    --color-chart-accent-bold: #80dfea;
     --elevation-1: 0px 2px 5px 0px rgba(0, 0, 0, 0.07), 0px 0.3px 0.6px 0px rgba(0, 0, 0, 0), 0px 0px 0px 1px rgba(64, 69, 79, 0.4) inset;
     --elevation-2: 0px 2px 8px 0px rgba(0, 0, 0, 0.12), 0px 0.3px 1px 0px rgba(0, 0, 0, 0.01), 0px 0px 0px 1px rgba(64, 69, 79, 0.4) inset;
     --elevation-3: 0px 4px 20px 0px rgba(0, 0, 0, 0.2), 0px 0.5px 2.5px 0px rgba(0, 0, 0, 0.16), 0px 0px 0px 1px rgba(64, 69, 79, 0.5) inset;

package/build/scss/_variables.scss

@@ -1,34 +1,27 @@
-$sizeLetterSpacingNone: 0px;
-$sizeLetterSpacingS: 0.5px;
-$sizeLetterSpacingM: 1px;
-$sizeFontXs: 12px;
-$sizeFontS: 14px;
-$sizeFontM: 16px;
-$sizeFontL: 18px;
-$sizeFontXl: 20px;
-$sizeFontXxl: 24px;
-$sizeFontXxxl: 26px;
-$sizeSpacingZero: 0px;
-$sizeSpacingXxxs: 2px;
-$sizeSpacingXxs: 4px;
-$sizeSpacingXs: 8px;
-$sizeSpacingS: 12px;
-$sizeSpacingM: 16px;
-$sizeSpacingL: 24px;
-$sizeSpacingXl: 32px;
-$sizeSpacingXxl: 48px;
-$sizeBorderRadiusNone: 0px;
-$sizeBorderRadiusXs: 4px;
-$sizeBorderRadiusS: 8px;
-$sizeBorderRadiusM: 12px;
-$sizeBorderRadiusL: 16px;
-$sizeBorderRadiusXl: 24px;
-$sizeLineHeightXs: 1.1428571429;
-$sizeLineHeightS: 1.25;
-$sizeLineHeightM: 1.3333333;
-$sizeLineHeightL: 1.4285714286;
-$sizeLineHeightXl: 1.5;
-$sizeLineHeightXxl: 1.625;
+$colorBadgeBackground: var(--color-badge-background-default);
+$colorBadgeBackgroundGreen: var(--color-badge-background-green);
+$colorBadgeBackgroundBlue: var(--color-badge-background-blue);
+$colorBadgeBackgroundYellow: var(--color-badge-background-yellow);
+$colorBadgeBackgroundBrand: var(--color-badge-background-brand);
+$colorBadgeBackgroundPurple: var(--color-badge-background-purple);
+$colorBadgeBackgroundRed: var(--color-badge-background-red);
+$colorBadgeBackgroundGray: var(--color-badge-background-gray);
+$colorBadgeText: var(--color-badge-text-default);
+$colorBadgeTextGreen: var(--color-badge-text-green);
+$colorBadgeTextBlue: var(--color-badge-text-blue);
+$colorBadgeTextYellow: var(--color-badge-text-yellow);
+$colorBadgeTextBrand: var(--color-badge-text-brand);
+$colorBadgeTextPurple: var(--color-badge-text-purple);
+$colorBadgeTextRed: var(--color-badge-text-red);
+$colorBadgeTextGray: var(--color-badge-text-gray);
+$colorBadgeBorder: var(--color-badge-border-default);
+$colorBadgeBorderGreen: var(--color-badge-border-green);
+$colorBadgeBorderBlue: var(--color-badge-border-blue);
+$colorBadgeBorderYellow: var(--color-badge-border-yellow);
+$colorBadgeBorderBrand: var(--color-badge-border-brand);
+$colorBadgeBorderPurple: var(--color-badge-border-purple);
+$colorBadgeBorderRed: var(--color-badge-border-red);
+$colorBadgeBorderGray: var(--color-badge-border-gray);
 $colorCanvas: var(--color-canvas);
 $colorBackgroundPrimary: var(--color-background-primary-default);
 $colorBackgroundSecondary: var(--color-background-secondary-default);
@@ -118,30 +111,6 @@ $colorBorderSuccess: var(--color-border-success-default);
 $colorDividerPrimary: var(--color-divider-primary);
 $colorDividerSecondary: var(--color-divider-secondary);
 $colorDividerSecondarySolid: var(--color-divider-secondarySolid);
-$colorBadgeBackground: var(--color-badge-background-default);
-$colorBadgeBackgroundGreen: var(--color-badge-background-green);
-$colorBadgeBackgroundBlue: var(--color-badge-background-blue);
-$colorBadgeBackgroundYellow: var(--color-badge-background-yellow);
-$colorBadgeBackgroundBrand: var(--color-badge-background-brand);
-$colorBadgeBackgroundPurple: var(--color-badge-background-purple);
-$colorBadgeBackgroundRed: var(--color-badge-background-red);
-$colorBadgeBackgroundGray: var(--color-badge-background-gray);
-$colorBadgeText: var(--color-badge-text-default);
-$colorBadgeTextGreen: var(--color-badge-text-green);
-$colorBadgeTextBlue: var(--color-badge-text-blue);
-$colorBadgeTextYellow: var(--color-badge-text-yellow);
-$colorBadgeTextBrand: var(--color-badge-text-brand);
-$colorBadgeTextPurple: var(--color-badge-text-purple);
-$colorBadgeTextRed: var(--color-badge-text-red);
-$colorBadgeTextGray: var(--color-badge-text-gray);
-$colorBadgeBorder: var(--color-badge-border-default);
-$colorBadgeBorderGreen: var(--color-badge-border-green);
-$colorBadgeBorderBlue: var(--color-badge-border-blue);
-$colorBadgeBorderYellow: var(--color-badge-border-yellow);
-$colorBadgeBorderBrand: var(--color-badge-border-brand);
-$colorBadgeBorderPurple: var(--color-badge-border-purple);
-$colorBadgeBorderRed: var(--color-badge-border-red);
-$colorBadgeBorderGray: var(--color-badge-border-gray);
 $colorSegmentedProgressBarMonochrome: var(--color-segmented-progress-bar-monochrome);
 $colorSegmentedProgressBarSuccess: var(--color-segmented-progress-bar-success);
 $colorSegmentedProgressBarWarning: var(--color-segmented-progress-bar-warning);
@@ -159,10 +128,67 @@ $colorQbankAnswerBackgroundExplanationIncorrectDefault: var(--color-qbank-answer
 $colorQbankAnswerBorderCorrectDefault: var(--color-qbank-answer-border-correct-default);
 $colorQbankAnswerBorderCorrectWithHintDefault: var(--color-qbank-answer-border-correct-with-hint-default);
 $colorQbankAnswerBorderIncorrectDefault: var(--color-qbank-answer-border-incorrect-default);
+$colorChartBorder: var(--color-chart-border-default);
+$colorChartGridPrimaryDefault: var(--color-chart-grid-primary-default);
+$colorChartGridSecondaryDefault: var(--color-chart-grid-secondary-default);
+$colorChartBackground: var(--color-chart-background-default);
+$colorChartBackgroundInverted: var(--color-chart-background-inverted);
+$colorChartTextPositiveDefault: var(--color-chart-text-positive-default);
+$colorChartTextNegativeDefault: var(--color-chart-text-negative-default);
+$colorChartTextWarningDefault: var(--color-chart-text-warning-default);
+$colorChartNeutral: var(--color-chart-neutral-default);
+$colorChartNeutralSubtle: var(--color-chart-neutral-subtle);
+$colorChartNeutralBold: var(--color-chart-neutral-bold);
+$colorChartPositive: var(--color-chart-positive-default);
+$colorChartPositiveSubtle: var(--color-chart-positive-subtle);
+$colorChartPositiveBold: var(--color-chart-positive-bold);
+$colorChartWarning: var(--color-chart-warning-default);
+$colorChartWarningSubtle: var(--color-chart-warning-subtle);
+$colorChartWarningBold: var(--color-chart-warning-bold);
+$colorChartNegative: var(--color-chart-negative-default);
+$colorChartNegativeSubtle: var(--color-chart-negative-subtle);
+$colorChartNegativeBold: var(--color-chart-negative-bold);
+$colorChartInfo: var(--color-chart-info-default);
+$colorChartInfoSubtle: var(--color-chart-info-subtle);
+$colorChartInfoBold: var(--color-chart-info-bold);
+$colorChartAccent: var(--color-chart-accent-default);
+$colorChartAccentSubtle: var(--color-chart-accent-subtle);
+$colorChartAccentBold: var(--color-chart-accent-bold);
 $elevation1: var(--elevation-1);
 $elevation2: var(--elevation-2);
 $elevation3: var(--elevation-3);
 $elevation4: var(--elevation-4);
+$sizeLetterSpacingNone: 0px;
+$sizeLetterSpacingS: 0.5px;
+$sizeLetterSpacingM: 1px;
+$sizeFontXs: 12px;
+$sizeFontS: 14px;
+$sizeFontM: 16px;
+$sizeFontL: 18px;
+$sizeFontXl: 20px;
+$sizeFontXxl: 24px;
+$sizeFontXxxl: 26px;
+$sizeSpacingZero: 0px;
+$sizeSpacingXxxs: 2px;
+$sizeSpacingXxs: 4px;
+$sizeSpacingXs: 8px;
+$sizeSpacingS: 12px;
+$sizeSpacingM: 16px;
+$sizeSpacingL: 24px;
+$sizeSpacingXl: 32px;
+$sizeSpacingXxl: 48px;
+$sizeBorderRadiusNone: 0px;
+$sizeBorderRadiusXs: 4px;
+$sizeBorderRadiusS: 8px;
+$sizeBorderRadiusM: 12px;
+$sizeBorderRadiusL: 16px;
+$sizeBorderRadiusXl: 24px;
+$sizeLineHeightXs: 1.1428571429;
+$sizeLineHeightS: 1.25;
+$sizeLineHeightM: 1.3333333;
+$sizeLineHeightL: 1.4285714286;
+$sizeLineHeightXl: 1.5;
+$sizeLineHeightXxl: 1.625;
 $animationModalOpenDuration: 400ms;
 $animationModalOpenDelay: 150ms;
 $animationModalOpenTimingFunction: cubic-bezier(0.25, 0.1, 0.25, 1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amboss/design-system",
-  "version": "2.4.0",
+  "version": "2.4.2",
   "description": "the design system for AMBOSS products",
   "author": "AMBOSS",
   "license": "ISC",