@ogds/elements 1.0.0-alpha.6

package/build/scss/_colors.scss

@@ -0,0 +1,487 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$usa-color-black-transparent-5: rgba(0,0,0,0.01);
+$usa-color-black-transparent-10: rgba(0,0,0,0.1);
+$usa-color-black-transparent-20: rgba(0,0,0,0.2);
+$usa-color-black-transparent-30: rgba(0,0,0,0.3);
+$usa-color-black-transparent-40: rgba(0,0,0,0.4);
+$usa-color-black-transparent-50: rgba(0,0,0,0.5);
+$usa-color-black-transparent-60: rgba(0,0,0,0.6);
+$usa-color-black-transparent-70: rgba(0,0,0,0.7);
+$usa-color-black-transparent-80: rgba(0,0,0,0.8);
+$usa-color-black-transparent-90: rgba(0,0,0,0.9);
+$usa-color-blue-cool-5: #e7f2f5;
+$usa-color-blue-cool-10: #dae9ee;
+$usa-color-blue-cool-20: #adcfdc;
+$usa-color-blue-cool-30: #82b4c9;
+$usa-color-blue-cool-40: #6499af;
+$usa-color-blue-cool-50: #3a7d95;
+$usa-color-blue-cool-60: #2e6276;
+$usa-color-blue-cool-70: #224a58;
+$usa-color-blue-cool-80: #14333d;
+$usa-color-blue-cool-90: #0f191c;
+$usa-color-blue-cool-vivid-5: #e1f3f8;
+$usa-color-blue-cool-vivid-10: #c3ebfa;
+$usa-color-blue-cool-vivid-20: #97d4ea;
+$usa-color-blue-cool-vivid-30: #59b9de;
+$usa-color-blue-cool-vivid-40: #28a0cb;
+$usa-color-blue-cool-vivid-50: #0d7ea2;
+$usa-color-blue-cool-vivid-60: #07648d;
+$usa-color-blue-cool-vivid-70: #074b69;
+$usa-color-blue-cool-vivid-80: #002d3f;
+$usa-color-blue-warm-5: #ecf1f7;
+$usa-color-blue-warm-10: #e1e7f1;
+$usa-color-blue-warm-20: #bbcae4;
+$usa-color-blue-warm-30: #98afd2;
+$usa-color-blue-warm-40: #7292c7;
+$usa-color-blue-warm-50: #4a77b4;
+$usa-color-blue-warm-60: #345d96;
+$usa-color-blue-warm-70: #2f4668;
+$usa-color-blue-warm-80: #252f3e;
+$usa-color-blue-warm-90: #13171f;
+$usa-color-blue-warm-vivid-5: #edf5ff;
+$usa-color-blue-warm-vivid-10: #d4e5ff;
+$usa-color-blue-warm-vivid-20: #adcdff;
+$usa-color-blue-warm-vivid-30: #81aefc;
+$usa-color-blue-warm-vivid-40: #5994f6;
+$usa-color-blue-warm-vivid-50: #2672de;
+$usa-color-blue-warm-vivid-60: #0050d8;
+$usa-color-blue-warm-vivid-70: #1a4480;
+$usa-color-blue-warm-vivid-80: #162e51;
+$usa-color-blue-5: #eff6fb;
+$usa-color-blue-10: #d9e8f6;
+$usa-color-blue-20: #aacdec;
+$usa-color-blue-30: #73b3e7;
+$usa-color-blue-40: #4f97d1;
+$usa-color-blue-50: #2378c3;
+$usa-color-blue-60: #2c608a;
+$usa-color-blue-70: #274863;
+$usa-color-blue-80: #1f303e;
+$usa-color-blue-90: #11181d;
+$usa-color-blue-vivid-5: #e8f5ff;
+$usa-color-blue-vivid-10: #cfe8ff;
+$usa-color-blue-vivid-20: #a1d3ff;
+$usa-color-blue-vivid-30: #58b4ff;
+$usa-color-blue-vivid-40: #2491ff;
+$usa-color-blue-vivid-50: #0076d6;
+$usa-color-blue-vivid-60: #005ea2;
+$usa-color-blue-vivid-70: #0b4778;
+$usa-color-blue-vivid-80: #112f4e;
+$usa-color-cyan-5: #e7f6f8;
+$usa-color-cyan-10: #ccecf2;
+$usa-color-cyan-20: #99deea;
+$usa-color-cyan-30: #5dc0d1;
+$usa-color-cyan-40: #449dac;
+$usa-color-cyan-50: #168092;
+$usa-color-cyan-60: #2a646d;
+$usa-color-cyan-70: #2c4a4e;
+$usa-color-cyan-80: #203133;
+$usa-color-cyan-90: #111819;
+$usa-color-cyan-vivid-5: #e5faff;
+$usa-color-cyan-vivid-10: #a8f2ff;
+$usa-color-cyan-vivid-20: #52daf2;
+$usa-color-cyan-vivid-30: #00bde3;
+$usa-color-cyan-vivid-40: #009ec1;
+$usa-color-cyan-vivid-50: #0081a1;
+$usa-color-cyan-vivid-60: #00687d;
+$usa-color-cyan-vivid-70: #0e4f5c;
+$usa-color-cyan-vivid-80: #093b44;
+$usa-color-transparent: rgba(0,0,0,0);
+$usa-color-black: #000;
+$usa-color-white: #fff;
+$usa-color-gold-5: #f5f0e6;
+$usa-color-gold-10: #f1e5cd;
+$usa-color-gold-20: #dec69a;
+$usa-color-gold-30: #c7a97b;
+$usa-color-gold-40: #ad8b65;
+$usa-color-gold-50: #8e704f;
+$usa-color-gold-60: #6b5947;
+$usa-color-gold-70: #4d4438;
+$usa-color-gold-80: #322d26;
+$usa-color-gold-90: #191714;
+$usa-color-gold-vivid-5: #fef0c8;
+$usa-color-gold-vivid-10: #ffe396;
+$usa-color-gold-vivid-20: #ffbe2e;
+$usa-color-gold-vivid-30: #e5a000;
+$usa-color-gold-vivid-40: #c2850c;
+$usa-color-gold-vivid-50: #936f38;
+$usa-color-gold-vivid-60: #7a591a;
+$usa-color-gold-vivid-70: #5c410a;
+$usa-color-gold-vivid-80: #3b2b15;
+$usa-color-gray-cool-1: #fbfcfd;
+$usa-color-gray-cool-2: #f7f9fa;
+$usa-color-gray-cool-3: #f5f6f7;
+$usa-color-gray-cool-4: #f1f3f6;
+$usa-color-gray-cool-5: #edeff0;
+$usa-color-gray-cool-10: #dfe1e2;
+$usa-color-gray-cool-20: #c6cace;
+$usa-color-gray-cool-30: #a9aeb1;
+$usa-color-gray-cool-40: #8d9297;
+$usa-color-gray-cool-50: #71767a;
+$usa-color-gray-cool-60: #565c65;
+$usa-color-gray-cool-70: #3d4551;
+$usa-color-gray-cool-80: #2d2e2f;
+$usa-color-gray-cool-90: #1c1d1f;
+$usa-color-gray-warm-1: #fcfcfb;
+$usa-color-gray-warm-2: #f9f9f7;
+$usa-color-gray-warm-3: #f6f6f2;
+$usa-color-gray-warm-4: #f5f5f0;
+$usa-color-gray-warm-5: #f0f0ec;
+$usa-color-gray-warm-10: #e6e6e2;
+$usa-color-gray-warm-20: #cac9c0;
+$usa-color-gray-warm-30: #afaea2;
+$usa-color-gray-warm-40: #929285;
+$usa-color-gray-warm-50: #76766a;
+$usa-color-gray-warm-60: #5d5d52;
+$usa-color-gray-warm-70: #454540;
+$usa-color-gray-warm-80: #2e2e2a;
+$usa-color-gray-warm-90: #171716;
+$usa-color-gray-1: #fcfcfc;
+$usa-color-gray-2: #f9f9f9;
+$usa-color-gray-3: #f6f6f6;
+$usa-color-gray-4: #f3f3f3;
+$usa-color-gray-5: #f0f0f0;
+$usa-color-gray-10: #e6e6e6;
+$usa-color-gray-20: #c9c9c9;
+$usa-color-gray-30: #adadad;
+$usa-color-gray-40: #919191;
+$usa-color-gray-50: #757575;
+$usa-color-gray-60: #5c5c5c;
+$usa-color-gray-70: #454545;
+$usa-color-gray-80: #2e2e2e;
+$usa-color-gray-90: #1b1b1b;
+$usa-color-gray-100: #000;
+$usa-color-green-cool-5: #ecf3ec;
+$usa-color-green-cool-10: #dbebde;
+$usa-color-green-cool-20: #b4d0b9;
+$usa-color-green-cool-30: #86b98e;
+$usa-color-green-cool-40: #5e9f69;
+$usa-color-green-cool-50: #4d8055;
+$usa-color-green-cool-60: #446443;
+$usa-color-green-cool-70: #37493b;
+$usa-color-green-cool-80: #28312a;
+$usa-color-green-cool-90: #1a1f1a;
+$usa-color-green-cool-vivid-5: #e3f5e1;
+$usa-color-green-cool-vivid-10: #b7f5bd;
+$usa-color-green-cool-vivid-20: #70e17b;
+$usa-color-green-cool-vivid-30: #21c834;
+$usa-color-green-cool-vivid-40: #00a91c;
+$usa-color-green-cool-vivid-50: #008817;
+$usa-color-green-cool-vivid-60: #216e1f;
+$usa-color-green-cool-vivid-70: #154c21;
+$usa-color-green-cool-vivid-80: #19311e;
+$usa-color-green-warm-5: #f1f4d7;
+$usa-color-green-warm-10: #e7eab7;
+$usa-color-green-warm-20: #cbd17a;
+$usa-color-green-warm-30: #a6b557;
+$usa-color-green-warm-40: #8a984b;
+$usa-color-green-warm-50: #6f7a41;
+$usa-color-green-warm-60: #5a5f38;
+$usa-color-green-warm-70: #45472f;
+$usa-color-green-warm-80: #2d2f21;
+$usa-color-green-warm-90: #171712;
+$usa-color-green-warm-vivid-5: #f5fbc1;
+$usa-color-green-warm-vivid-10: #e7f434;
+$usa-color-green-warm-vivid-20: #c5d30a;
+$usa-color-green-warm-vivid-30: #a3b72c;
+$usa-color-green-warm-vivid-40: #7e9c1d;
+$usa-color-green-warm-vivid-50: #6a7d00;
+$usa-color-green-warm-vivid-60: #5a6613;
+$usa-color-green-warm-vivid-70: #4b4e10;
+$usa-color-green-warm-vivid-80: #38380b;
+$usa-color-green-5: #eaf4dd;
+$usa-color-green-10: #dfeacd;
+$usa-color-green-20: #b8d293;
+$usa-color-green-30: #9bb672;
+$usa-color-green-40: #7d9b4e;
+$usa-color-green-50: #607f35;
+$usa-color-green-60: #4c6424;
+$usa-color-green-70: #3c4a29;
+$usa-color-green-80: #293021;
+$usa-color-green-90: #161814;
+$usa-color-green-vivid-5: #ddf9c7;
+$usa-color-green-vivid-10: #c5ee93;
+$usa-color-green-vivid-20: #98d035;
+$usa-color-green-vivid-30: #7fb135;
+$usa-color-green-vivid-40: #719f2a;
+$usa-color-green-vivid-50: #538200;
+$usa-color-green-vivid-60: #466c04;
+$usa-color-green-vivid-70: #2f4a0b;
+$usa-color-green-vivid-80: #243413;
+$usa-color-indigo-cool-5: #eef0f9;
+$usa-color-indigo-cool-10: #e1e6f9;
+$usa-color-indigo-cool-20: #bbc8f5;
+$usa-color-indigo-cool-30: #96abee;
+$usa-color-indigo-cool-40: #6b8ee8;
+$usa-color-indigo-cool-50: #496fd8;
+$usa-color-indigo-cool-60: #3f57a6;
+$usa-color-indigo-cool-70: #374274;
+$usa-color-indigo-cool-80: #292d42;
+$usa-color-indigo-cool-90: #151622;
+$usa-color-indigo-cool-vivid-5: #edf0ff;
+$usa-color-indigo-cool-vivid-10: #dee5ff;
+$usa-color-indigo-cool-vivid-20: #b8c8ff;
+$usa-color-indigo-cool-vivid-30: #94adff;
+$usa-color-indigo-cool-vivid-40: #628ef4;
+$usa-color-indigo-cool-vivid-50: #4866ff;
+$usa-color-indigo-cool-vivid-60: #3e4ded;
+$usa-color-indigo-cool-vivid-70: #222fbf;
+$usa-color-indigo-cool-vivid-80: #1b2b85;
+$usa-color-indigo-warm-5: #f1eff7;
+$usa-color-indigo-warm-10: #e7e3fa;
+$usa-color-indigo-warm-20: #cbc4f2;
+$usa-color-indigo-warm-30: #afa5e8;
+$usa-color-indigo-warm-40: #9287d8;
+$usa-color-indigo-warm-50: #7665d1;
+$usa-color-indigo-warm-60: #5e519e;
+$usa-color-indigo-warm-70: #453c7b;
+$usa-color-indigo-warm-80: #2e2c40;
+$usa-color-indigo-warm-90: #18161d;
+$usa-color-indigo-warm-vivid-5: #f5f2ff;
+$usa-color-indigo-warm-vivid-10: #e4deff;
+$usa-color-indigo-warm-vivid-20: #cfc4fd;
+$usa-color-indigo-warm-vivid-30: #b69fff;
+$usa-color-indigo-warm-vivid-40: #967efb;
+$usa-color-indigo-warm-vivid-50: #745fe9;
+$usa-color-indigo-warm-vivid-60: #5942d2;
+$usa-color-indigo-warm-vivid-70: #3d2c9d;
+$usa-color-indigo-warm-vivid-80: #261f5b;
+$usa-color-indigo-5: #efeff8;
+$usa-color-indigo-10: #e5e4fa;
+$usa-color-indigo-20: #c5c5f3;
+$usa-color-indigo-30: #a5a8eb;
+$usa-color-indigo-40: #8889db;
+$usa-color-indigo-50: #676cc8;
+$usa-color-indigo-60: #4d52af;
+$usa-color-indigo-70: #3d4076;
+$usa-color-indigo-80: #2b2c40;
+$usa-color-indigo-90: #16171f;
+$usa-color-indigo-vivid-5: #f0f0ff;
+$usa-color-indigo-vivid-10: #e0e0ff;
+$usa-color-indigo-vivid-20: #ccceff;
+$usa-color-indigo-vivid-30: #a3a7fa;
+$usa-color-indigo-vivid-40: #8289ff;
+$usa-color-indigo-vivid-50: #656bd7;
+$usa-color-indigo-vivid-60: #4a50c4;
+$usa-color-indigo-vivid-70: #3333a3;
+$usa-color-indigo-vivid-80: #212463;
+$usa-color-magenta-5: #f9f0f2;
+$usa-color-magenta-10: #f6e1e8;
+$usa-color-magenta-20: #f0bbcc;
+$usa-color-magenta-30: #e895b3;
+$usa-color-magenta-40: #e0699f;
+$usa-color-magenta-50: #c84281;
+$usa-color-magenta-60: #8b4566;
+$usa-color-magenta-70: #66364b;
+$usa-color-magenta-80: #402731;
+$usa-color-magenta-90: #1b1617;
+$usa-color-magenta-vivid-5: #fff2f5;
+$usa-color-magenta-vivid-10: #ffddea;
+$usa-color-magenta-vivid-20: #ffb4cf;
+$usa-color-magenta-vivid-30: #ff87b2;
+$usa-color-magenta-vivid-40: #fd4496;
+$usa-color-magenta-vivid-50: #d72d79;
+$usa-color-magenta-vivid-60: #ab2165;
+$usa-color-magenta-vivid-70: #731f44;
+$usa-color-magenta-vivid-80: #4f172e;
+$usa-color-mint-cool-5: #e0f7f6;
+$usa-color-mint-cool-10: #c4eeeb;
+$usa-color-mint-cool-20: #9bd4cf;
+$usa-color-mint-cool-30: #6fbab3;
+$usa-color-mint-cool-40: #4f9e99;
+$usa-color-mint-cool-50: #40807e;
+$usa-color-mint-cool-60: #376462;
+$usa-color-mint-cool-70: #2a4b45;
+$usa-color-mint-cool-80: #203131;
+$usa-color-mint-cool-90: #111818;
+$usa-color-mint-cool-vivid-5: #d5fbf3;
+$usa-color-mint-cool-vivid-10: #7efbe1;
+$usa-color-mint-cool-vivid-20: #29e1cb;
+$usa-color-mint-cool-vivid-30: #1dc2ae;
+$usa-color-mint-cool-vivid-40: #00a398;
+$usa-color-mint-cool-vivid-50: #008480;
+$usa-color-mint-cool-vivid-60: #0f6460;
+$usa-color-mint-cool-vivid-70: #0b4b3f;
+$usa-color-mint-cool-vivid-80: #123131;
+$usa-color-mint-5: #dbf6ed;
+$usa-color-mint-10: #c7efe2;
+$usa-color-mint-20: #92d9bb;
+$usa-color-mint-30: #5abf95;
+$usa-color-mint-40: #34a37e;
+$usa-color-mint-50: #2e8367;
+$usa-color-mint-60: #286846;
+$usa-color-mint-70: #204e34;
+$usa-color-mint-80: #193324;
+$usa-color-mint-90: #0d1a12;
+$usa-color-mint-vivid-5: #c9fbeb;
+$usa-color-mint-vivid-10: #83fcd4;
+$usa-color-mint-vivid-20: #0ceda6;
+$usa-color-mint-vivid-30: #04c585;
+$usa-color-mint-vivid-40: #00a871;
+$usa-color-mint-vivid-50: #008659;
+$usa-color-mint-vivid-60: #146947;
+$usa-color-mint-vivid-70: #0c4e29;
+$usa-color-mint-vivid-80: #0d351e;
+$usa-color-orange-warm-5: #faeee5;
+$usa-color-orange-warm-10: #fbe0d0;
+$usa-color-orange-warm-20: #f7bca2;
+$usa-color-orange-warm-30: #f3966d;
+$usa-color-orange-warm-40: #e17141;
+$usa-color-orange-warm-50: #bd5727;
+$usa-color-orange-warm-60: #914734;
+$usa-color-orange-warm-70: #633a32;
+$usa-color-orange-warm-80: #3d2925;
+$usa-color-orange-warm-90: #1c1615;
+$usa-color-orange-warm-vivid-5: #fff3ea;
+$usa-color-orange-warm-vivid-10: #ffe2d1;
+$usa-color-orange-warm-vivid-20: #fbbaa7;
+$usa-color-orange-warm-vivid-30: #fc906d;
+$usa-color-orange-warm-vivid-40: #ff580a;
+$usa-color-orange-warm-vivid-50: #cf4900;
+$usa-color-orange-warm-vivid-60: #a72f10;
+$usa-color-orange-warm-vivid-70: #782312;
+$usa-color-orange-warm-vivid-80: #3d231d;
+$usa-color-orange-5: #f6efe9;
+$usa-color-orange-10: #f2e4d4;
+$usa-color-orange-20: #f3bf90;
+$usa-color-orange-30: #f09860;
+$usa-color-orange-40: #dd7533;
+$usa-color-orange-50: #a86437;
+$usa-color-orange-60: #775540;
+$usa-color-orange-70: #524236;
+$usa-color-orange-80: #332d27;
+$usa-color-orange-90: #1b1614;
+$usa-color-orange-vivid-5: #fef2e4;
+$usa-color-orange-vivid-10: #fce2c5;
+$usa-color-orange-vivid-20: #ffbc78;
+$usa-color-orange-vivid-30: #fa9441;
+$usa-color-orange-vivid-40: #e66f0e;
+$usa-color-orange-vivid-50: #c05600;
+$usa-color-orange-vivid-60: #8c471c;
+$usa-color-orange-vivid-70: #5f3617;
+$usa-color-orange-vivid-80: #352313;
+$usa-color-red-cool-5: #f8eff1;
+$usa-color-red-cool-10: #f3e1e4;
+$usa-color-red-cool-20: #ecbec6;
+$usa-color-red-cool-30: #e09aa6;
+$usa-color-red-cool-40: #e16b80;
+$usa-color-red-cool-50: #cd425b;
+$usa-color-red-cool-60: #9e394b;
+$usa-color-red-cool-70: #68363f;
+$usa-color-red-cool-80: #40282c;
+$usa-color-red-cool-90: #1e1517;
+$usa-color-red-cool-vivid-5: #fff2f5;
+$usa-color-red-cool-vivid-10: #f8dfe2;
+$usa-color-red-cool-vivid-20: #f8b9c5;
+$usa-color-red-cool-vivid-30: #fd8ba0;
+$usa-color-red-cool-vivid-40: #f45d79;
+$usa-color-red-cool-vivid-50: #e41d3d;
+$usa-color-red-cool-vivid-60: #b21d38;
+$usa-color-red-cool-vivid-70: #822133;
+$usa-color-red-cool-vivid-80: #4f1c24;
+$usa-color-red-warm-5: #f6efea;
+$usa-color-red-warm-10: #f4e3db;
+$usa-color-red-warm-20: #ecc0a7;
+$usa-color-red-warm-30: #dca081;
+$usa-color-red-warm-40: #d27a56;
+$usa-color-red-warm-50: #c3512c;
+$usa-color-red-warm-60: #805039;
+$usa-color-red-warm-70: #524236;
+$usa-color-red-warm-80: #332d29;
+$usa-color-red-warm-90: #1f1c18;
+$usa-color-red-warm-vivid-5: #fff5ee;
+$usa-color-red-warm-vivid-10: #fce1d4;
+$usa-color-red-warm-vivid-20: #f6bd9c;
+$usa-color-red-warm-vivid-30: #f39268;
+$usa-color-red-warm-vivid-40: #ef5e25;
+$usa-color-red-warm-vivid-50: #d54309;
+$usa-color-red-warm-vivid-60: #9c3d10;
+$usa-color-red-warm-vivid-70: #63340f;
+$usa-color-red-warm-vivid-80: #3e2a1e;
+$usa-color-red-5: #f9eeee;
+$usa-color-red-10: #f8e1de;
+$usa-color-red-20: #f7bbb1;
+$usa-color-red-30: #f2938c;
+$usa-color-red-40: #e9695f;
+$usa-color-red-50: #d83933;
+$usa-color-red-60: #a23737;
+$usa-color-red-70: #6f3331;
+$usa-color-red-80: #3e2927;
+$usa-color-red-90: #1b1616;
+$usa-color-red-vivid-5: #fff3f2;
+$usa-color-red-vivid-10: #fde0db;
+$usa-color-red-vivid-20: #fdb8ae;
+$usa-color-red-vivid-30: #ff8d7b;
+$usa-color-red-vivid-40: #fb5a47;
+$usa-color-red-vivid-50: #e52207;
+$usa-color-red-vivid-60: #b50909;
+$usa-color-red-vivid-70: #8b0a03;
+$usa-color-red-vivid-80: #5c1111;
+$usa-color-violet-warm-5: #f8f0f9;
+$usa-color-violet-warm-10: #f6dff8;
+$usa-color-violet-warm-20: #e2bee4;
+$usa-color-violet-warm-30: #d29ad8;
+$usa-color-violet-warm-40: #bf77c8;
+$usa-color-violet-warm-50: #b04abd;
+$usa-color-violet-warm-60: #864381;
+$usa-color-violet-warm-70: #5c395a;
+$usa-color-violet-warm-80: #382936;
+$usa-color-violet-warm-90: #1b151b;
+$usa-color-violet-warm-vivid-5: #fef2ff;
+$usa-color-violet-warm-vivid-10: #fbdcff;
+$usa-color-violet-warm-vivid-20: #f4b2ff;
+$usa-color-violet-warm-vivid-30: #ee83ff;
+$usa-color-violet-warm-vivid-40: #d85bef;
+$usa-color-violet-warm-vivid-50: #be32d0;
+$usa-color-violet-warm-vivid-60: #93348c;
+$usa-color-violet-warm-vivid-70: #711e6c;
+$usa-color-violet-warm-vivid-80: #481441;
+$usa-color-violet-5: #f4f1f9;
+$usa-color-violet-10: #ebe3f9;
+$usa-color-violet-20: #d0c3e9;
+$usa-color-violet-30: #b8a2e3;
+$usa-color-violet-40: #9d84d2;
+$usa-color-violet-50: #8168b3;
+$usa-color-violet-60: #665190;
+$usa-color-violet-70: #4c3d69;
+$usa-color-violet-80: #312b3f;
+$usa-color-violet-90: #18161d;
+$usa-color-violet-vivid-5: #f7f2ff;
+$usa-color-violet-vivid-10: #ede3ff;
+$usa-color-violet-vivid-20: #d5bfff;
+$usa-color-violet-vivid-30: #c39deb;
+$usa-color-violet-vivid-40: #ad79e9;
+$usa-color-violet-vivid-50: #9355dc;
+$usa-color-violet-vivid-60: #783cb9;
+$usa-color-violet-vivid-70: #54278f;
+$usa-color-violet-vivid-80: #39215e;
+$usa-color-white-transparent-5: rgba(255,255,255,0.01);
+$usa-color-white-transparent-10: rgba(255,255,255,0.1);
+$usa-color-white-transparent-20: rgba(255,255,255,0.2);
+$usa-color-white-transparent-30: rgba(255,255,255,0.3);
+$usa-color-white-transparent-40: rgba(255,255,255,0.4);
+$usa-color-white-transparent-50: rgba(255,255,255,0.5);
+$usa-color-white-transparent-60: rgba(255,255,255,0.6);
+$usa-color-white-transparent-70: rgba(255,255,255,0.7);
+$usa-color-white-transparent-80: rgba(255,255,255,0.8);
+$usa-color-white-transparent-90: rgba(255,255,255,0.9);
+$usa-color-yellow-5: #faf3d1;
+$usa-color-yellow-10: #f5e6af;
+$usa-color-yellow-20: #e6c74c;
+$usa-color-yellow-30: #c9ab48;
+$usa-color-yellow-40: #a88f48;
+$usa-color-yellow-50: #8a7237;
+$usa-color-yellow-60: #6b5a39;
+$usa-color-yellow-70: #504332;
+$usa-color-yellow-80: #332d27;
+$usa-color-yellow-90: #1a1614;
+$usa-color-yellow-vivid-5: #fff5c2;
+$usa-color-yellow-vivid-10: #fee685;
+$usa-color-yellow-vivid-20: #face00;
+$usa-color-yellow-vivid-30: #ddaa01;
+$usa-color-yellow-vivid-40: #b38c00;
+$usa-color-yellow-vivid-50: #947100;
+$usa-color-yellow-vivid-60: #776017;
+$usa-color-yellow-vivid-70: #5c4809;
+$usa-color-yellow-vivid-80: #422d19;

