@dao-style/core 1.0.0-beta.8 → 1.0.0

package/dist/styles/color/alias.css

@@ -0,0 +1,168 @@
+:root {
+  --dao-text-page-title: var(--dao-navigation-060);
+  --dao-text-page-title-rgb: var(--dao-navigation-060-rgb);
+  --dao-text-primary: var(--dao-gray-010);
+  --dao-text-primary-rgb: var(--dao-gray-010-rgb);
+  --dao-text-secondary: var(--dao-gray-040);
+  --dao-text-secondary-rgb: var(--dao-gray-040-rgb);
+  --dao-text-tertiary: var(--dao-gray-070);
+  --dao-text-tertiary-rgb: var(--dao-gray-070-rgb);
+  --dao-text-disabled: var(--dao-gray-120);
+  --dao-text-disabled-rgb: var(--dao-gray-120-rgb);
+  --dao-text-black-primary: var(--dao-gray-140);
+  --dao-text-black-primary-rgb: var(--dao-gray-140-rgb);
+  --dao-text-black-secondary: var(--dao-gray-010);
+  --dao-text-black-secondary-rgb: var(--dao-gray-010-rgb);
+  --dao-text-black-tertiary: var(--dao-gray-050);
+  --dao-text-black-tertiary-rgb: var(--dao-gray-050-rgb);
+  --dao-text-black-disabled: var(--dao-gray-020);
+  --dao-text-black-disabled-rgb: var(--dao-gray-020-rgb);
+  --dao-icon: var(--dao-gray-blue-040);
+  --dao-icon-rgb: var(--dao-gray-blue-040-rgb);
+  --dao-icon-hover: var(--dao-gray-blue-030);
+  --dao-icon-hover-rgb: var(--dao-gray-blue-030-rgb);
+  --dao-icon-disabled: var(--dao-gray-120);
+  --dao-icon-disabled-rgb: var(--dao-gray-120-rgb);
+  --dao-icon-primary: var(--dao-primary-blue-040);
+  --dao-icon-primary-rgb: var(--dao-primary-blue-040-rgb);
+  --dao-icon-primary-hover: var(--dao-primary-blue-060);
+  --dao-icon-primary-hover-rgb: var(--dao-primary-blue-060-rgb);
+  --dao-icon-primary-active: var(--dao-primary-blue-030);
+  --dao-icon-primary-active-rgb: var(--dao-primary-blue-030-rgb);
+  --dao-icon-primary-disabled: var(--dao-primary-blue-070);
+  --dao-icon-primary-disabled-rgb: var(--dao-primary-blue-070-rgb);
+  --dao-icon-primary-focus: var(--dao-primary-blue-060);
+  --dao-icon-primary-focus-rgb: var(--dao-primary-blue-060-rgb);
+  --dao-bg: var(--dao-gray-blue-090);
+  --dao-bg-rgb: var(--dao-gray-blue-090-rgb);
+  --dao-bg-secondary: var(--dao-gray-blue-100);
+  --dao-bg-secondary-rgb: var(--dao-gray-blue-100-rgb);
+  --dao-bg-tertiary: var(--dao-gray-blue-110);
+  --dao-bg-tertiary-rgb: var(--dao-gray-blue-110-rgb);
+  --dao-bg-component: var(--dao-gray-blue-070);
+  --dao-bg-component-rgb: var(--dao-gray-blue-070-rgb);
+  --dao-bg-component-selected: var(--dao-acidblue-040);
+  --dao-bg-component-selected-rgb: var(--dao-acidblue-040-rgb);
+  --dao-line-divider: var(--dao-gray-blue-070);
+  --dao-line-divider-rgb: var(--dao-gray-blue-070-rgb);
+  --dao-status-success: var(--dao-green-030);
+  --dao-status-success-rgb: var(--dao-green-030-rgb);
+  --dao-status-warning: var(--dao-yellow-040);
+  --dao-status-warning-rgb: var(--dao-yellow-040-rgb);
+  --dao-status-error: var(--dao-red-050);
+  --dao-status-error-rgb: var(--dao-red-050-rgb);
+  --dao-status-info: var(--dao-acidblue-040);
+  --dao-status-info-rgb: var(--dao-acidblue-040-rgb);
+  --dao-running-status-health: #6BAB6D;
+  --dao-running-status-health-rgb: 107, 171, 109;
+  --dao-running-status-warning: var(--dao-yellow-040);
+  --dao-running-status-warning-rgb: var(--dao-yellow-040-rgb);
+  --dao-running-status-error: #D26052;
+  --dao-running-status-error-rgb: 210, 96, 82;
+  --dao-running-status-info: var(--dao-acidblue-050);
+  --dao-running-status-info-rgb: var(--dao-acidblue-050-rgb);
+  --dao-tag-health: #6BAB6D;
+  --dao-tag-health-rgb: 107, 171, 109;
+  --dao-tag-warning: var(--dao-yellow-040);
+  --dao-tag-warning-rgb: var(--dao-yellow-040-rgb);
+  --dao-tag-error: #D26052;
+  --dao-tag-error-rgb: 210, 96, 82;
+  --dao-tag-info: var(--dao-acidblue-050);
+  --dao-tag-info-rgb: var(--dao-acidblue-050-rgb);
+  --dao-tag-bg-health: #E6F7E7;
+  --dao-tag-bg-health-rgb: 230, 247, 231;
+  --dao-tag-bg-warning: var(--dao-yellow-070);
+  --dao-tag-bg-warning-rgb: var(--dao-yellow-070-rgb);
+  --dao-tag-bg-error: var(--dao-red-080);
+  --dao-tag-bg-error-rgb: var(--dao-red-080-rgb);
+  --dao-tag-bg-info: var(--dao-acidblue-090);
+  --dao-tag-bg-info-rgb: var(--dao-acidblue-090-rgb);
+  --dao-system-primary: var(--dao-primary-blue-040);
+  --dao-system-primary-rgb: var(--dao-primary-blue-040-rgb);
+  --dao-system-secondary: var(--dao-acidblue-040);
+  --dao-system-secondary-rgb: var(--dao-acidblue-040-rgb);
+}
+:host {
+  --dao-text-page-title: var(--dao-navigation-060);
+  --dao-text-page-title-rgb: var(--dao-navigation-060-rgb);
+  --dao-text-primary: var(--dao-gray-010);
+  --dao-text-primary-rgb: var(--dao-gray-010-rgb);
+  --dao-text-secondary: var(--dao-gray-040);
+  --dao-text-secondary-rgb: var(--dao-gray-040-rgb);
+  --dao-text-tertiary: var(--dao-gray-070);
+  --dao-text-tertiary-rgb: var(--dao-gray-070-rgb);
+  --dao-text-disabled: var(--dao-gray-120);
+  --dao-text-disabled-rgb: var(--dao-gray-120-rgb);
+  --dao-text-black-primary: var(--dao-gray-140);
+  --dao-text-black-primary-rgb: var(--dao-gray-140-rgb);
+  --dao-text-black-secondary: var(--dao-gray-010);
+  --dao-text-black-secondary-rgb: var(--dao-gray-010-rgb);
+  --dao-text-black-tertiary: var(--dao-gray-050);
+  --dao-text-black-tertiary-rgb: var(--dao-gray-050-rgb);
+  --dao-text-black-disabled: var(--dao-gray-020);
+  --dao-text-black-disabled-rgb: var(--dao-gray-020-rgb);
+  --dao-icon: var(--dao-gray-blue-040);
+  --dao-icon-rgb: var(--dao-gray-blue-040-rgb);
+  --dao-icon-hover: var(--dao-gray-blue-030);
+  --dao-icon-hover-rgb: var(--dao-gray-blue-030-rgb);
+  --dao-icon-disabled: var(--dao-gray-120);
+  --dao-icon-disabled-rgb: var(--dao-gray-120-rgb);
+  --dao-icon-primary: var(--dao-primary-blue-040);
+  --dao-icon-primary-rgb: var(--dao-primary-blue-040-rgb);
+  --dao-icon-primary-hover: var(--dao-primary-blue-060);
+  --dao-icon-primary-hover-rgb: var(--dao-primary-blue-060-rgb);
+  --dao-icon-primary-active: var(--dao-primary-blue-030);
+  --dao-icon-primary-active-rgb: var(--dao-primary-blue-030-rgb);
+  --dao-icon-primary-disabled: var(--dao-primary-blue-070);
+  --dao-icon-primary-disabled-rgb: var(--dao-primary-blue-070-rgb);
+  --dao-icon-primary-focus: var(--dao-primary-blue-060);
+  --dao-icon-primary-focus-rgb: var(--dao-primary-blue-060-rgb);
+  --dao-bg: var(--dao-gray-blue-090);
+  --dao-bg-rgb: var(--dao-gray-blue-090-rgb);
+  --dao-bg-secondary: var(--dao-gray-blue-100);
+  --dao-bg-secondary-rgb: var(--dao-gray-blue-100-rgb);
+  --dao-bg-tertiary: var(--dao-gray-blue-110);
+  --dao-bg-tertiary-rgb: var(--dao-gray-blue-110-rgb);
+  --dao-bg-component: var(--dao-gray-blue-070);
+  --dao-bg-component-rgb: var(--dao-gray-blue-070-rgb);
+  --dao-bg-component-selected: var(--dao-acidblue-040);
+  --dao-bg-component-selected-rgb: var(--dao-acidblue-040-rgb);
+  --dao-line-divider: var(--dao-gray-blue-070);
+  --dao-line-divider-rgb: var(--dao-gray-blue-070-rgb);
+  --dao-status-success: var(--dao-green-030);
+  --dao-status-success-rgb: var(--dao-green-030-rgb);
+  --dao-status-warning: var(--dao-yellow-040);
+  --dao-status-warning-rgb: var(--dao-yellow-040-rgb);
+  --dao-status-error: var(--dao-red-050);
+  --dao-status-error-rgb: var(--dao-red-050-rgb);
+  --dao-status-info: var(--dao-acidblue-040);
+  --dao-status-info-rgb: var(--dao-acidblue-040-rgb);
+  --dao-running-status-health: #6BAB6D;
+  --dao-running-status-health-rgb: 107, 171, 109;
+  --dao-running-status-warning: var(--dao-yellow-040);
+  --dao-running-status-warning-rgb: var(--dao-yellow-040-rgb);
+  --dao-running-status-error: #D26052;
+  --dao-running-status-error-rgb: 210, 96, 82;
+  --dao-running-status-info: var(--dao-acidblue-050);
+  --dao-running-status-info-rgb: var(--dao-acidblue-050-rgb);
+  --dao-tag-health: #6BAB6D;
+  --dao-tag-health-rgb: 107, 171, 109;
+  --dao-tag-warning: var(--dao-yellow-040);
+  --dao-tag-warning-rgb: var(--dao-yellow-040-rgb);
+  --dao-tag-error: #D26052;
+  --dao-tag-error-rgb: 210, 96, 82;
+  --dao-tag-info: var(--dao-acidblue-050);
+  --dao-tag-info-rgb: var(--dao-acidblue-050-rgb);
+  --dao-tag-bg-health: #E6F7E7;
+  --dao-tag-bg-health-rgb: 230, 247, 231;
+  --dao-tag-bg-warning: var(--dao-yellow-070);
+  --dao-tag-bg-warning-rgb: var(--dao-yellow-070-rgb);
+  --dao-tag-bg-error: var(--dao-red-080);
+  --dao-tag-bg-error-rgb: var(--dao-red-080-rgb);
+  --dao-tag-bg-info: var(--dao-acidblue-090);
+  --dao-tag-bg-info-rgb: var(--dao-acidblue-090-rgb);
+  --dao-system-primary: var(--dao-primary-blue-040);
+  --dao-system-primary-rgb: var(--dao-primary-blue-040-rgb);
+  --dao-system-secondary: var(--dao-acidblue-040);
+  --dao-system-secondary-rgb: var(--dao-acidblue-040-rgb);
+}

