npm - @mattermost/compass-ui - Versions diffs - 0.1.0-alpha.2 → 0.1.0-alpha.20 - Mend

@mattermost/compass-ui 0.1.0-alpha.2 → 0.1.0-alpha.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2324) hide show

package/dist/compass-ui.css CHANGED Viewed

@@ -1,294 +1,298 @@
-:root {
-  --color-neutral-0: #ffffff;
-  --color-neutral-50: #f4f4f6;
-  --color-neutral-100: #e8e9ed;
-  --color-neutral-150: #dddfe4;
-  --color-neutral-200: #d1d4db;
-  --color-neutral-250: #c6c9d2;
-  --color-neutral-300: #babec9;
-  --color-neutral-350: #afb3c0;
-  --color-neutral-400: #a4a9b7;
-  --color-neutral-450: #989dae;
-  --color-neutral-500: #8d93a5;
-  --color-neutral-550: #82889c;
-  --color-neutral-600: #767d93;
-  --color-neutral-650: #6c7389;
-  --color-neutral-700: #63697e;
-  --color-neutral-750: #5a6072;
-  --color-neutral-800: #505667;
-  --color-neutral-850: #484d5b;
-  --color-neutral-900: #3f4350;
-  --color-neutral-950: #363a45;
-  --color-neutral-1000: #2d3039;
-  --color-neutral-1050: #24262e;
-  --color-neutral-1100: #1b1d22;
-  --color-neutral-1150: #121317;
-  --color-neutral-1200: #090a0b;
-  --color-blue-100: #a5bef3;
-  --color-blue-200: #81a3ef;
-  --color-blue-300: #5d89ea;
-  --color-blue-400: #386fe5;
-  --color-blue-500: #1c58d9;
-  --color-blue-600: #174ab5;
-  --color-blue-700: #133a91;
-  --color-blue-800: #0e2b6c;
-  --color-cyan-100: #a2d6f6;
-  --color-cyan-200: #7cc5f3;
-  --color-cyan-300: #57b5f0;
-  --color-cyan-400: #32a4ec;
-  --color-cyan-500: #1592e0;
-  --color-cyan-600: #1279ba;
-  --color-cyan-700: #0e6295;
-  --color-cyan-800: #0b4970;
-  --color-green-100: #b3e5d1;
-  --color-green-200: #94dbbf;
-  --color-green-300: #75d1ac;
-  --color-green-400: #57c79a;
-  --color-green-500: #3db887;
-  --color-green-600: #339970;
-  --color-green-700: #297a5a;
-  --color-green-800: #1f5c43;
-  --color-indigo-100: #7492d2;
-  --color-indigo-200: #3c64b9;
-  --color-indigo-300: #32539a;
-  --color-indigo-400: #28427b;
-  --color-indigo-500: #1e325c;
-  --color-indigo-600: #14213e;
-  --color-indigo-700: #0f1a2e;
-  --color-indigo-800: #0a111f;
-  --color-orange-100: #f6c9a2;
-  --color-orange-200: #f2b47e;
-  --color-orange-300: #ef9e57;
-  --color-orange-400: #ec8832;
-  --color-orange-500: #e07315;
-  --color-orange-600: #ba6012;
-  --color-orange-700: #954d0e;
-  --color-orange-800: #703a0b;
-  --color-purple-100: #b7bae1;
-  --color-purple-200: #9a9ed5;
-  --color-purple-300: #7e83c9;
-  --color-purple-400: #6167bd;
-  --color-purple-500: #484fad;
-  --color-purple-600: #3c4290;
-  --color-purple-700: #303573;
-  --color-purple-800: #242856;
-  --color-red-100: #ebadae;
-  --color-red-200: #e28d8e;
-  --color-red-300: #da6c6e;
-  --color-red-400: #d24b4e;
-  --color-red-500: #c43133;
-  --color-red-600: #a3292b;
-  --color-red-700: #832122;
-  --color-red-800: #621819;
-  --color-teal-100: #a4f4f4;
-  --color-teal-200: #7ff0f0;
-  --color-teal-300: #5becec;
-  --color-teal-400: #36e7e7;
-  --color-teal-500: #1adbdb;
-  --color-teal-600: #15b7b7;
-  --color-teal-700: #119292;
-  --color-teal-800: #0d6e6e;
-  --color-yellow-100: #ffe099;
-  --color-yellow-200: #ffd470;
-  --color-yellow-300: #ffc847;
-  --color-yellow-400: #ffbc1f;
-  --color-yellow-500: #f5ab00;
-  --color-yellow-600: #cc8f00;
-  --color-yellow-700: #a37200;
-  --color-yellow-800: #7a5600;
-  --color-neutral-0-rgb: 255, 255, 255;
-  --color-neutral-50-rgb: 244, 244, 246;
-  --color-neutral-100-rgb: 232, 233, 237;
-  --color-neutral-150-rgb: 221, 223, 228;
-  --color-neutral-200-rgb: 209, 212, 219;
-  --color-neutral-250-rgb: 198, 201, 210;
-  --color-neutral-300-rgb: 186, 190, 201;
-  --color-neutral-350-rgb: 175, 179, 192;
-  --color-neutral-400-rgb: 164, 169, 183;
-  --color-neutral-450-rgb: 152, 157, 174;
-  --color-neutral-500-rgb: 141, 147, 165;
-  --color-neutral-550-rgb: 130, 136, 156;
-  --color-neutral-600-rgb: 118, 125, 147;
-  --color-neutral-650-rgb: 108, 115, 137;
-  --color-neutral-700-rgb: 99, 105, 126;
-  --color-neutral-750-rgb: 90, 96, 114;
-  --color-neutral-800-rgb: 80, 86, 103;
-  --color-neutral-850-rgb: 72, 77, 91;
-  --color-neutral-900-rgb: 63, 67, 80;
-  --color-neutral-950-rgb: 54, 58, 69;
-  --color-neutral-1000-rgb: 45, 48, 57;
-  --color-neutral-1050-rgb: 36, 38, 46;
-  --color-neutral-1100-rgb: 27, 29, 34;
-  --color-neutral-1150-rgb: 18, 19, 23;
-  --color-neutral-1200-rgb: 9, 10, 11;
-  --color-blue-100-rgb: 165, 190, 243;
-  --color-blue-200-rgb: 129, 163, 239;
-  --color-blue-300-rgb: 93, 137, 234;
-  --color-blue-400-rgb: 56, 111, 229;
-  --color-blue-500-rgb: 28, 88, 217;
-  --color-blue-600-rgb: 23, 74, 181;
-  --color-blue-700-rgb: 19, 58, 145;
-  --color-blue-800-rgb: 14, 43, 108;
-  --color-cyan-100-rgb: 162, 214, 246;
-  --color-cyan-200-rgb: 124, 197, 243;
-  --color-cyan-300-rgb: 87, 181, 240;
-  --color-cyan-400-rgb: 50, 164, 236;
-  --color-cyan-500-rgb: 21, 146, 224;
-  --color-cyan-600-rgb: 18, 121, 186;
-  --color-cyan-700-rgb: 14, 98, 149;
-  --color-cyan-800-rgb: 11, 73, 112;
-  --color-green-100-rgb: 179, 229, 209;
-  --color-green-200-rgb: 148, 219, 191;
-  --color-green-300-rgb: 117, 209, 172;
-  --color-green-400-rgb: 87, 199, 154;
-  --color-green-500-rgb: 61, 184, 135;
-  --color-green-600-rgb: 51, 153, 112;
-  --color-green-700-rgb: 41, 122, 90;
-  --color-green-800-rgb: 31, 92, 67;
-  --color-indigo-100-rgb: 116, 146, 210;
-  --color-indigo-200-rgb: 60, 100, 185;
-  --color-indigo-300-rgb: 50, 83, 154;
-  --color-indigo-400-rgb: 40, 66, 123;
-  --color-indigo-500-rgb: 30, 50, 92;
-  --color-indigo-600-rgb: 20, 33, 62;
-  --color-indigo-700-rgb: 15, 26, 46;
-  --color-indigo-800-rgb: 10, 17, 31;
-  --color-orange-100-rgb: 246, 201, 162;
-  --color-orange-200-rgb: 242, 180, 126;
-  --color-orange-300-rgb: 239, 158, 87;
-  --color-orange-400-rgb: 236, 136, 50;
-  --color-orange-500-rgb: 224, 115, 21;
-  --color-orange-600-rgb: 186, 96, 18;
-  --color-orange-700-rgb: 149, 77, 14;
-  --color-orange-800-rgb: 112, 58, 11;
-  --color-purple-100-rgb: 183, 186, 225;
-  --color-purple-200-rgb: 154, 158, 213;
-  --color-purple-300-rgb: 126, 131, 201;
-  --color-purple-400-rgb: 97, 103, 189;
-  --color-purple-500-rgb: 72, 79, 173;
-  --color-purple-600-rgb: 60, 66, 144;
-  --color-purple-700-rgb: 48, 53, 115;
-  --color-purple-800-rgb: 36, 40, 86;
-  --color-red-100-rgb: 235, 173, 174;
-  --color-red-200-rgb: 226, 141, 142;
-  --color-red-300-rgb: 218, 108, 110;
-  --color-red-400-rgb: 210, 75, 78;
-  --color-red-500-rgb: 196, 49, 51;
-  --color-red-600-rgb: 163, 41, 43;
-  --color-red-700-rgb: 131, 33, 34;
-  --color-red-800-rgb: 98, 24, 25;
-  --color-teal-100-rgb: 164, 244, 244;
-  --color-teal-200-rgb: 127, 240, 240;
-  --color-teal-300-rgb: 91, 236, 236;
-  --color-teal-400-rgb: 54, 231, 231;
-  --color-teal-500-rgb: 26, 219, 219;
-  --color-teal-600-rgb: 21, 183, 183;
-  --color-teal-700-rgb: 17, 146, 146;
-  --color-teal-800-rgb: 13, 110, 110;
-  --color-yellow-100-rgb: 255, 224, 153;
-  --color-yellow-200-rgb: 255, 212, 112;
-  --color-yellow-300-rgb: 255, 200, 71;
-  --color-yellow-400-rgb: 255, 188, 31;
-  --color-yellow-500-rgb: 245, 171, 0;
-  --color-yellow-600-rgb: 204, 143, 0;
-  --color-yellow-700-rgb: 163, 114, 0;
-  --color-yellow-800-rgb: 122, 86, 0;
-  --font-family-heading: 'Metropolis', sans-serif;
-  --font-family-body: 'Open Sans', sans-serif;
-  --font-family-base: var(--font-family-body);
-  --font-family-mono: 'Menlo', monospace;
-  --font-size-25: 10px;
-  --font-size-50: 11px;
-  --font-size-75: 12px;
-  --font-size-100: 14px;
-  --font-size-200: 16px;
-  --font-size-300: 18px;
-  --font-size-400: 20px;
-  --font-size-500: 22px;
-  --font-size-600: 25px;
-  --font-size-700: 28px;
-  --font-size-800: 32px;
-  --font-size-900: 36px;
-  --font-size-1000: 40px;
-  --font-weight-light: 300;
-  --font-weight-regular: 400;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-  --line-height-25: 16px;
-  --line-height-50: 16px;
-  --line-height-75: 16px;
-  --line-height-100: 20px;
-  --line-height-200: 24px;
-  --line-height-300: 24px;
-  --line-height-400: 28px;
-  --line-height-500: 28px;
-  --line-height-600: 30px;
-  --line-height-700: 36px;
-  --line-height-800: 40px;
-  --line-height-900: 44px;
-  --line-height-1000: 48px;
-  --letter-spacing-tight-2: -2px;
-  --letter-spacing-tight-1: -1px;
-  --letter-spacing-normal: 0;
-  --letter-spacing-wide-1: 1px;
-  --letter-spacing-wide-2: 2px;
-  --spacing-xxxxs: 2px;
-  --spacing-xxxs: 4px;
-  --spacing-xxs: 6px;
-  --spacing-xs: 8px;
-  --spacing-s: 10px;
-  --spacing-m: 12px;
-  --spacing-l: 16px;
-  --spacing-xl: 20px;
-  --spacing-xxl: 24px;
-  --spacing-xxxl: 32px;
-  --spacing-xxxxl: 40px;
-  --spacing-xxxxxl: 48px;
-  --radius-xs: 2px;
-  --radius-s: 4px;
-  --radius-m: 8px;
-  --radius-l: 12px;
-  --radius-xl: 16px;
-  --radius-full: 9999px;
-  --elevation-1: 0 2px 3px 0 #00000014;
-  --elevation-2: 0 4px 6px 0 #0000001f;
-  --elevation-3: 0 6px 14px 0 #0000001f;
-  --elevation-4: 0 8px 24px 0 #0000001f;
-  --elevation-5: 0 12px 32px 0 #0000001f;
-  --elevation-6: 0 20px 32px 0 #0000001f;
-  --duration-quick: 150ms;
-  --duration-moderate: 300ms;
-  --ease-transition: ease-in-out;
-  --ease-entrance: ease-out;
-  --ease-exit: ease-in;
-  --icon-size-10: 10px;
-  --icon-size-12: 12px;
-  --icon-size-16: 16px;
-  --icon-size-20: 20px;
-  --icon-size-24: 24px;
-  --icon-size-28: 28px;
-  --icon-size-32: 32px;
-  --icon-size-40: 40px;
-  --icon-size-52: 52px;
-  --icon-size-64: 64px;
-  --icon-size-104: 104px;
-  --color-info-rgb: var(--semantic-color-info);
-  --color-info: rgb(var(--color-info-rgb));
-  --color-success-rgb: var(--semantic-color-success);
-  --color-success: rgb(var(--color-success-rgb));
-  --color-warning-rgb: var(--semantic-color-warning);
-  --color-warning: rgb(var(--color-warning-rgb));
-  --color-danger-rgb: var(--semantic-color-danger);
-  --color-danger: rgb(var(--color-danger-rgb));
-  --attachment-blue: var(--color-blue-300);
-  --attachment-green: var(--color-green-600);
-  --attachment-red: var(--color-red-500);
-  --attachment-orange: var(--color-orange-500);
-  --z-sidebar: 100;
-  --z-modal: 200;
-  --z-tooltip: 300;
+@layer compass-ui.base, compass-ui.vendor, compass-ui.webapp-compat, compass-ui.tokens, compass-ui.themes;
+@layer compass-ui.tokens {
+  :root {
+    --color-neutral-0: #ffffff;
+    --color-neutral-50: #f4f4f6;
+    --color-neutral-100: #e8e9ed;
+    --color-neutral-150: #dddfe4;
+    --color-neutral-200: #d1d4db;
+    --color-neutral-250: #c6c9d2;
+    --color-neutral-300: #babec9;
+    --color-neutral-350: #afb3c0;
+    --color-neutral-400: #a4a9b7;
+    --color-neutral-450: #989dae;
+    --color-neutral-500: #8d93a5;
+    --color-neutral-550: #82889c;
+    --color-neutral-600: #767d93;
+    --color-neutral-650: #6c7389;
+    --color-neutral-700: #63697e;
+    --color-neutral-750: #5a6072;
+    --color-neutral-800: #505667;
+    --color-neutral-850: #484d5b;
+    --color-neutral-900: #3f4350;
+    --color-neutral-950: #363a45;
+    --color-neutral-1000: #2d3039;
+    --color-neutral-1050: #24262e;
+    --color-neutral-1100: #1b1d22;
+    --color-neutral-1150: #121317;
+    --color-neutral-1200: #090a0b;
+    --color-blue-100: #a5bef3;
+    --color-blue-200: #81a3ef;
+    --color-blue-300: #5d89ea;
+    --color-blue-400: #386fe5;
+    --color-blue-500: #1c58d9;
+    --color-blue-600: #174ab5;
+    --color-blue-700: #133a91;
+    --color-blue-800: #0e2b6c;
+    --color-cyan-100: #a2d6f6;
+    --color-cyan-200: #7cc5f3;
+    --color-cyan-300: #57b5f0;
+    --color-cyan-400: #32a4ec;
+    --color-cyan-500: #1592e0;
+    --color-cyan-600: #1279ba;
+    --color-cyan-700: #0e6295;
+    --color-cyan-800: #0b4970;
+    --color-green-100: #b3e5d1;
+    --color-green-200: #94dbbf;
+    --color-green-300: #75d1ac;
+    --color-green-400: #57c79a;
+    --color-green-500: #3db887;
+    --color-green-600: #339970;
+    --color-green-700: #297a5a;
+    --color-green-800: #1f5c43;
+    --color-indigo-100: #7492d2;
+    --color-indigo-200: #3c64b9;
+    --color-indigo-300: #32539a;
+    --color-indigo-400: #28427b;
+    --color-indigo-500: #1e325c;
+    --color-indigo-600: #14213e;
+    --color-indigo-700: #0f1a2e;
+    --color-indigo-800: #0a111f;
+    --color-orange-100: #f6c9a2;
+    --color-orange-200: #f2b47e;
+    --color-orange-300: #ef9e57;
+    --color-orange-400: #ec8832;
+    --color-orange-500: #e07315;
+    --color-orange-600: #ba6012;
+    --color-orange-700: #954d0e;
+    --color-orange-800: #703a0b;
+    --color-purple-100: #b7bae1;
+    --color-purple-200: #9a9ed5;
+    --color-purple-300: #7e83c9;
+    --color-purple-400: #6167bd;
+    --color-purple-500: #484fad;
+    --color-purple-600: #3c4290;
+    --color-purple-700: #303573;
+    --color-purple-800: #242856;
+    --color-red-100: #ebadae;
+    --color-red-200: #e28d8e;
+    --color-red-300: #da6c6e;
+    --color-red-400: #d24b4e;
+    --color-red-500: #c43133;
+    --color-red-600: #a3292b;
+    --color-red-700: #832122;
+    --color-red-800: #621819;
+    --color-teal-100: #a4f4f4;
+    --color-teal-200: #7ff0f0;
+    --color-teal-300: #5becec;
+    --color-teal-400: #36e7e7;
+    --color-teal-500: #1adbdb;
+    --color-teal-600: #15b7b7;
+    --color-teal-700: #119292;
+    --color-teal-800: #0d6e6e;
+    --color-yellow-100: #ffe099;
+    --color-yellow-200: #ffd470;
+    --color-yellow-300: #ffc847;
+    --color-yellow-400: #ffbc1f;
+    --color-yellow-500: #f5ab00;
+    --color-yellow-600: #cc8f00;
+    --color-yellow-700: #a37200;
+    --color-yellow-800: #7a5600;
+    --color-neutral-0-rgb: 255, 255, 255;
+    --color-neutral-50-rgb: 244, 244, 246;
+    --color-neutral-100-rgb: 232, 233, 237;
+    --color-neutral-150-rgb: 221, 223, 228;
+    --color-neutral-200-rgb: 209, 212, 219;
+    --color-neutral-250-rgb: 198, 201, 210;
+    --color-neutral-300-rgb: 186, 190, 201;
+    --color-neutral-350-rgb: 175, 179, 192;
+    --color-neutral-400-rgb: 164, 169, 183;
+    --color-neutral-450-rgb: 152, 157, 174;
+    --color-neutral-500-rgb: 141, 147, 165;
+    --color-neutral-550-rgb: 130, 136, 156;
+    --color-neutral-600-rgb: 118, 125, 147;
+    --color-neutral-650-rgb: 108, 115, 137;
+    --color-neutral-700-rgb: 99, 105, 126;
+    --color-neutral-750-rgb: 90, 96, 114;
+    --color-neutral-800-rgb: 80, 86, 103;
+    --color-neutral-850-rgb: 72, 77, 91;
+    --color-neutral-900-rgb: 63, 67, 80;
+    --color-neutral-950-rgb: 54, 58, 69;
+    --color-neutral-1000-rgb: 45, 48, 57;
+    --color-neutral-1050-rgb: 36, 38, 46;
+    --color-neutral-1100-rgb: 27, 29, 34;
+    --color-neutral-1150-rgb: 18, 19, 23;
+    --color-neutral-1200-rgb: 9, 10, 11;
+    --color-blue-100-rgb: 165, 190, 243;
+    --color-blue-200-rgb: 129, 163, 239;
+    --color-blue-300-rgb: 93, 137, 234;
+    --color-blue-400-rgb: 56, 111, 229;
+    --color-blue-500-rgb: 28, 88, 217;
+    --color-blue-600-rgb: 23, 74, 181;
+    --color-blue-700-rgb: 19, 58, 145;
+    --color-blue-800-rgb: 14, 43, 108;
+    --color-cyan-100-rgb: 162, 214, 246;
+    --color-cyan-200-rgb: 124, 197, 243;
+    --color-cyan-300-rgb: 87, 181, 240;
+    --color-cyan-400-rgb: 50, 164, 236;
+    --color-cyan-500-rgb: 21, 146, 224;
+    --color-cyan-600-rgb: 18, 121, 186;
+    --color-cyan-700-rgb: 14, 98, 149;
+    --color-cyan-800-rgb: 11, 73, 112;
+    --color-green-100-rgb: 179, 229, 209;
+    --color-green-200-rgb: 148, 219, 191;
+    --color-green-300-rgb: 117, 209, 172;
+    --color-green-400-rgb: 87, 199, 154;
+    --color-green-500-rgb: 61, 184, 135;
+    --color-green-600-rgb: 51, 153, 112;
+    --color-green-700-rgb: 41, 122, 90;
+    --color-green-800-rgb: 31, 92, 67;
+    --color-indigo-100-rgb: 116, 146, 210;
+    --color-indigo-200-rgb: 60, 100, 185;
+    --color-indigo-300-rgb: 50, 83, 154;
+    --color-indigo-400-rgb: 40, 66, 123;
+    --color-indigo-500-rgb: 30, 50, 92;
+    --color-indigo-600-rgb: 20, 33, 62;
+    --color-indigo-700-rgb: 15, 26, 46;
+    --color-indigo-800-rgb: 10, 17, 31;
+    --color-orange-100-rgb: 246, 201, 162;
+    --color-orange-200-rgb: 242, 180, 126;
+    --color-orange-300-rgb: 239, 158, 87;
+    --color-orange-400-rgb: 236, 136, 50;
+    --color-orange-500-rgb: 224, 115, 21;
+    --color-orange-600-rgb: 186, 96, 18;
+    --color-orange-700-rgb: 149, 77, 14;
+    --color-orange-800-rgb: 112, 58, 11;
+    --color-purple-100-rgb: 183, 186, 225;
+    --color-purple-200-rgb: 154, 158, 213;
+    --color-purple-300-rgb: 126, 131, 201;
+    --color-purple-400-rgb: 97, 103, 189;
+    --color-purple-500-rgb: 72, 79, 173;
+    --color-purple-600-rgb: 60, 66, 144;
+    --color-purple-700-rgb: 48, 53, 115;
+    --color-purple-800-rgb: 36, 40, 86;
+    --color-red-100-rgb: 235, 173, 174;
+    --color-red-200-rgb: 226, 141, 142;
+    --color-red-300-rgb: 218, 108, 110;
+    --color-red-400-rgb: 210, 75, 78;
+    --color-red-500-rgb: 196, 49, 51;
+    --color-red-600-rgb: 163, 41, 43;
+    --color-red-700-rgb: 131, 33, 34;
+    --color-red-800-rgb: 98, 24, 25;
+    --color-teal-100-rgb: 164, 244, 244;
+    --color-teal-200-rgb: 127, 240, 240;
+    --color-teal-300-rgb: 91, 236, 236;
+    --color-teal-400-rgb: 54, 231, 231;
+    --color-teal-500-rgb: 26, 219, 219;
+    --color-teal-600-rgb: 21, 183, 183;
+    --color-teal-700-rgb: 17, 146, 146;
+    --color-teal-800-rgb: 13, 110, 110;
+    --color-yellow-100-rgb: 255, 224, 153;
+    --color-yellow-200-rgb: 255, 212, 112;
+    --color-yellow-300-rgb: 255, 200, 71;
+    --color-yellow-400-rgb: 255, 188, 31;
+    --color-yellow-500-rgb: 245, 171, 0;
+    --color-yellow-600-rgb: 204, 143, 0;
+    --color-yellow-700-rgb: 163, 114, 0;
+    --color-yellow-800-rgb: 122, 86, 0;
+    --font-family-heading: 'Metropolis', sans-serif;
+    --font-family-body: 'Open Sans', sans-serif;
+    --font-family-base: var(--font-family-body);
+    --font-family-mono: 'Menlo', monospace;
+    --font-size-25: 10px;
+    --font-size-50: 11px;
+    --font-size-75: 12px;
+    --font-size-100: 14px;
+    --font-size-200: 16px;
+    --font-size-300: 18px;
+    --font-size-400: 20px;
+    --font-size-500: 22px;
+    --font-size-600: 25px;
+    --font-size-700: 28px;
+    --font-size-800: 32px;
+    --font-size-900: 36px;
+    --font-size-1000: 40px;
+    --font-weight-light: 300;
+    --font-weight-regular: 400;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --line-height-25: 16px;
+    --line-height-50: 16px;
+    --line-height-75: 16px;
+    --line-height-100: 20px;
+    --line-height-200: 24px;
+    --line-height-300: 24px;
+    --line-height-400: 28px;
+    --line-height-500: 28px;
+    --line-height-600: 30px;
+    --line-height-700: 36px;
+    --line-height-800: 40px;
+    --line-height-900: 44px;
+    --line-height-1000: 48px;
+    --letter-spacing-tight-2: -2px;
+    --letter-spacing-tight-1: -1px;
+    --letter-spacing-normal: 0;
+    --letter-spacing-wide-1: 1px;
+    --letter-spacing-wide-2: 2px;
+    --spacing-xxxxs: 2px;
+    --spacing-xxxs: 4px;
+    --spacing-xxs: 6px;
+    --spacing-xs: 8px;
+    --spacing-s: 10px;
+    --spacing-m: 12px;
+    --spacing-l: 16px;
+    --spacing-xl: 20px;
+    --spacing-xxl: 24px;
+    --spacing-xxxl: 32px;
+    --spacing-xxxxl: 40px;
+    --spacing-xxxxxl: 48px;
+    --radius-xs: 2px;
+    --radius-s: 4px;
+    --radius-m: 8px;
+    --radius-l: 12px;
+    --radius-xl: 16px;
+    --radius-pill: 9999px;
+    --radius-full: 9999px;
+    --elevation-1: 0 2px 3px 0 #00000014;
+    --elevation-2: 0 4px 6px 0 #0000001f;
+    --elevation-3: 0 6px 14px 0 #0000001f;
+    --elevation-4: 0 8px 24px 0 #0000001f;
+    --elevation-5: 0 12px 32px 0 #0000001f;
+    --elevation-6: 0 20px 32px 0 #0000001f;
+    --modal-overlay-bg: rgba(var(--color-neutral-1200-rgb), 0.64);
+    --duration-quick: 150ms;
+    --duration-moderate: 300ms;
+    --ease-transition: ease-in-out;
+    --ease-entrance: ease-out;
+    --ease-exit: ease-in;
+    --icon-size-10: 10px;
+    --icon-size-12: 12px;
+    --icon-size-16: 16px;
+    --icon-size-20: 20px;
+    --icon-size-24: 24px;
+    --icon-size-28: 28px;
+    --icon-size-32: 32px;
+    --icon-size-40: 40px;
+    --icon-size-52: 52px;
+    --icon-size-64: 64px;
+    --icon-size-104: 104px;
+    --color-info-rgb: var(--semantic-color-info);
+    --color-info: rgb(var(--color-info-rgb));
+    --color-success-rgb: var(--semantic-color-success);
+    --color-success: rgb(var(--color-success-rgb));
+    --color-warning-rgb: var(--semantic-color-warning);
+    --color-warning: rgb(var(--color-warning-rgb));
+    --color-danger-rgb: var(--semantic-color-danger);
+    --color-danger: rgb(var(--color-danger-rgb));
+    --attachment-blue: var(--color-blue-300);
+    --attachment-green: var(--color-green-600);
+    --attachment-red: var(--color-red-500);
+    --attachment-orange: var(--color-orange-500);
+    --z-sidebar: 100;
+    --z-modal: 200;
+    --z-tooltip: 300;
+  }
 }
 @layer compass-ui.webapp-compat {
   :root {
     --neutral-0: var(--color-neutral-0, #ffffff);
@@ -298,5 +302,7 @@
     --semantic-color-success: var(--color-green-600-rgb);
     --semantic-color-warning: var(--color-yellow-600-rgb);
     --semantic-color-danger: var(--color-red-500-rgb);
+    --focus-ring-color: var(--button-bg);
+    --focus-ring-color-rgb: var(--button-bg-rgb);
   }
 }

package/dist/components/action-button/ActionButton.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),q=require("react"),s=require("../icon/Icon.cjs"),A=require("../../utils/slot.cjs"),t=require("./ActionButton.module.scss.cjs"),i=q.forwardRef(function(a,o){if(a.asChild){const{icon:m,label:v,destructive:j=!1,className:C,disabled:x,children:N,asChild:S,..._}=a,p=[t.default["action-button"],j?t.default["action-button--destructive"]:"",C??""].filter(Boolean).join(" "),B=e.jsxs(e.Fragment,{children:[e.jsx("span",{className:t.default["action-button__icon"],"aria-hidden":!0,children:e.jsx(s.IconSlotContext.Provider,{value:{size:"20"},children:m})}),e.jsx("span",{className:t.default["action-button__label"],children:v})]});return A.renderAsChild({child:N,props:{..._,className:p},ref:o,content:B,disabled:!!x,disabledClassName:t.default["action-button--disabled"],warnOnChildContent:!0})}const{icon:l,label:c,active:n,destructive:d=!1,className:r,disabled:u,type:b="button",asChild:P,...f}=a,h=[t.default["action-button"],n?t.default["action-button--active"]:"",d?t.default["action-button--destructive"]:"",r??""].filter(Boolean).join(" ");return e.jsxs("button",{ref:o,className:h,type:b,disabled:u,"aria-pressed":n===void 0?void 0:n,...f,children:[e.jsx("span",{className:t.default["action-button__icon"],"aria-hidden":!0,children:e.jsx(s.IconSlotContext.Provider,{value:{size:"20"},children:l})}),e.jsx("span",{className:t.default["action-button__label"],children:c})]})});i.displayName="ActionButton";exports.default=i;
2	+ //# sourceMappingURL=ActionButton.cjs.map