@drivenets/design-system 0.9.1 → 0.10.0

package/src/styles/_grid.scss

@@ -36,8 +36,8 @@
 }
 
 @mixin grid-setup($grid-setup) {
-	gap: map.get($grid-setup, 'gutter');
-	padding: map.get($grid-setup, 'margin');
+	gap: var(--ds-grid-gutter, #{map.get($grid-setup, 'gutter')});
+	padding: var(--ds-grid-margin, #{map.get($grid-setup, 'margin')});
 	width: 100%;
 	height: 100%;
 	box-sizing: border-box;

package/src/styles/_root_new.scss

@@ -0,0 +1,449 @@
+/*
+ * 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-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-pause: 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-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/shared/_input.scss

@@ -238,7 +238,6 @@ $textarea-height-default: 120px;
 
 	&.small {
 		height: $input-text-height-small;
-		padding: var(--spacing-4xs) var(--spacing-sm);
 	}
 
 	.clearIcon {
@@ -269,7 +268,6 @@ $textarea-height-default: 120px;
 	grid-column: 1 / -1;
 	outline: none;
 	align-items: center;
-	padding: var(--spacing-3xs) var(--spacing-sm);
 
 	.triggerIcon {
 		grid-column: 3;

package/src/styles/styles.scss

@@ -7,6 +7,7 @@
 @use './spacing';
 @use './scrollbars';
 @use './root';
+@use './root_new';
 
 @use './shared/dropdown';
 @use './shared/input';