package/dist/styles/color/alias.scss

@@ -0,0 +1,45 @@
+/* DON'T MODIFY THIS FILE! */
+/* Auto generated css and scss from /builds/ndx/frontend-engineering/dao-style/src/styles/color/alias.json. */
+@import './var.scss';
+
+$dao-text-page-title: $dao-navigation-060;
+$dao-text-primary: $dao-gray-010;
+$dao-text-secondary: $dao-gray-040;
+$dao-text-tertiary: $dao-gray-070;
+$dao-text-disabled: $dao-gray-120;
+$dao-text-black-primary: $dao-gray-140;
+$dao-text-black-secondary: $dao-gray-010;
+$dao-text-black-tertiary: $dao-gray-050;
+$dao-text-black-disabled: $dao-gray-020;
+$dao-icon: $dao-gray-blue-040;
+$dao-icon-hover: $dao-gray-blue-030;
+$dao-icon-disabled: $dao-gray-120;
+$dao-icon-primary: $dao-primary-blue-040;
+$dao-icon-primary-hover: $dao-primary-blue-060;
+$dao-icon-primary-active: $dao-primary-blue-030;
+$dao-icon-primary-disabled: $dao-primary-blue-070;
+$dao-icon-primary-focus: $dao-primary-blue-060;
+$dao-bg: $dao-gray-blue-090;
+$dao-bg-secondary: $dao-gray-blue-100;
+$dao-bg-tertiary: $dao-gray-blue-110;
+$dao-bg-component: $dao-gray-blue-070;
+$dao-bg-component-selected: $dao-acidblue-040;
+$dao-line-divider: $dao-gray-blue-070;
+$dao-status-success: $dao-green-030;
+$dao-status-warning: $dao-yellow-040;
+$dao-status-error: $dao-red-050;
+$dao-status-info: $dao-acidblue-040;
+$dao-running-status-health: #6BAB6D;
+$dao-running-status-warning: $dao-yellow-040;
+$dao-running-status-error: #D26052;
+$dao-running-status-info: $dao-acidblue-050;
+$dao-tag-health: #6BAB6D;
+$dao-tag-warning: $dao-yellow-040;
+$dao-tag-error: #D26052;
+$dao-tag-info: $dao-acidblue-050;
+$dao-tag-bg-health: #E6F7E7;
+$dao-tag-bg-warning: $dao-yellow-070;
+$dao-tag-bg-error: $dao-red-080;
+$dao-tag-bg-info: $dao-acidblue-090;
+$dao-system-primary: $dao-primary-blue-040;
+$dao-system-secondary: $dao-acidblue-040;

