@ogds/elements 1.0.0-alpha.7 → 1.0.0-alpha.8

package/src/components/ogds-alert/base-variables.css

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

package/src/components/ogds-alert/index.ts

@@ -0,0 +1,78 @@
+import { css, html, LitElement, nothing } from "lit";
+import {
+  customElement,
+  property,
+  queryAssignedNodes,
+  state,
+} from "lit/decorators.js";
+import stylesBaseVariables from "./base-variables.css";
+import styles from "./ogds-alert.css";
+
+/**
+ * @summary The ogds-alert component.
+ *
+ * @attribute {string} type - The type of alert (info, warning, etc)
+ * @attribute {string} noIcon - Use this attribute to hide the icon
+ *
+ * @slot heading - Text for the heading. Make sure to specify the correct heading level (h2, h3, etc)
+ * @slot body - Body content for the alert. Can contain HTML (links, etc).
+ *
+ * @tagname ogds-alert
+ */
+
+@customElement("ogds-alert")
+export class OGDSAlert extends LitElement {
+  @property()
+  type = "info";
+
+  @property({ type: Boolean, attribute: "no-icon" })
+  noIcon = false;
+
+  @queryAssignedNodes({ slot: "heading", flatten: true })
+  accessor _headingNodes: Node[] = [];
+
+  @state()
+  private accessor _hasHeader = false;
+
+  slotChange() {
+    this._hasHeader = this._headingNodes.length > 0;
+  }
+
+  static styles = [
+    css`
+      :host {
+        /** Icons */
+        --ogds-icon-check-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
+        --ogds-icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
+        --ogds-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z' /%3E%3C/svg%3E");
+        --ogds-icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
+      }
+    `,
+    stylesBaseVariables,
+    styles,
+  ];
+
+  render() {
+    return html`
+      <div class="ogds-alert ogds-alert--${this.type} ${this.noIcon ? "ogds-alert--no-icon" : ""} ${this._hasHeader ? "" : "ogds-alert--slim"}">
+        <div class="ogds-alert__body">
+          <div class="ogds-alert__heading" style="${this._hasHeader ? "" : "display:none;"}">
+            <img class="ogds-alert__icon" aria-hidden="true"></img>
+            <div>
+              <slot name="heading" @slotchange=${() => this.slotChange()}></slot>
+            </div>
+          </div>
+          <p class="ogds-alert__text">
+            ${
+              this._hasHeader
+                ? nothing
+                : html`<img class="ogds-alert__icon" aria-hidden="true"></img>`
+            }
+            <slot name="body"></slot>
+            <slot></slot>
+          </p>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/components/ogds-alert/ogds-alert.css

@@ -0,0 +1,119 @@
+:host {
+  --icon-info: var(--ogds-icon-info);
+  --icon-warning: var(--ogds-icon-warning);
+  --icon-success: var(--ogds-icon-check-circle);
+  --icon-error: var(--ogds-icon-error);
+  --icon-emergency: var(--ogds-icon-error);
+
+  box-sizing: border-box;
+}
+
+.ogds-alert {
+  background-color: var(--base-lightest);
+  border-left: var(--alert-bar-width, var(--ogds-spacing-1)) solid
+    var(--base-light);
+
+  .ogds-alert__body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-left: var(--ogds-spacing-4);
+    padding-block: var(--theme-alert-padding-y, var(--ogds-spacing-2));
+    padding-inline: var(--theme-alert-padding-x, var(--ogds-spacing-3));
+
+    .ogds-alert__icon {
+      left: 2rem;
+      position: absolute;
+      width: 2rem; /* TODO */
+    }
+
+    .ogds-alert__heading {
+      align-items: center;
+      display: flex;
+    }
+
+    .ogds-alert__text {
+      margin-bottom: 0;
+      margin-top: 0;
+    }
+  }
+}
+
+.ogds-alert--success {
+  .ogds-alert__icon {
+    content: var(--icon-success);
+  }
+
+  background-color: var(--ogds-color-green-cool-5);
+  border-left-color: var(--ogds-color-green-cool-vivid-40);
+}
+
+.ogds-alert--info {
+  .ogds-alert__icon {
+    content: var(--icon-info);
+  }
+
+  background-color: var(--ogds-color-cyan-5);
+  border-left-color: var(--ogds-color-cyan-vivid-30);
+}
+
+.ogds-alert--warning {
+  .ogds-alert__icon {
+    content: var(--icon-warning);
+  }
+
+  background-color: var(--ogds-color-yellow-5);
+  border-left-color: var(--ogds-color-gold-vivid-20);
+}
+
+.ogds-alert--error {
+  .ogds-alert__icon {
+    content: var(--icon-error);
+  }
+
+  background-color: var(--ogds-color-red-warm-10);
+  border-left-color: var(--ogds-color-red-warm-vivid-50);
+}
+
+.ogds-alert--slim {
+  .ogds-alert__body {
+    margin-left: 1rem;
+
+    .ogds-alert__icon {
+      width: 1.5rem;
+    }
+  }
+}
+
+.ogds-alert--no-icon {
+  .ogds-alert__body {
+    margin-left: 0;
+
+    .ogds-alert__icon {
+      display: none;
+    }
+  }
+}
+
+::slotted(:is(h1, h2, h3, h4, h5, h6)) {
+  font-family:
+    "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial,
+    sans-serif; /* TODO */
+
+  font-size: 1.33rem; /* TODO */
+  line-height: 0.9; /* TODO */
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+::slotted(p),
+::slotted(div) {
+  font-family:
+    "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial,
+    sans-serif; /* TODO */
+
+  font-size: 1.06rem; /* TODO */
+  line-height: 1.5; /* TODO */
+  margin-bottom: 0;
+  margin-top: 0;
+}