package/build/scss/_spacing.scss

@@ -0,0 +1,13 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$usa-spacing-1: .5rem;
+$usa-spacing-2: 1rem;
+$usa-spacing-3: 1.5rem;
+$usa-spacing-4: 2rem;
+$usa-spacing-5: 2.5rem;
+$usa-spacing-6: 3rem;
+$usa-spacing-05: .025rem;
+$usa-site-margins-mobile-width: 1rem;
+$usa-site-margins-width: 2rem;
+$usa-size-touch-target: 3rem;

package/dist/components/frameworks/react/OgdsAccordion.d.ts

@@ -0,0 +1,69 @@
+import React from "react";
+import { OgdsAccordion as OgdsAccordionElement } from "../../ogds-accordion.js";
+
+export type { OgdsAccordionElement };
+
+export interface OgdsAccordionProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** Adds `role="list"` to the component and `role="listitem"` to each `<details>` child, conveying the accordion as a list to assistive technologies. Mutually exclusive with `heading-level`. */
+  useListSemantics?: boolean;
+
+  /** Sets a heading level for each accordion panel by adding `role="heading"` and the corresponding `aria-level` to each `<summary>` element. Has no effect when set to `0` (the default). Mutually exclusive with `use-list-semantics`. */
+  headingLevel?: OgdsAccordionElement["headingLevel"];
+
+  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: any;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+}
+
+/**
+ * The ogds-accordion component.
+ *
+ * Apply these classes to `<ogds-accordion>` to enable variants:
+ * - `bordered` — adds a border to expanded content
+ * - `with-icon` — shows a chevron icon on each summary
+ * - `with-icon plus` — uses plus/minus icons instead of chevrons
+ * - `with-icon right` — aligns the icon to the right
+ * ---
+ *
+ *
+ * ### **Slots:**
+ *  - _default_ - The default (only) slot for the <ogds-accordion> expects one or more plain HTML <details> elements.
+ *
+ * ### **CSS Properties:**
+ *  - **--ogds-accordion-border** - Border used in the bordered variant. _(default: undefined)_
+ * - **--ogds-accordion-content-padding** - Padding for the expanded content area. _(default: undefined)_
+ * - **--ogds-accordion-icon-closed** - Icon shown when a panel is closed. Defaults to a chevron pointing down. CSS-only users must set this to a url() value pointing to their own icon asset. _(default: undefined)_
+ * - **--ogds-accordion-icon-open** - Icon shown when a panel is open. Defaults to a chevron pointing up. CSS-only users must set this to a url() value pointing to their own icon asset. _(default: undefined)_
+ */
+export const OgdsAccordion: React.ForwardRefExoticComponent<OgdsAccordionProps>;