package/dist/styles/color/var.css

@@ -0,0 +1,472 @@
+:root {
+  --dao-primary-blue-010: #0E2B58;
+  --dao-primary-blue-010-rgb: 14, 43, 88;
+  --dao-primary-blue-020: #154184;
+  --dao-primary-blue-020-rgb: 21, 65, 132;
+  --dao-primary-blue-030: #1B56B1;
+  --dao-primary-blue-030-rgb: 27, 86, 177;
+  --dao-primary-blue-040: #226BDB;
+  --dao-primary-blue-040-rgb: 34, 107, 219;
+  --dao-primary-blue-050: #3E85E2;
+  --dao-primary-blue-050-rgb: 62, 133, 226;
+  --dao-primary-blue-060: #4E89E4;
+  --dao-primary-blue-060-rgb: 78, 137, 228;
+  --dao-primary-blue-070: #7BA7EA;
+  --dao-primary-blue-070-rgb: 123, 167, 234;
+  --dao-primary-blue-080: #A7C4F1;
+  --dao-primary-blue-080-rgb: 167, 196, 241;
+  --dao-primary-blue-090: #E9F0FC;
+  --dao-primary-blue-090-rgb: 233, 240, 252;
+  --dao-orange-010: #823108;
+  --dao-orange-010-rgb: 130, 49, 8;
+  --dao-orange-020: #B2430B;
+  --dao-orange-020-rgb: 178, 67, 11;
+  --dao-orange-030: #E2550E;
+  --dao-orange-030-rgb: 226, 85, 14;
+  --dao-orange-040: #F27131;
+  --dao-orange-040-rgb: 242, 113, 49;
+  --dao-orange-050: #F59260;
+  --dao-orange-050-rgb: 245, 146, 96;
+  --dao-orange-060: #F8B391;
+  --dao-orange-060-rgb: 248, 179, 145;
+  --dao-orange-070: #FBD4C1;
+  --dao-orange-070-rgb: 251, 212, 193;
+  --dao-orange-080: #FEF5F1;
+  --dao-orange-080-rgb: 254, 245, 241;
+  --dao-yellow-010: #885D07;
+  --dao-yellow-010-rgb: 136, 93, 7;
+  --dao-yellow-020: #B87E0A;
+  --dao-yellow-020-rgb: 184, 126, 10;
+  --dao-yellow-030: #E99F0C;
+  --dao-yellow-030-rgb: 233, 159, 12;
+  --dao-yellow-040: #F4B434;
+  --dao-yellow-040-rgb: 244, 180, 52;
+  --dao-yellow-050: #F7C664;
+  --dao-yellow-050-rgb: 247, 198, 100;
+  --dao-yellow-060: #F9D894;
+  --dao-yellow-060-rgb: 249, 216, 148;
+  --dao-yellow-070: #FCEAC5;
+  --dao-yellow-070-rgb: 252, 234, 197;
+  --dao-yellow-080: #FEFBF5;
+  --dao-yellow-080-rgb: 254, 251, 245;
+  --dao-green-010: #1A753E;
+  --dao-green-010-rgb: 26, 117, 62;
+  --dao-green-020: #239F55;
+  --dao-green-020-rgb: 35, 159, 85;
+  --dao-green-030: #2CC76A;
+  --dao-green-030-rgb: 44, 199, 106;
+  --dao-green-040: #4FD886;
+  --dao-green-040-rgb: 79, 216, 134;
+  --dao-green-050: #79E2A3;
+  --dao-green-050-rgb: 121, 226, 163;
+  --dao-green-060: #A3EBC0;
+  --dao-green-060-rgb: 163, 235, 192;
+  --dao-green-070: #CDF4DC;
+  --dao-green-070-rgb: 205, 244, 220;
+  --dao-green-080: #F7FDF9;
+  --dao-green-080-rgb: 247, 253, 249;
+  --dao-cyan-010: #146E80;
+  --dao-cyan-010-rgb: 20, 110, 128;
+  --dao-cyan-020: #1B94AC;
+  --dao-cyan-020-rgb: 27, 148, 172;
+  --dao-cyan-030: #21BAD9;
+  --dao-cyan-030-rgb: 33, 186, 217;
+  --dao-cyan-040: #4ACAE3;
+  --dao-cyan-040-rgb: 74, 202, 227;
+  --dao-cyan-050: #76D7EA;
+  --dao-cyan-050-rgb: 118, 215, 234;
+  --dao-cyan-060: #A2E4F1;
+  --dao-cyan-060-rgb: 162, 228, 241;
+  --dao-cyan-070: #CEF1F8;
+  --dao-cyan-070-rgb: 206, 241, 248;
+  --dao-cyan-080: #F2FBFD;
+  --dao-cyan-080-rgb: 242, 251, 253;
+  --dao-purple-010: #1E1977;
+  --dao-purple-010-rgb: 30, 25, 119;
+  --dao-purple-020: #2922A0;
+  --dao-purple-020-rgb: 41, 34, 160;
+  --dao-purple-030: #3529CC;
+  --dao-purple-030-rgb: 53, 41, 204;
+  --dao-purple-040: #584FDC;
+  --dao-purple-040-rgb: 88, 79, 220;
+  --dao-purple-050: #7F78E3;
+  --dao-purple-050-rgb: 127, 120, 227;
+  --dao-purple-060: #A7A2EC;
+  --dao-purple-060-rgb: 167, 162, 236;
+  --dao-purple-070: #CECCF5;
+  --dao-purple-070-rgb: 206, 204, 245;
+  --dao-purple-080: #F7F7FD;
+  --dao-purple-080-rgb: 247, 247, 253;
+  --dao-red-010: #5F0C0C;
+  --dao-red-010-rgb: 95, 12, 12;
+  --dao-red-020: #8C1212;
+  --dao-red-020-rgb: 140, 18, 18;
+  --dao-red-030: #B91818;
+  --dao-red-030-rgb: 185, 24, 24;
+  --dao-red-040: #E22222;
+  --dao-red-040-rgb: 226, 34, 34;
+  --dao-red-050: #E84F4F;
+  --dao-red-050-rgb: 232, 79, 79;
+  --dao-red-060: #EE7C7C;
+  --dao-red-060-rgb: 238, 124, 124;
+  --dao-red-070: #F4A9A9;
+  --dao-red-070-rgb: 244, 169, 169;
+  --dao-red-080: #FDEDED;
+  --dao-red-080-rgb: 253, 237, 237;
+  --dao-acidblue-100: #F4F9FC;
+  --dao-acidblue-100-rgb: 244, 249, 252;
+  --dao-acidblue-010: #0A4061;
+  --dao-acidblue-010-rgb: 10, 64, 97;
+  --dao-acidblue-020: #0F5F8F;
+  --dao-acidblue-020-rgb: 15, 95, 143;
+  --dao-acidblue-030: #137EBE;
+  --dao-acidblue-030-rgb: 19, 126, 190;
+  --dao-acidblue-040: #1E9CE8;
+  --dao-acidblue-040-rgb: 30, 156, 232;
+  --dao-acidblue-050: #43A1E5;
+  --dao-acidblue-050-rgb: 67, 161, 229;
+  --dao-acidblue-060: #4BB0ED;
+  --dao-acidblue-060-rgb: 75, 176, 237;
+  --dao-acidblue-070: #79C4F1;
+  --dao-acidblue-070-rgb: 121, 196, 241;
+  --dao-acidblue-080: #A7D8F6;
+  --dao-acidblue-080-rgb: 167, 216, 246;
+  --dao-acidblue-090: #ECF7FD;
+  --dao-acidblue-090-rgb: 236, 247, 253;
+  --dao-gray-blue-100: #F7F8FA;
+  --dao-gray-blue-100-rgb: 247, 248, 250;
+  --dao-gray-blue-110: #F8FAFC;
+  --dao-gray-blue-110-rgb: 248, 250, 252;
+  --dao-gray-blue-010: #101114;
+  --dao-gray-blue-010-rgb: 16, 17, 20;
+  --dao-gray-blue-020: #3D444F;
+  --dao-gray-blue-020-rgb: 61, 68, 79;
+  --dao-gray-blue-030: #80868E;
+  --dao-gray-blue-030-rgb: 128, 134, 142;
+  --dao-gray-blue-040: #AAB0B8;
+  --dao-gray-blue-040-rgb: 170, 176, 184;
+  --dao-gray-blue-050: #CBCFD8;
+  --dao-gray-blue-050-rgb: 203, 207, 216;
+  --dao-gray-blue-060: #D6DBE6;
+  --dao-gray-blue-060-rgb: 214, 219, 230;
+  --dao-gray-blue-070: #E4E7ED;
+  --dao-gray-blue-070-rgb: 228, 231, 237;
+  --dao-gray-blue-075: #EAEDF3;
+  --dao-gray-blue-075-rgb: 234, 237, 243;
+  --dao-gray-blue-080: #EEF1F5;
+  --dao-gray-blue-080-rgb: 238, 241, 245;
+  --dao-gray-blue-090: #F1F3F6;
+  --dao-gray-blue-090-rgb: 241, 243, 246;
+  --dao-gray-100: #BBBBBB;
+  --dao-gray-100-rgb: 187, 187, 187;
+  --dao-gray-110: #C7C7C7;
+  --dao-gray-110-rgb: 199, 199, 199;
+  --dao-gray-120: #CCCCCC;
+  --dao-gray-120-rgb: 204, 204, 204;
+  --dao-gray-130: #D2D2D2;
+  --dao-gray-130-rgb: 210, 210, 210;
+  --dao-gray-140: #DDDDDD;
+  --dao-gray-140-rgb: 221, 221, 221;
+  --dao-gray-150: #E2E2E2;
+  --dao-gray-150-rgb: 226, 226, 226;
+  --dao-gray-160: #EAEAEA;
+  --dao-gray-160-rgb: 234, 234, 234;
+  --dao-gray-170: #EEEEEE;
+  --dao-gray-170-rgb: 238, 238, 238;
+  --dao-gray-180: #F2F2F2;
+  --dao-gray-180-rgb: 242, 242, 242;
+  --dao-gray-190: #F9F9F9;
+  --dao-gray-190-rgb: 249, 249, 249;
+  --dao-gray-200: #FAFAFA;
+  --dao-gray-200-rgb: 250, 250, 250;
+  --dao-gray-010: #333333;
+  --dao-gray-010-rgb: 51, 51, 51;
+  --dao-gray-020: #4F4F4F;
+  --dao-gray-020-rgb: 79, 79, 79;
+  --dao-gray-030: #5c5c5c;
+  --dao-gray-030-rgb: 92, 92, 92;
+  --dao-gray-040: #666666;
+  --dao-gray-040-rgb: 102, 102, 102;
+  --dao-gray-050: #7F7F7F;
+  --dao-gray-050-rgb: 127, 127, 127;
+  --dao-gray-060: #888888;
+  --dao-gray-060-rgb: 136, 136, 136;
+  --dao-gray-070: #999999;
+  --dao-gray-070-rgb: 153, 153, 153;
+  --dao-gray-080: #A5A5A5;
+  --dao-gray-080-rgb: 165, 165, 165;
+  --dao-gray-090: #AFAFAF;
+  --dao-gray-090-rgb: 175, 175, 175;
+  --dao-navigation-100: #F6F8FB;
+  --dao-navigation-100-rgb: 246, 248, 251;
+  --dao-navigation-010: #2C3037;
+  --dao-navigation-010-rgb: 44, 48, 55;
+  --dao-navigation-020: #3B3F4A;
+  --dao-navigation-020-rgb: 59, 63, 74;
+  --dao-navigation-030: #676B75;
+  --dao-navigation-030-rgb: 103, 107, 117;
+  --dao-navigation-040: #878C98;
+  --dao-navigation-040-rgb: 135, 140, 152;
+  --dao-navigation-050: #C5CAD8;
+  --dao-navigation-050-rgb: 197, 202, 216;
+  --dao-navigation-060: #203548;
+  --dao-navigation-060-rgb: 32, 53, 72;
+  --dao-navigation-070: #2975D2;
+  --dao-navigation-070-rgb: 41, 117, 210;
+  --dao-navigation-080: #B6C2D2;
+  --dao-navigation-080-rgb: 182, 194, 210;
+  --dao-navigation-090: #EAEEF5;
+  --dao-navigation-090-rgb: 234, 238, 245;
+  --dao-pure-white: #FFFFFF;
+  --dao-pure-white-rgb: 255, 255, 255;
+  --dao-pure-black: #000000;
+  --dao-pure-black-rgb: 0, 0, 0;
+  --dao-line-gray-010: #C7D0DE;
+  --dao-line-gray-010-rgb: 199, 208, 222;
+  --dao-line-gray-020: #C8CCD0;
+  --dao-line-gray-020-rgb: 200, 204, 208;
+  --dao-line-gray-030: #DADBDE;
+  --dao-line-gray-030-rgb: 218, 219, 222;
+  --dao-line-gray-040: #EBEDF0;
+  --dao-line-gray-040-rgb: 235, 237, 240;
+  --dao-top-gray-010: #33363B;
+  --dao-top-gray-010-rgb: 51, 54, 59;
+  --dao-top-gray-020: #484E59;
+  --dao-top-gray-020-rgb: 72, 78, 89;
+}
+:host {
+  --dao-primary-blue-010: #0E2B58;
+  --dao-primary-blue-010-rgb: 14, 43, 88;
+  --dao-primary-blue-020: #154184;
+  --dao-primary-blue-020-rgb: 21, 65, 132;
+  --dao-primary-blue-030: #1B56B1;
+  --dao-primary-blue-030-rgb: 27, 86, 177;
+  --dao-primary-blue-040: #226BDB;
+  --dao-primary-blue-040-rgb: 34, 107, 219;
+  --dao-primary-blue-050: #3E85E2;
+  --dao-primary-blue-050-rgb: 62, 133, 226;
+  --dao-primary-blue-060: #4E89E4;
+  --dao-primary-blue-060-rgb: 78, 137, 228;
+  --dao-primary-blue-070: #7BA7EA;
+  --dao-primary-blue-070-rgb: 123, 167, 234;
+  --dao-primary-blue-080: #A7C4F1;
+  --dao-primary-blue-080-rgb: 167, 196, 241;
+  --dao-primary-blue-090: #E9F0FC;
+  --dao-primary-blue-090-rgb: 233, 240, 252;
+  --dao-orange-010: #823108;
+  --dao-orange-010-rgb: 130, 49, 8;
+  --dao-orange-020: #B2430B;
+  --dao-orange-020-rgb: 178, 67, 11;
+  --dao-orange-030: #E2550E;
+  --dao-orange-030-rgb: 226, 85, 14;
+  --dao-orange-040: #F27131;
+  --dao-orange-040-rgb: 242, 113, 49;
+  --dao-orange-050: #F59260;
+  --dao-orange-050-rgb: 245, 146, 96;
+  --dao-orange-060: #F8B391;
+  --dao-orange-060-rgb: 248, 179, 145;
+  --dao-orange-070: #FBD4C1;
+  --dao-orange-070-rgb: 251, 212, 193;
+  --dao-orange-080: #FEF5F1;
+  --dao-orange-080-rgb: 254, 245, 241;
+  --dao-yellow-010: #885D07;
+  --dao-yellow-010-rgb: 136, 93, 7;
+  --dao-yellow-020: #B87E0A;
+  --dao-yellow-020-rgb: 184, 126, 10;
+  --dao-yellow-030: #E99F0C;
+  --dao-yellow-030-rgb: 233, 159, 12;
+  --dao-yellow-040: #F4B434;
+  --dao-yellow-040-rgb: 244, 180, 52;
+  --dao-yellow-050: #F7C664;
+  --dao-yellow-050-rgb: 247, 198, 100;
+  --dao-yellow-060: #F9D894;
+  --dao-yellow-060-rgb: 249, 216, 148;
+  --dao-yellow-070: #FCEAC5;
+  --dao-yellow-070-rgb: 252, 234, 197;
+  --dao-yellow-080: #FEFBF5;
+  --dao-yellow-080-rgb: 254, 251, 245;
+  --dao-green-010: #1A753E;
+  --dao-green-010-rgb: 26, 117, 62;
+  --dao-green-020: #239F55;
+  --dao-green-020-rgb: 35, 159, 85;
+  --dao-green-030: #2CC76A;
+  --dao-green-030-rgb: 44, 199, 106;
+  --dao-green-040: #4FD886;
+  --dao-green-040-rgb: 79, 216, 134;
+  --dao-green-050: #79E2A3;
+  --dao-green-050-rgb: 121, 226, 163;
+  --dao-green-060: #A3EBC0;
+  --dao-green-060-rgb: 163, 235, 192;
+  --dao-green-070: #CDF4DC;
+  --dao-green-070-rgb: 205, 244, 220;
+  --dao-green-080: #F7FDF9;
+  --dao-green-080-rgb: 247, 253, 249;
+  --dao-cyan-010: #146E80;
+  --dao-cyan-010-rgb: 20, 110, 128;
+  --dao-cyan-020: #1B94AC;
+  --dao-cyan-020-rgb: 27, 148, 172;
+  --dao-cyan-030: #21BAD9;
+  --dao-cyan-030-rgb: 33, 186, 217;
+  --dao-cyan-040: #4ACAE3;
+  --dao-cyan-040-rgb: 74, 202, 227;
+  --dao-cyan-050: #76D7EA;
+  --dao-cyan-050-rgb: 118, 215, 234;
+  --dao-cyan-060: #A2E4F1;
+  --dao-cyan-060-rgb: 162, 228, 241;
+  --dao-cyan-070: #CEF1F8;
+  --dao-cyan-070-rgb: 206, 241, 248;
+  --dao-cyan-080: #F2FBFD;
+  --dao-cyan-080-rgb: 242, 251, 253;
+  --dao-purple-010: #1E1977;
+  --dao-purple-010-rgb: 30, 25, 119;
+  --dao-purple-020: #2922A0;
+  --dao-purple-020-rgb: 41, 34, 160;
+  --dao-purple-030: #3529CC;
+  --dao-purple-030-rgb: 53, 41, 204;
+  --dao-purple-040: #584FDC;
+  --dao-purple-040-rgb: 88, 79, 220;
+  --dao-purple-050: #7F78E3;
+  --dao-purple-050-rgb: 127, 120, 227;
+  --dao-purple-060: #A7A2EC;
+  --dao-purple-060-rgb: 167, 162, 236;
+  --dao-purple-070: #CECCF5;
+  --dao-purple-070-rgb: 206, 204, 245;
+  --dao-purple-080: #F7F7FD;
+  --dao-purple-080-rgb: 247, 247, 253;
+  --dao-red-010: #5F0C0C;
+  --dao-red-010-rgb: 95, 12, 12;
+  --dao-red-020: #8C1212;
+  --dao-red-020-rgb: 140, 18, 18;
+  --dao-red-030: #B91818;
+  --dao-red-030-rgb: 185, 24, 24;
+  --dao-red-040: #E22222;
+  --dao-red-040-rgb: 226, 34, 34;
+  --dao-red-050: #E84F4F;
+  --dao-red-050-rgb: 232, 79, 79;
+  --dao-red-060: #EE7C7C;
+  --dao-red-060-rgb: 238, 124, 124;
+  --dao-red-070: #F4A9A9;
+  --dao-red-070-rgb: 244, 169, 169;
+  --dao-red-080: #FDEDED;
+  --dao-red-080-rgb: 253, 237, 237;
+  --dao-acidblue-100: #F4F9FC;
+  --dao-acidblue-100-rgb: 244, 249, 252;
+  --dao-acidblue-010: #0A4061;
+  --dao-acidblue-010-rgb: 10, 64, 97;
+  --dao-acidblue-020: #0F5F8F;
+  --dao-acidblue-020-rgb: 15, 95, 143;
+  --dao-acidblue-030: #137EBE;
+  --dao-acidblue-030-rgb: 19, 126, 190;
+  --dao-acidblue-040: #1E9CE8;
+  --dao-acidblue-040-rgb: 30, 156, 232;
+  --dao-acidblue-050: #43A1E5;
+  --dao-acidblue-050-rgb: 67, 161, 229;
+  --dao-acidblue-060: #4BB0ED;
+  --dao-acidblue-060-rgb: 75, 176, 237;
+  --dao-acidblue-070: #79C4F1;
+  --dao-acidblue-070-rgb: 121, 196, 241;
+  --dao-acidblue-080: #A7D8F6;
+  --dao-acidblue-080-rgb: 167, 216, 246;
+  --dao-acidblue-090: #ECF7FD;
+  --dao-acidblue-090-rgb: 236, 247, 253;
+  --dao-gray-blue-100: #F7F8FA;
+  --dao-gray-blue-100-rgb: 247, 248, 250;
+  --dao-gray-blue-110: #F8FAFC;
+  --dao-gray-blue-110-rgb: 248, 250, 252;
+  --dao-gray-blue-010: #101114;
+  --dao-gray-blue-010-rgb: 16, 17, 20;
+  --dao-gray-blue-020: #3D444F;
+  --dao-gray-blue-020-rgb: 61, 68, 79;
+  --dao-gray-blue-030: #80868E;
+  --dao-gray-blue-030-rgb: 128, 134, 142;
+  --dao-gray-blue-040: #AAB0B8;
+  --dao-gray-blue-040-rgb: 170, 176, 184;
+  --dao-gray-blue-050: #CBCFD8;
+  --dao-gray-blue-050-rgb: 203, 207, 216;
+  --dao-gray-blue-060: #D6DBE6;
+  --dao-gray-blue-060-rgb: 214, 219, 230;
+  --dao-gray-blue-070: #E4E7ED;
+  --dao-gray-blue-070-rgb: 228, 231, 237;
+  --dao-gray-blue-075: #EAEDF3;
+  --dao-gray-blue-075-rgb: 234, 237, 243;
+  --dao-gray-blue-080: #EEF1F5;
+  --dao-gray-blue-080-rgb: 238, 241, 245;
+  --dao-gray-blue-090: #F1F3F6;
+  --dao-gray-blue-090-rgb: 241, 243, 246;
+  --dao-gray-100: #BBBBBB;
+  --dao-gray-100-rgb: 187, 187, 187;
+  --dao-gray-110: #C7C7C7;
+  --dao-gray-110-rgb: 199, 199, 199;
+  --dao-gray-120: #CCCCCC;
+  --dao-gray-120-rgb: 204, 204, 204;
+  --dao-gray-130: #D2D2D2;
+  --dao-gray-130-rgb: 210, 210, 210;
+  --dao-gray-140: #DDDDDD;
+  --dao-gray-140-rgb: 221, 221, 221;
+  --dao-gray-150: #E2E2E2;
+  --dao-gray-150-rgb: 226, 226, 226;
+  --dao-gray-160: #EAEAEA;
+  --dao-gray-160-rgb: 234, 234, 234;
+  --dao-gray-170: #EEEEEE;
+  --dao-gray-170-rgb: 238, 238, 238;
+  --dao-gray-180: #F2F2F2;
+  --dao-gray-180-rgb: 242, 242, 242;
+  --dao-gray-190: #F9F9F9;
+  --dao-gray-190-rgb: 249, 249, 249;
+  --dao-gray-200: #FAFAFA;
+  --dao-gray-200-rgb: 250, 250, 250;
+  --dao-gray-010: #333333;
+  --dao-gray-010-rgb: 51, 51, 51;
+  --dao-gray-020: #4F4F4F;
+  --dao-gray-020-rgb: 79, 79, 79;
+  --dao-gray-030: #5c5c5c;
+  --dao-gray-030-rgb: 92, 92, 92;
+  --dao-gray-040: #666666;
+  --dao-gray-040-rgb: 102, 102, 102;
+  --dao-gray-050: #7F7F7F;
+  --dao-gray-050-rgb: 127, 127, 127;
+  --dao-gray-060: #888888;
+  --dao-gray-060-rgb: 136, 136, 136;
+  --dao-gray-070: #999999;
+  --dao-gray-070-rgb: 153, 153, 153;
+  --dao-gray-080: #A5A5A5;
+  --dao-gray-080-rgb: 165, 165, 165;
+  --dao-gray-090: #AFAFAF;
+  --dao-gray-090-rgb: 175, 175, 175;
+  --dao-navigation-100: #F6F8FB;
+  --dao-navigation-100-rgb: 246, 248, 251;
+  --dao-navigation-010: #2C3037;
+  --dao-navigation-010-rgb: 44, 48, 55;
+  --dao-navigation-020: #3B3F4A;
+  --dao-navigation-020-rgb: 59, 63, 74;
+  --dao-navigation-030: #676B75;
+  --dao-navigation-030-rgb: 103, 107, 117;
+  --dao-navigation-040: #878C98;
+  --dao-navigation-040-rgb: 135, 140, 152;
+  --dao-navigation-050: #C5CAD8;
+  --dao-navigation-050-rgb: 197, 202, 216;
+  --dao-navigation-060: #203548;
+  --dao-navigation-060-rgb: 32, 53, 72;
+  --dao-navigation-070: #2975D2;
+  --dao-navigation-070-rgb: 41, 117, 210;
+  --dao-navigation-080: #B6C2D2;
+  --dao-navigation-080-rgb: 182, 194, 210;
+  --dao-navigation-090: #EAEEF5;
+  --dao-navigation-090-rgb: 234, 238, 245;
+  --dao-pure-white: #FFFFFF;
+  --dao-pure-white-rgb: 255, 255, 255;
+  --dao-pure-black: #000000;
+  --dao-pure-black-rgb: 0, 0, 0;
+  --dao-line-gray-010: #C7D0DE;
+  --dao-line-gray-010-rgb: 199, 208, 222;
+  --dao-line-gray-020: #C8CCD0;
+  --dao-line-gray-020-rgb: 200, 204, 208;
+  --dao-line-gray-030: #DADBDE;
+  --dao-line-gray-030-rgb: 218, 219, 222;
+  --dao-line-gray-040: #EBEDF0;
+  --dao-line-gray-040-rgb: 235, 237, 240;
+  --dao-top-gray-010: #33363B;
+  --dao-top-gray-010-rgb: 51, 54, 59;
+  --dao-top-gray-020: #484E59;
+  --dao-top-gray-020-rgb: 72, 78, 89;
+}