@drivenets/design-system 0.15.0 → 0.16.0

package/src/styles/shared/_dropdown.scss

@@ -80,12 +80,12 @@ $dropdown-z-index: 9999;
 	}
 
 	&[data-disabled] {
-		color: var(--background-deselected);
-		background: var(--background-secondary-selected-weak);
+		color: var(--font-disabled);
 		cursor: not-allowed;
 
 		.indicator,
 		.itemIcon {
+			color: var(--font-disabled);
 			pointer-events: none;
 		}
 	}

package/src/styles/styles.scss

@@ -1,13 +1,10 @@
 @use './variables';
 @use './reset';
-@use './colors';
 @use './typography';
 @use './grid';
 @use './utilities';
-@use './spacing';
 @use './scrollbars';
 @use './root';
-@use './root_new';
 
 @use './shared/dropdown';
 @use './shared/input';

package/src/styles/_colors.scss

@@ -1,65 +0,0 @@
-// all colors are defined in https://www.figma.com/design/5BjP3KnzlfAxTbdx1srK48/%F0%9F%A6%BE-DAP-Design-System?node-id=4804-92173&p=f&m=dev
-$colors: (
-	// Primary
-	deep-blue: #001a47,
-	white: #ffffff,
-	black: #000000,
-	// Gradient (Specials)
-	gradient-violet-background: linear-gradient(90deg, #001b48 -0.12%, #312e81 99.86%),
-	gradient-violet-transparent: linear-gradient(180deg, rgba(30, 89, 215, 0.4) 0%, rgba(0, 27, 72, 0.16) 100%),
-	gradient-blue-light: linear-gradient(116deg, #e9eefc 22.81%, #d6e2ff 99.14%),
-	// Neutral
-	neutral-1: #2c3a4b,
-	neutral-2: #4c5f76,
-	neutral-3: #6c7b8e,
-	neutral-4: #8b98a6,
-	neutral-5: #a0aab7,
-	neutral-6: #b3bfd1,
-	neutral-7: #c2cedf,
-	neutral-8: #dee6f1,
-	neutral-9: #eaecef,
-	neutral-10: #f3f5fa,
-	neutral-bg: #dae2f4,
-	// Action
-	action-cta1: #0064fa,
-	action-cta2: #579aff,
-	action-cta3: #6b7b8e,
-	action-active-light: #c7d8ff,
-	action-hover-light: #e0eaff,
-	action-disabled: #b0b4bf,
-	// System Status
-	system-status-ok: #067a00,
-	system-status-info: #005dcf,
-	system-status-error: #d70a00,
-	system-status-alert: #d04d07,
-	system-status-in-progress: #1513da,
-	system-status-pending: #8836d6,
-	// Utility
-	utility-ok: #d6f5cf,
-	utility-info: #c4dcff,
-	utility-error: #ffd8d6,
-	utility-alert: #ffeac0,
-	utility-in-progress: #d9d9ff,
-	utility-pending: #ede2ff,
-	utility-disabled: #e3e3e3,
-	// Map / Scheme
-	map-and-scheme-line-layer-0: #5452f6,
-	map-and-scheme-line-layer-01: #cc4c5f,
-	map-and-scheme-line-layer-02: #00894d,
-	map-and-scheme-line-layer-1-optical: #3b8edb,
-	map-and-scheme-line-layer-2-ethernet: #00b8d9,
-	map-and-scheme-line-layer-3-routing: #9a55e0,
-	map-and-scheme-service-overlay: #c30ede,
-	map-and-scheme-pops-core-zones: #a92a00,
-	map-and-scheme-line-optional-1: #da7b2d
-);
-
-@mixin applyRootColors($colors) {
-	:root {
-		@each $name, $color in $colors {
-			#{'--' + $name}: #{$color};
-		}
-	}
-}
-
-@include applyRootColors($colors);

package/src/styles/_root_new.scss

@@ -1,451 +0,0 @@
-/*
- * Synced manually from Figma using the variables2css plugin.
- * Plugin: https://www.figma.com/community/plugin/1261234393153346915/variables2css
- *
- * How to update this file:
- *   1. Open the DAP Design System Figma file.
- *   2. Run the variables2css plugin.
- *   3. Select collections: "DAP-root-colors", "alias", "DAP uses", "Spacing", "Type Primitives".
- *   4. Config:
- *        - Type: CSS
- *        - Color: Hex
- *        - Unit: px
- *        - Tick only "Use root alias".
- *   5. Copy the plugin output and paste it over the contents of this file.
- */
-
-/* DAP-root-colors */
-:root {
-	/* Mode 1 */
-	/* color */
-	--color-dap-blue-050: #edf7ff;
-	--color-dap-blue-075: #e1efff;
-	--color-dap-blue-100: #d6eaff;
-	--color-dap-blue-200: #b5ddff;
-	--color-dap-blue-300: #83c8ff;
-	--color-dap-blue-400: #48aaff;
-	--color-dap-blue-500: #1e83ff;
-	--color-dap-blue-600: #0661ff;
-	--color-dap-blue-700: #004cff;
-	--color-dap-blue-800: #083bc5;
-	--color-dap-blue-900: #0d379b;
-	--color-dap-blue-950: #0e235d;
-	--color-dap-brand-050: #e5e8ed;
-	--color-dap-brand-100: #bfc6d1;
-	--color-dap-brand-200: #99a3b6;
-	--color-dap-brand-300: #667691;
-	--color-dap-brand-400: #405375;
-	--color-dap-brand-500: #001a47;
-	--color-dap-brand-600: #001436;
-	--color-dap-brand-700: #000d24;
-	--color-dap-dark-blue-050: #b3ccff;
-	--color-dap-dark-blue-100: #85b5ff;
-	--color-dap-dark-blue-150: #5e9dff;
-	--color-dap-dark-blue-200: #3d75ff;
-	--color-dap-dark-blue-300: #1a5eff;
-	--color-dap-dark-blue-400: #2c5ed9;
-	--color-dap-dark-blue-500: #0b43cc;
-	--color-dap-dark-blue-600: #12357e;
-	--color-dap-dark-blue-700: #31466b;
-	--color-dap-dark-gray-050: #e0e6f6;
-	--color-dap-dark-gray-100: #7c8291;
-	--color-dap-dark-gray-200: #2a3450;
-	--color-dap-data-amber: #ff9800;
-	--color-dap-data-blue: #3946d7;
-	--color-dap-data-deep-fuchsia: #9c27b0;
-	--color-dap-data-deep-purple: #3b00ed;
-	--color-dap-data-error: #b00020;
-	--color-dap-data-fuchsia: #d602ee;
-	--color-dap-data-green: #43a047;
-	--color-dap-data-light-amber: #ffeacc;
-	--color-dap-data-light-blue: #d7daf7;
-	--color-dap-data-light-deep-fuchsia: #ebd4ef;
-	--color-dap-data-light-deep-purple: #d7caff;
-	--color-dap-data-light-error: #efccd2;
-	--color-dap-data-light-fuchsia: #f7ccfc;
-	--color-dap-data-light-green: #d9ecda;
-	--color-dap-data-light-lime: #f2f4d6;
-	--color-dap-data-light-orange: #fcdfcc;
-	--color-dap-data-light-pink: #fbd7e9;
-	--color-dap-data-light-purple: #e6d4ff;
-	--color-dap-data-light-rose: #f7d1df;
-	--color-dap-data-light-teal: #d4edeb;
-	--color-dap-data-light-yellow: #fff3cd;
-	--color-dap-data-lime: #c0ca33;
-	--color-dap-data-orange: #ee6002;
-	--color-dap-data-pink: #eb3693;
-	--color-dap-data-purple: #6200ee;
-	--color-dap-data-rose: #d81b60;
-	--color-dap-data-teal: #26a69a;
-	--color-dap-data-yellow: #ffc107;
-	--color-dap-gray-050: #ffffff;
-	--color-dap-gray-100: #f3f5fa;
-	--color-dap-gray-200: #e5e8ed;
-	--color-dap-gray-300: #c7c9cc;
-	--color-dap-gray-400: #a5afba;
-	--color-dap-gray-500: #8b98a6;
-	--color-dap-gray-600: #4c5f76;
-	--color-dap-gray-700: #2c3a4b;
-	--color-dap-gray-800: #26303b;
-	--color-dap-gray-900: #000000;
-	--color-dap-green-050: #ecfdf6;
-	--color-dap-green-075: #d9f7e9;
-	--color-dap-green-100: #d2f9e7;
-	--color-dap-green-200: #a9f1d4;
-	--color-dap-green-300: #71e4bc;
-	--color-dap-green-400: #39cea0;
-	--color-dap-green-500: #13a47c;
-	--color-dap-green-600: #028764;
-	--color-dap-green-700: #07654c;
-	--color-dap-green-800: #085242;
-	--color-dap-green-900: #074236;
-	--color-dap-orange-050: #fff7ed;
-	--color-dap-orange-100: #ffedd5;
-	--color-dap-orange-200: #fed7aa;
-	--color-dap-orange-300: #fdba74;
-	--color-dap-orange-400: #fc9947;
-	--color-dap-orange-500: #fc8514;
-	--color-dap-orange-600: #c9510c;
-	--color-dap-orange-700: #9a3412;
-	--color-dap-orange-800: #7c2d12;
-	--color-dap-orange-900: #581f07;
-	--color-dap-purple-050: #f1f3fd;
-	--color-dap-purple-100: #dee3fb;
-	--color-dap-purple-200: #c5d0f8;
-	--color-dap-purple-300: #9db2f3;
-	--color-dap-purple-400: #6f8beb;
-	--color-dap-purple-500: #4a61e3;
-	--color-dap-purple-600: #3946d7;
-	--color-dap-purple-700: #2f34c6;
-	--color-dap-purple-800: #2c2da1;
-	--color-dap-purple-900: #292b7f;
-	--color-dap-purple-950: #1d1d4e;
-	--color-dap-red-050: #ffedf0;
-	--color-dap-red-100: #ffd2cf;
-	--color-dap-red-200: #eb8580;
-	--color-dap-red-300: #e14840;
-	--color-dap-red-400: #d70a00;
-	--color-dap-red-500: #a10800;
-	--color-dap-red-600: #6b0500;
-	--color-dap-red-700: #360300;
-}
-/* alias */
-:root {
-	/* Mode 1 */
-	/* color */
-	--brand-050: var(--color-dap-brand-050);
-	--brand-100: var(--color-dap-brand-100);
-	--brand-200: var(--color-dap-brand-200);
-	--brand-300: var(--color-dap-brand-300);
-	--brand-400: var(--color-dap-brand-400);
-	--brand-500-default: var(--color-dap-brand-500);
-	--brand-600: var(--color-dap-brand-600);
-	--brand-700: var(--color-dap-brand-700);
-	--darks-050: var(--color-dap-dark-gray-050);
-	--darks-100: var(--color-dap-dark-blue-050);
-	--darks-200: var(--color-dap-dark-blue-100);
-	--darks-300: var(--color-dap-dark-blue-200);
-	--darks-400: var(--color-dap-dark-blue-300);
-	--darks-500: var(--color-dap-dark-blue-600);
-	--darks-600: var(--color-dap-dark-blue-700);
-	--darks-700: var(--color-dap-dark-gray-200);
-	--info-050: var(--color-dap-blue-050);
-	--info-100: var(--color-dap-blue-100);
-	--info-200: var(--color-dap-blue-200);
-	--info-300: var(--color-dap-blue-300);
-	--info-400: var(--color-dap-blue-400);
-	--info-500: var(--color-dap-blue-500);
-	--info-600-default: var(--color-dap-blue-600);
-	--info-700: var(--color-dap-blue-700);
-	--info-800-progress: var(--color-dap-blue-800);
-	--info-900: var(--color-dap-blue-900);
-	--info-950: var(--color-dap-blue-950);
-	--negative-050: var(--color-dap-red-050);
-	--negative-100: var(--color-dap-red-100);
-	--negative-200: var(--color-dap-red-200);
-	--negative-300: var(--color-dap-red-300);
-	--negative-400-default: var(--color-dap-red-400);
-	--negative-500: var(--color-dap-red-500);
-	--negative-600: var(--color-dap-red-600);
-	--negative-700: var(--color-dap-red-700);
-	--paused-600: var(--color-dap-purple-600);
-	--positive-050: var(--color-dap-green-050);
-	--positive-100: var(--color-dap-green-100);
-	--positive-200: var(--color-dap-green-200);
-	--positive-300: var(--color-dap-green-300);
-	--positive-400: var(--color-dap-green-400);
-	--positive-500: var(--color-dap-green-500);
-	--positive-600: var(--color-dap-green-600);
-	--positive-700-default: var(--color-dap-green-700);
-	--positive-800: var(--color-dap-green-800);
-	--positive-900: var(--color-dap-green-900);
-	--primary-050: var(--color-dap-blue-050);
-	--primary-100: var(--color-dap-blue-100);
-	--primary-200: var(--color-dap-blue-200);
-	--primary-300: var(--color-dap-blue-300);
-	--primary-400: var(--color-dap-blue-400);
-	--primary-500: var(--color-dap-blue-500);
-	--primary-600: var(--color-dap-blue-600);
-	--primary-700-default: var(--color-dap-blue-700);
-	--primary-800: var(--color-dap-blue-800);
-	--primary-900: var(--color-dap-blue-900);
-	--primary-950: var(--color-dap-blue-950);
-	--secondary-050: var(--color-dap-gray-050);
-	--secondary-100: var(--color-dap-gray-100);
-	--secondary-200: var(--color-dap-gray-200);
-	--secondary-300: var(--color-dap-gray-300);
-	--secondary-400: var(--color-dap-gray-400);
-	--secondary-500-net-4: var(--color-dap-gray-500);
-	--secondary-600-net-2: var(--color-dap-gray-600);
-	--secondary-700-net-1: var(--color-dap-gray-700);
-	--secondary-800: var(--color-dap-gray-800);
-	--secondary-900: var(--color-dap-gray-900);
-	--warning-050: var(--color-dap-orange-050);
-	--warning-100: var(--color-dap-orange-100);
-	--warning-200: var(--color-dap-orange-200);
-	--warning-300: var(--color-dap-orange-300);
-	--warning-400: var(--color-dap-orange-400);
-	--warning-500: var(--color-dap-orange-500);
-	--warning-600-default: var(--color-dap-orange-600);
-	--warning-700: var(--color-dap-orange-700);
-	--warning-800: var(--color-dap-orange-800);
-	--warning-900: var(--color-dap-orange-900);
-}
-/* DAP uses */
-:root {
-	/* Mode 1 */
-	/* color */
-	--at-t-brand: #00a8e0;
-	--net-gen-1: #2f34c6;
-	--net-gen-2: #292b7f;
-	--net-gen-hover-1: #25299b;
-	--net-gen-hover-2: #18195a;
-	--net-gen-logo-dark-grey: var(--color-dap-gray-700);
-	--net-gen-logo-dodger-blue: #1793ff;
-	--net-gen-logo-light-grey: var(--color-dap-gray-500);
-	--net-gen-logo-ultramarine-blue: var(--color-dap-blue-700);
-	--nokia-brand: #005aff;
-	--background: var(--color-dap-gray-050);
-	--background-action: var(--color-dap-brand-500);
-	--background-action-hover: var(--color-dap-brand-600);
-	--background-action-hover-weak: var(--color-dap-gray-100);
-	--background-action-inverse: var(--color-dap-gray-700);
-	--background-action-secondary: var(--color-dap-gray-050);
-	--background-action-secondary-hover: var(--color-dap-blue-100);
-	--background-action-tertiary-hover: var(--color-dap-blue-050);
-	--background-active-status: var(--color-dap-blue-075);
-	--background-active-moderate: var(--color-dap-blue-400);
-	--background-brand: var(--color-dap-brand-500);
-	--background-deselected: var(--color-dap-gray-500);
-	--background-deselected-hover: var(--color-dap-gray-600);
-	--background-disable: var(--color-dap-gray-300);
-	--background-error: var(--color-dap-red-400);
-	--background-error-hover: var(--color-dap-red-500);
-	--background-error-secondary-hover: var(--color-dap-red-050);
-	--background-error-secondary-selected: var(--color-dap-red-100);
-	--background-error-selected: var(--color-dap-red-600);
-	--background-execution: #daf4f5;
-	--background-info: var(--color-dap-blue-050);
-	--background-info-strong: var(--color-dap-blue-800);
-	--background-light: var(--color-dap-dark-blue-500);
-	--background-light-disabled: #415b9a;
-	--background-light-primary: var(--color-dap-dark-blue-300);
-	--background-light-primary-hover: var(--color-dap-dark-blue-200);
-	--background-light-primary-selected: var(--color-dap-dark-blue-150);
-	--background-light-secondary-selected: var(--color-dap-dark-blue-400);
-	--background-neutral: var(--color-dap-gray-600);
-	--background-overlay: #001a4733;
-	--background-page: var(--color-dap-gray-100);
-	--background-pending: #e6e9fb;
-	--background-primary: var(--color-dap-blue-700);
-	--background-primary-hover: var(--color-dap-blue-800);
-	--background-primary-selected: var(--color-dap-blue-900);
-	--background-secondary: var(--color-dap-gray-100);
-	--background-secondary-hover: var(--color-dap-blue-050);
-	--background-secondary-selected-weak: var(--color-dap-gray-100);
-	--background-success: var(--color-dap-green-075);
-	--background-success-medium: var(--color-dap-green-500);
-	--background-success-strong: var(--color-dap-green-600);
-	--background-success-strong-hover: var(--color-dap-green-700);
-	--background-tertiary: var(--color-dap-gray-200);
-	--background-tertiary-selected-weak: var(--color-dap-gray-200);
-	--background-transparent-active: #ffffff4d;
-	--background-transparent-hover: #ffffff26;
-	--background-warning: var(--color-dap-orange-100);
-	--background-warning-strong: var(--color-dap-orange-600);
-	--border: var(--color-dap-gray-300);
-	--border-action-primary: var(--color-dap-blue-700);
-	--border-action-primary-hover: var(--color-dap-blue-800);
-	--border-action-secondary: var(--color-dap-brand-500);
-	--border-action-secondary-hover: var(--color-dap-brand-400);
-	--border-contrast: var(--color-dap-gray-400);
-	--border-disabled: var(--color-dap-gray-300);
-	--border-error: var(--color-dap-red-400);
-	--border-error-hover: var(--color-dap-red-500);
-	--border-error-weak: var(--color-dap-red-100);
-	--border-field: var(--color-dap-gray-200);
-	--border-field-focus: var(--color-dap-blue-700);
-	--border-field-hover: var(--color-dap-brand-600);
-	--border-inverse: var(--color-dap-gray-050);
-	--border-light-disabled: #415b9a;
-	--border-light-secondary: var(--color-dap-dark-blue-100);
-	--border-secondary: var(--color-dap-gray-200);
-	--border-secondary-hover: var(--color-dap-dark-blue-100);
-	--border-success: var(--color-dap-green-600);
-	--border-tertiary: var(--color-dap-gray-100);
-	--border-warning-strong: var(--color-dap-orange-600);
-	--error: var(--color-dap-red-050);
-	--font-action: var(--color-dap-blue-700);
-	--font-action-hover: var(--color-dap-blue-800);
-	--font-action-secondary: var(--color-dap-brand-500);
-	--font-action-secondary-hover: var(--color-dap-blue-800);
-	--font-code: var(--color-dap-blue-900);
-	--font-disabled: var(--color-dap-gray-300);
-	--font-error: var(--color-dap-red-500);
-	--font-highlight: var(--color-dap-data-deep-fuchsia);
-	--font-light-disabled: var(--color-dap-gray-500);
-	--font-main: var(--color-dap-gray-800);
-	--font-on-action: var(--color-dap-gray-050);
-	--font-on-disabled: var(--color-dap-gray-800);
-	--font-placeholder: var(--color-dap-gray-500);
-	--font-secondary: var(--color-dap-gray-600);
-	--font-success: var(--color-dap-green-700);
-	--font-warning: var(--color-dap-orange-700);
-	--icon-on-button: var(--color-dap-gray-050);
-	--icon-action: var(--color-dap-blue-700);
-	--icon-action-hover: var(--color-dap-blue-800);
-	--icon-action-secondary: var(--color-dap-brand-500);
-	--icon-disabled: var(--color-dap-gray-300);
-	--icon-error: var(--color-dap-red-500);
-	--icon-execution: #00939d;
-	--icon-information-main: var(--color-dap-gray-500);
-	--icon-information-secondary: var(--color-dap-blue-600);
-	--icon-inverse: var(--color-dap-gray-050);
-	--icon-main: var(--color-dap-gray-800);
-	--icon-on-dark-disabled: var(--color-dap-gray-500);
-	--icon-paused: var(--color-dap-purple-600);
-	--icon-pending: #212b86;
-	--icon-secondary: var(--color-dap-gray-600);
-	--icon-success: var(--color-dap-green-700);
-	--icon-success-light: var(--color-dap-green-400);
-	--icon-tertiary: var(--color-dap-brand-200);
-	--icon-warning: var(--color-dap-orange-600);
-	--icon-warning-light: var(--color-dap-orange-400);
-	--light-buttons-primary: var(--color-dap-dark-blue-300);
-	--light-buttons-primary-2: var(--color-dap-dark-blue-300);
-	--light-buttons-primary-3: var(--color-dap-dark-blue-300);
-	--light-buttons-primary-4: var(--color-dap-dark-blue-300);
-	--light-buttons-primary-5: var(--color-dap-dark-blue-300);
-	--light-buttons-primary-6: var(--color-dap-dark-blue-300);
-	--light-buttons-primary-7: var(--color-dap-dark-blue-300);
-	--light-buttons-primary-hover: var(--color-dap-dark-blue-200);
-	--light-buttons-primary-hover-2: var(--color-dap-dark-blue-200);
-	--light-buttons-primary-hover-3: var(--color-dap-dark-blue-200);
-	--light-buttons-primary-hover-4: var(--color-dap-dark-blue-200);
-	--light-buttons-primary-hover-5: var(--color-dap-dark-blue-200);
-	--light-buttons-primary-hover-6: var(--color-dap-dark-blue-200);
-	--light-buttons-primary-hover-7: var(--color-dap-dark-blue-200);
-	--light-buttons-secondary-background: var(--color-dap-dark-blue-600);
-	--light-buttons-secondary-hover: var(--color-dap-dark-blue-100);
-	--light-buttons-secondary-light: var(--color-dap-dark-gray-050);
-	--light-buttons-secondary-light-hover-background: var(--color-dap-dark-blue-700);
-	--light-buttons-tertiary: var(--color-dap-dark-gray-050);
-	--light-buttons-tertiary-hover-background: var(--color-dap-dark-gray-100);
-	--outline-extreme: var(--color-dap-gray-900);
-	--outline-inverse: var(--color-dap-gray-050);
-	--outline-moderate: var(--color-dap-blue-500);
-	--outline-strong: var(--color-dap-brand-500);
-	--outline-weak: var(--color-dap-blue-300);
-	--primary-green: #93c020;
-	--schema-amber: var(--color-dap-data-amber);
-	--schema-blue: var(--color-dap-data-blue);
-	--schema-deep-fuchsia: var(--color-dap-data-deep-fuchsia);
-	--schema-deep-purple: var(--color-dap-data-deep-purple);
-	--schema-error: var(--color-dap-data-error);
-	--schema-fuchsia: var(--color-dap-data-fuchsia);
-	--schema-green: var(--color-dap-data-green);
-	--schema-light-purple: var(--color-dap-data-light-purple);
-	--schema-light-amber: var(--color-dap-data-light-amber);
-	--schema-light-blue: var(--color-dap-data-light-blue);
-	--schema-light-deep-purple: var(--color-dap-data-light-deep-purple);
-	--schema-light-error: var(--color-dap-data-light-error);
-	--schema-light-green: var(--color-dap-data-light-green);
-	--schema-light-lime: var(--color-dap-data-light-lime);
-	--schema-light-orange: var(--color-dap-data-light-orange);
-	--schema-light-pink: var(--color-dap-data-light-pink);
-	--schema-light-rose: var(--color-dap-data-light-rose);
-	--schema-light-teal: var(--color-dap-data-light-teal);
-	--schema-light-yellow: var(--color-dap-data-light-yellow);
-	--schema-lime: var(--color-dap-data-lime);
-	--schema-orange: var(--color-dap-data-orange);
-	--schema-pink: var(--color-dap-data-pink);
-	--schema-purple: var(--color-dap-data-purple);
-	--schema-rose: var(--color-dap-data-rose);
-	--schema-teal: var(--color-dap-data-teal);
-	--schema-yellow: var(--color-dap-data-yellow);
-	--schema-light-deep-fuchsia: var(--color-dap-data-light-deep-fuchsia);
-	--schema-light-fuchsia: var(--color-dap-data-light-fuchsia);
-	--shadow-moderate: #00000026;
-	--shadow-strong: #00000066;
-	--shadow-weak: #0000001a;
-	--status-bg-inactive: var(--color-dap-gray-200);
-	--status-bg-neutral: var(--color-dap-gray-100);
-	--status-bg-pending: var(--color-dap-orange-100);
-	--status-bg-progress: var(--color-dap-blue-050);
-	--status-bg-success: var(--color-dap-green-075);
-	--status-bg-warning: var(--color-dap-orange-200);
-	--text-on-button: #000000;
-}
-/* Spacing */
-:root {
-	/* Default */
-	/* number */
-	--none: 0px;
-	--4xs: 2px;
-	--3xs: 4px;
-	--2xs: 6px;
-	--xs: 8px;
-	--sm: 12px;
-	--standard: 16px;
-	--md: 20px;
-	--lg: 24px;
-	--xl: 32px;
-	--2xl: 48px;
-	--3xl: 64px;
-	--4xl: 72px;
-	--5xl: 96px;
-}
-/* Type Primitives */
-:root {
-	/* Default */
-	/* number */
-	--body-paragraph-space-xs: 8px;
-	--body-font-size-xs: 12px;
-	--body-font-size-sm: 14px;
-	--body-font-size-md: 16px;
-	--body-line-height-xs: 16px;
-	--body-paragraph-space-small: 16px;
-	--heading-font-size-large: 18px;
-	--body-line-height-small: 20px;
-	--body-paragraph-space-md: 20px;
-	--heading-font-size-xl: 20px;
-	--heading-paragraph-space-large: 20px;
-	--heading-paragraph-space-xl: 20px;
-	--body-line-height-md: 24px;
-	--heading-font-size-2xl: 24px;
-	--heading-line-height-large: 24px;
-	--heading-paragraph-space-2xl: 24px;
-	--heading-line-height-xl: 26px;
-	--heading-font-size-3xl: 32px;
-	--heading-line-height-2xl: 32px;
-	--heading-line-height-3xl: 40px;
-	--heading-paragraph-space-3xl: 40px;
-	--font-weight-regular: 400;
-	--font-weight-medium: 500;
-	--font-weight-semi-bold: 600;
-	--font-weight-bold: 700;
-	--font-weight-extra-bold: 800;
-	/* string */
-	--font-family-base: Roboto;
-	--font-family-code: Fira Mono;
-}

package/src/styles/_spacing.scss

@@ -1,47 +0,0 @@
-/* Base Unit */
-$base-unit: 4px;
-
-/* Spacing Scale */
-:root {
-	--base-unit: #{$base-unit};
-
-	/* Primary Scale */
-	--spacing-1: var(--base-unit); /* 4px */
-	--spacing-2: calc(var(--base-unit) * 2); /* 8px */
-	--spacing-3: calc(var(--base-unit) * 3); /* 12px */
-	--spacing-4: calc(var(--base-unit) * 4); /* 16px */
-	--spacing-5: calc(var(--base-unit) * 5); /* 20px */
-	--spacing-6: calc(var(--base-unit) * 6); /* 24px */
-	--spacing-8: calc(var(--base-unit) * 8); /* 32px */
-	--spacing-10: calc(var(--base-unit) * 10); /* 40px */
-	--spacing-12: calc(var(--base-unit) * 12); /* 48px */
-	--spacing-16: calc(var(--base-unit) * 16); /* 64px */
-	--spacing-20: calc(var(--base-unit) * 20); /* 80px */
-	--spacing-24: calc(var(--base-unit) * 24); /* 96px */
-
-	/* Legacy Aliases */
-	--spacing-base: var(--spacing-4); /* 16px */
-
-	// New for DS v1.2
-
-	--spacing-none: 0;
-	--spacing-4xs: 2px;
-	--spacing-3xs: 4px;
-	--spacing-2xs: 6px;
-	--spacing-xs: 8px;
-	--spacing-sm: 12px;
-	--spacing-standard: 16px;
-	--spacing-md: 20px;
-	--spacing-lg: 24px;
-	--spacing-xl: 32px;
-	--spacing-2xl: 48px;
-	--spacing-3xl: 64px;
-	--spacing-4xl: 72px;
-	--spacing-5xl: 96px;
-
-	--exo-spacing-standard: 16px;
-	--exo-spacing-small: 12px;
-	--exo-spacing-x-small: 8px;
-	--exo-spacing-2x-small: 4px;
-	--exo-spacing-4x-small: 1px;
-}