package/dist/components/frameworks/react/OgdsAccordion.js

@@ -0,0 +1,22 @@
+import React, { forwardRef } from "react";
+import "../../ogds-accordion.js";
+
+export const OgdsAccordion = forwardRef((props, forwardedRef) => {
+  const { useListSemantics, headingLevel, ...filteredProps } = props;
+
+  return React.createElement(
+    "ogds-accordion",
+    {
+      ...filteredProps,
+      "heading-level": props.headingLevel || props["heading-level"],
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      "use-list-semantics": props.useListSemantics ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/components/frameworks/react/OgdsAccordionToggle.d.ts

@@ -0,0 +1,60 @@
+import React from "react";
+import { OgdsAccordionToggle as OgdsAccordionToggleElement } from "../../ogds-accordion-toggle.js";
+
+export type { OgdsAccordionToggleElement };
+
+export interface OgdsAccordionToggleProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** The `id` of the `<ogds-accordion>` to control. Required. */
+  controls?: OgdsAccordionToggleElement["controls"];
+
+  /** Button label when all panels are collapsed. Defaults to "Expand All". */
+  expandLabel?: OgdsAccordionToggleElement["expandLabel"];
+
+  /** Button label when one or more panels are open. Defaults to "Collapse All". */
+  collapseLabel?: OgdsAccordionToggleElement["collapseLabel"];
+
+  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: any;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+}
+
+/**
+ * A button that expands or collapses all panels in an associated `<ogds-accordion>`.
+ * ---
+ *
+ *
+ * ### **CSS Parts:**
+ *  - **button** - The toggle button.
+ */
+export const OgdsAccordionToggle: React.ForwardRefExoticComponent<OgdsAccordionToggleProps>;

package/dist/components/frameworks/react/OgdsAccordionToggle.js

@@ -0,0 +1,23 @@
+import React, { forwardRef } from "react";
+import "../../ogds-accordion-toggle.js";
+
+export const OgdsAccordionToggle = forwardRef((props, forwardedRef) => {
+  const { controls, expandLabel, collapseLabel, ...filteredProps } = props;
+
+  return React.createElement(
+    "ogds-accordion-toggle",
+    {
+      ...filteredProps,
+      controls: props.controls,
+      "expand-label": props.expandLabel || props["expand-label"],
+      "collapse-label": props.collapseLabel || props["collapse-label"],
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});