wip: css and ui packages

8 files changed, 1683 insertions, 0 deletions

diff --git a/packages/css/src/base.css b/packages/css/src/base.css
new file mode 100644
index 000000000..fe0525d37
--- /dev/null
+++ b/packages/css/src/base.css
@@ -0,0 +1,393 @@
+/*
+  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+  2. Remove default margins and padding
+  3. Reset all borders.
+*/
+
+*,
+::after,
+::before,
+::backdrop,
+::file-selector-button {
+  box-sizing: border-box; /* 1 */
+  margin: 0; /* 2 */
+  padding: 0; /* 2 */
+  border: 0 solid; /* 3 */
+}
+
+/*
+  1. Use a consistent sensible line-height in all browsers.
+  2. Prevent adjustments of font size after orientation changes in iOS.
+  3. Use a more readable tab size.
+  4. Use the user's configured `sans` font-family by default.
+  5. Use the user's configured `sans` font-feature-settings by default.
+  6. Use the user's configured `sans` font-variation-settings by default.
+  7. Disable tap highlights on iOS.
+*/
+
+html,
+:host {
+  line-height: 1.5; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  tab-size: 4; /* 3 */
+  font-family: --theme(
+    --default-font-family,
+    ui-sans-serif,
+    system-ui,
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "Noto Color Emoji"
+  ); /* 4 */
+  font-feature-settings: --theme(--default-font-feature-settings, normal); /* 5 */
+  font-variation-settings: --theme(--default-font-variation-settings, normal); /* 6 */
+  -webkit-tap-highlight-color: transparent; /* 7 */
+}
+
+/*
+  1. Add the correct height in Firefox.
+  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+  3. Reset the default border style to a 1px solid border.
+*/
+
+hr {
+  height: 0; /* 1 */
+  color: inherit; /* 2 */
+  border-top-width: 1px; /* 3 */
+}
+
+/*
+  Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+}
+
+/*
+  Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+  Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  -webkit-text-decoration: inherit;
+  text-decoration: inherit;
+}
+
+/*
+  Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+  1. Use the user's configured `mono` font-family by default.
+  2. Use the user's configured `mono` font-feature-settings by default.
+  3. Use the user's configured `mono` font-variation-settings by default.
+  4. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: --theme(
+    --default-mono-font-family,
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    "Liberation Mono",
+    "Courier New",
+    monospace
+  ); /* 1 */
+  font-feature-settings: --theme(--default-mono-font-feature-settings, normal); /* 2 */
+  font-variation-settings: --theme(--default-mono-font-variation-settings, normal); /* 3 */
+  font-size: 1em; /* 4 */
+}
+
+/*
+  Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+  Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+  3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0; /* 1 */
+  border-color: inherit; /* 2 */
+  border-collapse: collapse; /* 3 */
+}
+
+/*
+  Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+  Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+  Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+  Make lists unstyled by default.
+*/
+
+ol,
+ul,
+menu {
+  list-style: none;
+}
+
+/*
+  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+      This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block; /* 1 */
+  vertical-align: middle; /* 2 */
+}
+
+/*
+  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/*
+  1. Inherit font styles in all browsers.
+  2. Remove border radius in all browsers.
+  3. Remove background color in all browsers.
+  4. Ensure consistent opacity for disabled states in all browsers.
+*/
+
+button,
+input,
+select,
+optgroup,
+textarea,
+::file-selector-button {
+  font: inherit; /* 1 */
+  font-feature-settings: inherit; /* 1 */
+  font-variation-settings: inherit; /* 1 */
+  letter-spacing: inherit; /* 1 */
+  color: inherit; /* 1 */
+  border-radius: 0; /* 2 */
+  background-color: transparent; /* 3 */
+  opacity: 1; /* 4 */
+}
+
+/*
+  Restore default font weight.
+*/
+
+:where(select:is([multiple], [size])) optgroup {
+  font-weight: bolder;
+}
+
+/*
+  Restore indentation.
+*/
+
+:where(select:is([multiple], [size])) optgroup option {
+  padding-inline-start: 20px;
+}
+
+/*
+  Restore space after button.
+*/
+
+::file-selector-button {
+  margin-inline-end: 4px;
+}
+
+/*
+  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+*/
+
+::placeholder {
+  opacity: 1;
+}
+
+/*
+  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
+  crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
+*/
+
+@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or (contain-intrinsic-size: 1px)
+  /* Safari 17+ */ {
+  ::placeholder {
+    color: color-mix(in oklab, currentcolor 50%, transparent);
+  }
+}
+
+/*
+  Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+  Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+  1. Ensure date/time inputs have the same height when empty in iOS Safari.
+  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
+*/
+
+::-webkit-date-and-time-value {
+  min-height: 1lh; /* 1 */
+  text-align: inherit; /* 2 */
+}
+
+/*
+  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
+*/
+
+::-webkit-datetime-edit {
+  display: inline-flex;
+}
+
+/*
+  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
+*/
+
+::-webkit-datetime-edit-fields-wrapper {
+  padding: 0;
+}
+
+::-webkit-datetime-edit,
+::-webkit-datetime-edit-year-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-minute-field,
+::-webkit-datetime-edit-second-field,
+::-webkit-datetime-edit-millisecond-field,
+::-webkit-datetime-edit-meridiem-field {
+  padding-block: 0;
+}
+
+/*
+  Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
+*/
+
+::-webkit-calendar-picker-indicator {
+  line-height: 1;
+}
+
+/*
+  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+  Correct the inability to style the border radius in iOS Safari.
+*/
+
+button,
+input:where([type="button"], [type="reset"], [type="submit"]),
+::file-selector-button {
+  appearance: button;
+}
+
+/*
+  Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+  Make elements with the HTML hidden attribute stay hidden by default.
+*/
+
+[hidden]:where(:not([hidden="until-found"])) {
+  display: none !important;
+}
diff --git a/packages/css/src/color.css b/packages/css/src/color.css
new file mode 100644
index 000000000..e5ab90097
--- /dev/null
+++ b/packages/css/src/color.css
@@ -0,0 +1,496 @@
+:root {
+  --black: #000000;
+  --white: #ffffff;
+  --grey-dark-1: #ffffff;
+  --grey-dark-2: #ffffff;
+  --grey-dark-3: #ffffff;
+  --grey-dark-4: #ffffff;
+  --grey-dark-5: #ffffff;
+  --grey-dark-6: #ffffff;
+  --grey-dark-7: #ffffff;
+  --grey-dark-8: #ffffff;
+  --grey-dark-9: #ffffff;
+  --grey-dark-10: #ffffff;
+  --grey-dark-11: #ffffff;
+  --grey-dark-12: #ffffff;
+  --grey-light-1: #ffffff;
+  --grey-dark-alpha-1: #ffffff;
+  --grey-dark-alpha-2: #ffffff;
+  --grey-dark-alpha-3: #ffffff;
+  --grey-dark-alpha-4: #ffffff;
+  --grey-dark-alpha-5: #ffffff;
+  --grey-dark-alpha-6: #ffffff;
+  --grey-dark-alpha-7: #ffffff;
+  --grey-dark-alpha-8: #ffffff;
+  --grey-dark-alpha-9: #ffffff;
+  --grey-dark-alpha-10: #ffffff;
+  --grey-dark-alpha-11: #ffffff;
+  --grey-dark-alpha-12: #ffffff;
+  --smoke-dark-1: #131010;
+  --grey-light-2: #ffffff;
+  --grey-light-3: #ffffff;
+  --grey-light-4: #ffffff;
+  --grey-light-5: #ffffff;
+  --grey-light-6: #ffffff;
+  --grey-light-7: #ffffff;
+  --grey-light-8: #ffffff;
+  --grey-light-9: #ffffff;
+  --grey-light-10: #ffffff;
+  --grey-light-11: #ffffff;
+  --grey-light-12: #ffffff;
+  --smoke-dark-2: #1b1818;
+  --smoke-dark-3: #252121;
+  --smoke-dark-4: #2d2828;
+  --smoke-dark-5: #343030;
+  --smoke-dark-6: #3e3939;
+  --smoke-dark-7: #4b4646;
+  --smoke-dark-8: #645f5f;
+  --smoke-dark-9: #716c6b;
+  --smoke-dark-10: #7f7979;
+  --smoke-dark-11: #b7b1b1;
+  --smoke-dark-12: #f1ecec;
+  --smoke-light-1: #fdfcfc;
+  --smoke-light-2: #f9f8f8;
+  --smoke-light-3: #f1f0f0;
+  --smoke-light-4: #e9e8e8;
+  --smoke-light-5: #e2e0e0;
+  --smoke-light-6: #dad9d9;
+  --smoke-light-7: #cfcecd;
+  --smoke-light-8: #bcbbbb;
+  --smoke-light-9: #8e8b8b;
+  --smoke-light-10: #848181;
+  --smoke-light-11: #656363;
+  --smoke-light-12: #211e1e;
+  --smoke-dark-alpha-1: #bb000003;
+  --smoke-dark-alpha-2: #f9b4b40b;
+  --smoke-dark-alpha-3: #f9caca16;
+  --smoke-dark-alpha-4: #ffd5d51e;
+  --smoke-dark-alpha-5: #fce2e226;
+  --smoke-dark-alpha-6: #fce2e231;
+  --smoke-dark-alpha-7: #fce8e83f;
+  --smoke-dark-alpha-8: #fff1f159;
+  --smoke-dark-alpha-9: #fff3f067;
+  --smoke-dark-alpha-10: #fff2f276;
+  --smoke-dark-alpha-11: #fff7f7b2;
+  --smoke-dark-alpha-12: #fffafaf0;
+  --smoke-light-alpha-1: #55000003;
+  --smoke-light-alpha-2: #25000007;
+  --smoke-light-alpha-3: #1100000f;
+  --smoke-light-alpha-4: #0c000017;
+  --smoke-light-alpha-5: #1100001f;
+  --smoke-light-alpha-6: #07000026;
+  --smoke-light-alpha-7: #0b060032;
+  --smoke-light-alpha-8: #04000044;
+  --smoke-light-alpha-9: #07000074;
+  --smoke-light-alpha-10: #0400009c;
+  --smoke-light-alpha-11: #0700007e;
+  --smoke-light-alpha-12: #020000df;
+  --yuzu-dark-1: #11120c;
+  --yuzu-light-1: #fdfdfb;
+  --yuzu-light-2: #fbfceb;
+  --yuzu-light-3: #f8fac5;
+  --yuzu-light-4: #f2f4a5;
+  --yuzu-light-5: #e9eb9a;
+  --yuzu-light-6: #dcde8e;
+  --yuzu-light-7: #cccd7e;
+  --yuzu-light-8: #b6b768;
+  --yuzu-light-9: #dcde8d;
+  --yuzu-light-10: #d2d384;
+  --yuzu-light-11: #7c7c2c;
+  --yuzu-light-12: #3d3d23;
+  --yuzu-dark-2: #181810;
+  --yuzu-dark-3: #262614;
+  --yuzu-dark-4: #313115;
+  --yuzu-dark-5: #3d3d18;
+  --yuzu-dark-6: #4a4a21;
+  --yuzu-dark-7: #5a5b2c;
+  --yuzu-dark-8: #6f6f36;
+  --yuzu-dark-9: #fdffca;
+  --yuzu-dark-10: #f4f6c1;
+  --yuzu-dark-11: #dbdda0;
+  --yuzu-dark-12: #eff1bd;
+  --yuzu-dark-alpha-1: #11910002;
+  --yuzu-dark-alpha-2: #f1f10008;
+  --yuzu-dark-alpha-3: #fafa3317;
+  --yuzu-dark-alpha-4: #fbfb2f23;
+  --yuzu-dark-alpha-5: #fbfb3730;
+  --yuzu-dark-alpha-6: #fcfc533e;
+  --yuzu-dark-alpha-7: #fafd6750;
+  --yuzu-dark-alpha-8: #ffff6f65;
+  --yuzu-dark-alpha-9: #fdffca;
+  --yuzu-dark-alpha-10: #fcfec7f6;
+  --yuzu-dark-alpha-11: #fdffb8db;
+  --yuzu-dark-alpha-12: #fdffc8f0;
+  --yuzu-light-alpha-1: #80800004;
+  --yuzu-light-alpha-2: #ccd90014;
+  --yuzu-light-alpha-3: #e1ea003a;
+  --yuzu-light-alpha-4: #dbe0015a;
+  --yuzu-light-alpha-5: #c8cd0065;
+  --yuzu-light-alpha-6: #b1b50071;
+  --yuzu-light-alpha-7: #9b9d0081;
+  --yuzu-light-alpha-8: #84860097;
+  --yuzu-light-alpha-9: #b1b60072;
+  --yuzu-light-alpha-10: #a2a4017b;
+  --yuzu-light-alpha-11: #616100d3;
+  --yuzu-light-alpha-12: #1e1e00dc;
+  --cobalt-dark-1: #091120;
+  --cobalt-dark-2: #0d172b;
+  --cobalt-dark-3: #0c2255;
+  --cobalt-dark-4: #0c2a74;
+  --cobalt-dark-5: #113489;
+  --cobalt-dark-6: #18409b;
+  --cobalt-dark-7: #204cb1;
+  --cobalt-dark-8: #2558d0;
+  --cobalt-dark-9: #034cff;
+  --cobalt-dark-10: #0038ee;
+  --cobalt-dark-11: #89b5ff;
+  --cobalt-dark-12: #cde2ff;
+  --cobalt-light-1: #fcfdff;
+  --cobalt-light-2: #f5faff;
+  --cobalt-light-3: #eaf2ff;
+  --cobalt-light-4: #daeaff;
+  --cobalt-light-5: #c8e0ff;
+  --cobalt-light-6: #b4d2ff;
+  --cobalt-light-7: #98bfff;
+  --cobalt-dark-alpha-1: #0011f211;
+  --cobalt-dark-alpha-2: #0048fe1c;
+  --cobalt-dark-alpha-3: #004dff49;
+  --cobalt-dark-alpha-4: #064dfd6b;
+  --cobalt-dark-alpha-5: #1157ff81;
+  --cobalt-dark-alpha-6: #1e62ff94;
+  --cobalt-dark-alpha-7: #2768feac;
+  --cobalt-dark-alpha-8: #2a6affcd;
+  --cobalt-dark-alpha-9: #034cff;
+  --cobalt-dark-alpha-10: #003bffed;
+  --cobalt-dark-alpha-11: #89b5ff;
+  --cobalt-dark-alpha-12: #cde2ff;
+  --cobalt-light-8: #73a4ff;
+  --cobalt-light-9: #034cff;
+  --cobalt-light-10: #0443de;
+  --cobalt-light-11: #1251ec;
+  --cobalt-light-12: #0f2b6c;
+  --cobalt-light-alpha-1: #0055ff03;
+  --cobalt-light-alpha-2: #0080ff0a;
+  --cobalt-light-alpha-3: #0062ff15;
+  --cobalt-light-alpha-4: #006fff25;
+  --cobalt-light-alpha-5: #0070ff37;
+  --cobalt-light-alpha-6: #0167ff4b;
+  --cobalt-light-alpha-7: #0061ff67;
+  --cobalt-light-alpha-8: #005aff8c;
+  --cobalt-light-alpha-9: #004afffc;
+  --cobalt-light-alpha-10: #0040ddfb;
+  --cobalt-light-alpha-11: #0044ebed;
+  --cobalt-light-alpha-12: #001e63f0;
+  --apple-dark-1: #0c140b;
+  --apple-light-1: #fafefa;
+  --apple-light-2: #f4fcf3;
+  --apple-light-3: #e1fade;
+  --apple-light-4: #cef6c9;
+  --apple-light-5: #b9efb3;
+  --apple-light-6: #9fe598;
+  --apple-light-7: #7dd676;
+  --apple-light-8: #43c23b;
+  --apple-light-9: #12c905;
+  --apple-light-10: #00bd00;
+  --apple-light-11: #008600;
+  --apple-light-12: #184115;
+  --apple-dark-2: #121b11;
+  --apple-dark-3: #152d13;
+  --apple-dark-4: #123d0f;
+  --apple-dark-5: #174b14;
+  --apple-dark-6: #1d5b19;
+  --apple-dark-7: #226c1e;
+  --apple-dark-8: #267f20;
+  --apple-dark-9: #12c905;
+  --apple-dark-10: #17bb0d;
+  --apple-dark-11: #37db2e;
+  --apple-dark-12: #aff7a8;
+  --apple-dark-alpha-1: #00d10004;
+  --apple-dark-alpha-2: #29f9120b;
+  --apple-dark-alpha-3: #33ff221e;
+  --apple-dark-alpha-4: #17fb0730;
+  --apple-dark-alpha-5: #2afc1e3f;
+  --apple-dark-alpha-6: #37fd2b50;
+  --apple-dark-alpha-7: #3efe3362;
+  --apple-dark-alpha-8: #3fff3276;
+  --apple-dark-alpha-9: #12fe02c6;
+  --apple-dark-alpha-10: #19fe0cb7;
+  --apple-dark-alpha-11: #3dfe33d9;
+  --apple-dark-alpha-12: #b4feacf7;
+  --apple-light-alpha-1: #00cc0005;
+  --apple-light-alpha-2: #16c0000c;
+  --apple-light-alpha-3: #18d90021;
+  --apple-light-alpha-4: #18d50036;
+  --apple-light-alpha-5: #15ca004c;
+  --apple-light-alpha-6: #12bf0067;
+  --apple-light-alpha-7: #0db30089;
+  --apple-light-alpha-8: #0bb000c4;
+  --apple-light-alpha-9: #0dc800fa;
+  --apple-light-alpha-10: #00bd00;
+  --apple-light-alpha-11: #008600;
+  --apple-light-alpha-12: #033000ea;
+  --ember-dark-1: #170f0d;
+  --ember-dark-2: #201412;
+  --ember-dark-3: #3c140d;
+  --ember-dark-4: #530e05;
+  --ember-dark-5: #631409;
+  --ember-dark-6: #742216;
+  --ember-dark-7: #8d3324;
+  --ember-dark-8: #b64330;
+  --ember-dark-9: #fc533a;
+  --ember-dark-10: #ee462d;
+  --ember-dark-11: #ff917b;
+  --ember-dark-12: #ffd1c8;
+  --ember-light-1: #fffcfb;
+  --ember-light-2: #fff6f3;
+  --ember-light-3: #ffe9e4;
+  --ember-light-4: #ffd7cc;
+  --ember-light-5: #ffc8ba;
+  --ember-light-6: #ffb7a6;
+  --ember-light-7: #ffa392;
+  --ember-light-8: #f68975;
+  --ember-light-9: #fc533a;
+  --ember-light-10: #ef442a;
+  --ember-light-11: #da3319;
+  --ember-light-12: #5c281f;
+  --ember-dark-alpha-1: #ec000007;
+  --ember-dark-alpha-2: #f23e2011;
+  --ember-dark-alpha-3: #fb22002f;
+  --ember-dark-alpha-4: #ff070047;
+  --ember-dark-alpha-5: #ff1a0058;
+  --ember-dark-alpha-6: #fd3a1d6b;
+  --ember-dark-alpha-7: #ff533685;
+  --ember-dark-alpha-8: #ff5a3eb1;
+  --ember-dark-alpha-9: #ff553bfc;
+  --ember-dark-alpha-10: #ff4a2fed;
+  --ember-dark-alpha-11: #ff917b;
+  --ember-dark-alpha-12: #ffd1c8;
+  --ember-light-alpha-1: #ff400004;
+  --ember-light-alpha-2: #ff40000c;
+  --ember-light-alpha-3: #ff30001b;
+  --ember-light-alpha-4: #ff370033;
+  --ember-light-alpha-5: #ff340045;
+  --ember-light-alpha-6: #ff310059;
+  --ember-light-alpha-7: #ff28006d;
+  --ember-light-alpha-8: #ef25008a;
+  --ember-light-alpha-9: #fb2200c5;
+  --ember-light-alpha-10: #ec1f00d5;
+  --ember-light-alpha-11: #d61d00e6;
+  --ember-light-alpha-12: #460a00e0;
+  --solaris-dark-1: #13110b;
+  --solaris-dark-2: #1b180f;
+  --solaris-dark-3: #2a2307;
+  --solaris-dark-4: #382b00;
+  --solaris-dark-5: #443500;
+  --solaris-dark-6: #514307;
+  --solaris-dark-7: #64551a;
+  --solaris-dark-8: #7f6c25;
+  --solaris-dark-9: #fcd53a;
+  --solaris-dark-10: #f2cb2a;
+  --solaris-dark-11: #fdd63c;
+  --solaris-dark-12: #faebb5;
+  --solaris-light-1: #fefdfa;
+  --solaris-light-2: #fffbea;
+  --solaris-light-3: #fff6be;
+  --solaris-light-4: #ffee9c;
+  --solaris-light-5: #ffe47c;
+  --solaris-light-6: #f2d775;
+  --solaris-light-7: #e0c76f;
+  --solaris-light-8: #cdb047;
+  --solaris-light-9: #ffdc17;
+  --solaris-light-10: #fad337;
+  --solaris-light-11: #917500;
+  --solaris-light-12: #433c22;
+  --solaris-dark-alpha-1: #bb110003;
+  --solaris-dark-alpha-2: #f9b4000b;
+  --solaris-dark-alpha-3: #febb001b;
+  --solaris-dark-alpha-4: #feaf002a;
+  --solaris-dark-alpha-5: #feb80037;
+  --solaris-dark-alpha-6: #feca0045;
+  --solaris-dark-alpha-7: #ffd42b59;
+  --solaris-dark-alpha-8: #ffd63d76;
+  --solaris-dark-alpha-9: #ffd83bfc;
+  --solaris-dark-alpha-10: #fed52bf2;
+  --solaris-dark-alpha-11: #ffd83cfd;
+  --solaris-dark-alpha-12: #fff0b9fa;
+  --solaris-light-alpha-1: #cc990005;
+  --solaris-light-alpha-2: #ffcf0015;
+  --solaris-light-alpha-3: #ffdc0041;
+  --solaris-light-alpha-4: #ffd40063;
+  --solaris-light-alpha-5: #ffcb0083;
+  --solaris-light-alpha-6: #e7b6008a;
+  --solaris-light-alpha-7: #c89c0090;
+  --solaris-light-alpha-8: #ba9200b8;
+  --solaris-light-alpha-9: #ffd900e8;
+  --solaris-light-alpha-10: #f9c700c8;
+  --solaris-light-alpha-11: #917500;
+  --solaris-light-alpha-12: #261e00dd;
+  --lilac-dark-1: #140f14;
+  --lilac-dark-2: #1d141d;
+  --lilac-dark-3: #2f1e31;
+  --lilac-dark-4: #3e2440;
+  --lilac-dark-5: #4a2c4c;
+  --lilac-dark-6: #573859;
+  --lilac-dark-7: #6c486e;
+  --lilac-dark-8: #8a5e8d;
+  --lilac-dark-9: #edb2f1;
+  --lilac-dark-10: #e2a8e6;
+  --lilac-dark-11: #dca2e0;
+  --lilac-dark-12: #edd8ef;
+  --lilac-light-1: #fffcff;
+  --lilac-light-2: #fdf7fe;
+  --lilac-light-3: #fceafd;
+  --lilac-light-4: #faddfb;
+  --lilac-light-5: #f5cff7;
+  --lilac-light-6: #eebff1;
+  --lilac-light-7: #e3a9e7;
+  --lilac-light-8: #d78bdd;
+  --lilac-light-9: #a753ae;
+  --lilac-light-10: #9946a0;
+  --lilac-light-11: #95429c;
+  --lilac-light-12: #590b60;
+  --lilac-dark-alpha-1: #d100d104;
+  --lilac-dark-alpha-2: #fd4cfd0d;
+  --lilac-dark-alpha-3: #ec70fb23;
+  --lilac-dark-alpha-4: #f270fc33;
+  --lilac-dark-alpha-5: #f57dfd40;
+  --lilac-dark-alpha-6: #f691fd4e;
+  --lilac-dark-alpha-7: #fa9eff64;
+  --lilac-dark-alpha-8: #f9a5ff85;
+  --lilac-dark-alpha-9: #fbbcfff0;
+  --lilac-dark-alpha-10: #f9b9fee5;
+  --lilac-dark-alpha-11: #fab8ffde;
+  --lilac-dark-alpha-12: #fde6ffee;
+  --lilac-light-alpha-1: #ff00ff03;
+  --lilac-light-alpha-2: #c000e008;
+  --lilac-light-alpha-3: #db00e715;
+  --lilac-light-alpha-4: #da00e122;
+  --lilac-light-alpha-5: #ca00d530;
+  --lilac-light-alpha-6: #bc00c840;
+  --lilac-light-alpha-7: #ac00b856;
+  --lilac-light-alpha-8: #a800b574;
+  --lilac-light-alpha-9: #7d0087ac;
+  --lilac-light-alpha-10: #73007cb9;
+  --lilac-light-alpha-11: #70007abd;
+  --lilac-light-alpha-12: #520059f4;
+  --coral-dark-1: #160f0e;
+  --coral-light-1: #fffcfc;
+  --coral-light-2: #fff8f7;
+  --coral-light-3: #ffebe8;
+  --coral-light-4: #ffdbd5;
+  --coral-light-5: #ffcdc5;
+  --coral-light-6: #f9beb5;
+  --coral-light-7: #e9aea6;
+  --coral-light-8: #d49b93;
+  --coral-light-9: #af7871;
+  --coral-light-10: #a26c65;
+  --coral-light-11: #9c665f;
+  --coral-light-12: #592a24;
+  --coral-dark-2: #1f1413;
+  --coral-dark-3: #391613;
+  --coral-dark-4: #481b17;
+  --coral-dark-5: #542621;
+  --coral-dark-6: #63332d;
+  --coral-dark-7: #77453f;
+  --coral-dark-8: #935e57;
+  --coral-dark-9: #ffd6d0;
+  --coral-dark-10: #f5ccc6;
+  --coral-dark-11: #e2a8a0;
+  --coral-dark-12: #fcd3cd;
+  --coral-dark-alpha-1: #e6000006;
+  --coral-dark-alpha-2: #ff44330f;
+  --coral-dark-alpha-3: #ff2f1d2b;
+  --coral-dark-alpha-4: #ff3d2b3b;
+  --coral-dark-alpha-5: #ff5c4a48;
+  --coral-dark-alpha-6: #ff746358;
+  --coral-dark-alpha-7: #fd897c6e;
+  --coral-dark-alpha-8: #fe9d908c;
+  --coral-dark-alpha-9: #ffd6d0;
+  --coral-dark-alpha-10: #fed3cdf5;
+  --coral-dark-alpha-11: #ffbdb4e0;
+  --coral-dark-alpha-12: #ffd6cffc;
+  --coral-light-alpha-1: #ff000003;
+  --coral-light-alpha-2: #ff200008;
+  --coral-light-alpha-3: #ff220017;
+  --coral-light-alpha-4: #ff25002a;
+  --coral-light-alpha-5: #ff24003a;
+  --coral-light-alpha-6: #eb20014a;
+  --coral-light-alpha-7: #c0170059;
+  --coral-light-alpha-8: #9a13006c;
+  --coral-light-alpha-9: #700d008e;
+  --coral-light-alpha-10: #650c009a;
+  --coral-light-alpha-11: #620b00a0;
+  --coral-light-alpha-12: #3e0700db;
+  --mint-dark-alpha-1: #00bb0003;
+  --mint-dark-alpha-2: #2bf72b0a;
+  --mint-dark-alpha-3: #66fe5d1b;
+  --mint-dark-alpha-4: #63ff5d2c;
+  --mint-dark-alpha-5: #6cff643b;
+  --mint-dark-alpha-6: #71ff6a4b;
+  --mint-dark-alpha-7: #74fd6f5d;
+  --mint-dark-alpha-8: #74ff6f72;
+  --mint-dark-alpha-9: #c8ffc4f5;
+  --mint-dark-alpha-10: #c6fec2f5;
+  --mint-dark-alpha-11: #b4ffafdc;
+  --mint-dark-alpha-12: #c7ffc3fb;
+  --mint-dark-1: #0d130c;
+  --mint-dark-2: #121a12;
+  --mint-dark-3: #1a2a19;
+  --mint-dark-4: #1f3a1e;
+  --mint-dark-5: #264824;
+  --mint-dark-6: #2d572b;
+  --mint-dark-7: #356733;
+  --mint-dark-8: #3d7b3b;
+  --mint-dark-9: #c8ffc4;
+  --mint-dark-10: #bff5bb;
+  --mint-dark-11: #9dde99;
+  --mint-dark-12: #c4fbc0;
+  --mint-light-1: #fafefa;
+  --mint-light-2: #f4fcf3;
+  --mint-light-3: #dbfdd8;
+  --mint-light-4: #c3fabf;
+  --mint-light-5: #adf2a8;
+  --mint-light-6: #96e692;
+  --mint-light-7: #81d47d;
+  --mint-light-8: #6abc67;
+  --mint-light-9: #9ff29a;
+  --mint-light-10: #98e793;
+  --mint-light-11: #318430;
+  --mint-light-12: #1f461d;
+  --mint-dark-alpha-1: #00bb0003;
+  --mint-dark-alpha-2: #2bf72b09;
+  --mint-dark-alpha-3: #66fe5d1b;
+  --mint-dark-alpha-4: #63ff5d2b;
+  --mint-dark-alpha-5: #6cff643b;
+  --mint-dark-alpha-6: #71ff6a4a;
+  --mint-dark-alpha-7: #74fd6f5c;
+  --mint-dark-alpha-8: #74ff6f72;
+  --mint-dark-alpha-9: #c8ffc4f5;
+  --mint-dark-alpha-10: #c6fec2f5;
+  --mint-dark-alpha-11: #b4ffafdb;
+  --mint-dark-alpha-12: #c7ffc3fa;
+  --mint-light-alpha-1: #00cc0005;
+  --mint-light-alpha-2: #16c0000c;
+  --mint-light-alpha-3: #14f20027;
+  --mint-light-alpha-4: #10ec0040;
+  --mint-light-alpha-5: #0fd90057;
+  --mint-light-alpha-6: #0ac5006d;
+  --mint-light-alpha-7: #08ab0082;
+  --mint-light-alpha-8: #058f0098;
+  --mint-light-alpha-9: #0ddf0065;
+  --mint-light-alpha-10: #0cc7006c;
+  --mint-light-alpha-11: #016800cf;
+  --mint-light-alpha-12: #022e00e2;
+  --grey-light-alpha-1: #ffffff;
+  --grey-light-alpha-2: #ffffff;
+  --grey-light-alpha-3: #ffffff;
+  --grey-light-alpha-4: #ffffff;
+  --grey-light-alpha-5: #ffffff;
+  --grey-light-alpha-6: #ffffff;
+  --grey-light-alpha-7: #ffffff;
+  --grey-light-alpha-8: #ffffff;
+  --grey-light-alpha-9: #ffffff;
+  --grey-light-alpha-10: #ffffff;
+  --grey-light-alpha-11: #ffffff;
+  --grey-light-alpha-12: #ffffff;
+}
diff --git a/packages/css/src/components/button.css b/packages/css/src/components/button.css
new file mode 100644
index 000000000..5833d05e9
--- /dev/null
+++ b/packages/css/src/components/button.css
@@ -0,0 +1,93 @@
+[data-component="button"] {
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-style: solid;
+  border-width: 1px;
+  border-radius: var(--radius-md);
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  line-height: var(--text-base--line-height);
+  font-weight: var(--font-weight-normal);
+  text-decoration: none;
+  user-select: none;
+  gap: calc(var(--spacing) * 2);
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &[data-variant="primary"] {
+    border-color: var(--border-default-border);
+    background-color: var(--surface-brand-surface-brand);
+    color: var(--text-on-brand-text-strong-on-brand);
+
+    &:hover:not(:disabled) {
+      border-color: var(--border-default-border-hover);
+      background-color: var(--surface-brand-surface-brand-hover);
+    }
+    &:active:not(:disabled) {
+      border-color: var(--border-default-border-active);
+      background-color: var(--surface-brand-surface-brand-active);
+    }
+    &:focus:not(:disabled) {
+      border-color: var(--border-default-border-focus);
+      background-color: var(--surface-brand-surface-brand-focus);
+    }
+  }
+
+  &[data-variant="secondary"] {
+    border-color: var(--border-default-border);
+    background-color: var(--surface-default-surface);
+    color: var(--text-default-text);
+
+    &:hover:not(:disabled) {
+      border-color: var(--border-default-border-hover);
+      background-color: var(--surface-default-surface-hover);
+    }
+    &:active:not(:disabled) {
+      border-color: var(--border-default-border-active);
+      background-color: var(--surface-default-surface-active);
+    }
+    &:focus:not(:disabled) {
+      border-color: var(--border-default-border-focus);
+      background-color: var(--surface-default-surface-focus);
+    }
+  }
+
+  &[data-variant="ghost"] {
+    border-color: transparent;
+    background-color: transparent;
+    color: var(--text-default-text);
+
+    &:hover:not(:disabled) {
+      background-color: var(--surface-default-surface-hover);
+    }
+    &:active:not(:disabled) {
+      border-color: var(--border-default-border-active);
+      background-color: var(--surface-default-surface-active);
+    }
+    &:focus:not(:disabled) {
+      border-color: var(--border-default-border-focus);
+      background-color: var(--surface-default-surface-focus);
+    }
+  }
+
+  &[data-size="normal"] {
+    padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 3);
+    font-size: var(--text-xs);
+    line-height: var(--text-sm--line-height);
+  }
+
+  &[data-size="large"] {
+    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 4);
+    font-size: var(--text-sm);
+    line-height: var(--text-sm--line-height);
+  }
+}
diff --git a/packages/css/src/components/icon.css b/packages/css/src/components/icon.css
new file mode 100644
index 000000000..abc193220
--- /dev/null
+++ b/packages/css/src/components/icon.css
@@ -0,0 +1,6 @@
+[data-component="icon"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
diff --git a/packages/css/src/components/select.css b/packages/css/src/components/select.css
new file mode 100644
index 000000000..d7b4b589d
--- /dev/null
+++ b/packages/css/src/components/select.css
@@ -0,0 +1,133 @@
+[data-component="select"] {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--spacing) * 2);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: var(--radius-md);
+  border-color: var(--color-smoke-4);
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  line-height: var(--text-base--line-height);
+  font-weight: var(--font-weight-normal);
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  text-decoration: none;
+  user-select: none;
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--color-primary);
+  }
+
+  [data-slot="section"] {
+    font-size: var(--text-xs);
+    line-height: var(--text-xs--line-height);
+    font-weight: var(--font-weight-normal);
+    margin-top: calc(var(--spacing) * 3);
+    margin-left: calc(var(--spacing) * 2);
+    &:first-child {
+      margin-top: calc(var(--spacing) * 0);
+    }
+  }
+
+  [data-slot="item"] {
+    /*             "relative flex cursor-pointer select-none items-center": true, */
+    /*             "rounded-sm px-2 py-0.5 text-xs outline-none text-text": true, */
+    /*             "transition-colors data-[disabled]:pointer-events-none": true, */
+    /*             "data-[highlighted]:bg-background-element data-[disabled]:opacity-50": true, */
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--spacing) * 2);
+    border-style: solid;
+    border-width: 1px;
+    border-radius: var(--radius-md);
+    font-family: var(--font-sans);
+    font-size: var(--text-base);
+    line-height: var(--text-base--line-height);
+    font-weight: var(--font-weight-normal);
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    text-decoration: none;
+    user-select: none;
+
+    &[data-highlighted] {
+      background-color: var(--color-background-element);
+    }
+
+    &[data-disabled] {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
+    /* [data-slot="item-label"] { */
+    /* font-size: var(--text-xs); */
+    /* line-height: var(--text-xs--line-height); */
+    /* font-weight: var(--font-weight-normal); */
+    /* } */
+
+    [data-slot="item-indicator"] {
+      /* display: flex; */
+      /* align-items: center; */
+      /* gap: calc(var(--spacing) * 1); */
+      margin-left: auto;
+    }
+  }
+
+  [data-slot="trigger"] {
+    [data-slot="value"] {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    [data-slot="icon"] {
+      /*             "group size-fit shrink-0 text-text-muted transition-transform duration-100": true, */
+      width: fit-content;
+      height: fit-content;
+      flex-shrink: 0;
+    }
+  }
+}
+
+[data-component="select-content"] {
+  /*             "min-w-32 overflow-hidden rounded-md border border-border-subtle/40": true, */
+  /*             "bg-background-panel p-1 shadow-md z-50": true, */
+  /*             "data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95": true, */
+  /*             "data-[expanded]:animate-in data-[expanded]:fade-in-0 data-[expanded]:zoom-in-95": true, */
+  min-width: 8rem;
+  overflow: hidden;
+  border-radius: var(--radius-md);
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--color-smoke-4);
+  background-color: var(--color-smoke-2);
+  padding: calc(var(--spacing) * 1);
+  z-index: 50;
+
+  /* &[data-closed] { */
+  /* animation: fade-out-0 0.2s ease-out; */
+  /* animation-fill-mode: forwards; */
+  /* animation-delay: 0.2s; */
+  /* opacity: 0; */
+  /* } */
+  /* &[data-expanded] { */
+  /* animation: fade-in-0 0.2s ease-out; */
+  /* animation-fill-mode: forwards; */
+  /* animation-delay: 0.2s; */
+  /* opacity: 1; */
+  /* } */
+  [data-slot="list"] {
+    /* overflow-y-auto max-h-48 whitespace-nowrap overflow-x-hidden */
+    overflow-y: auto;
+    max-height: 12rem;
+    white-space: nowrap;
+    overflow-x: hidden;
+  }
+}
diff --git a/packages/css/src/index.css b/packages/css/src/index.css
new file mode 100644
index 000000000..731fc6f3c
--- /dev/null
+++ b/packages/css/src/index.css
@@ -0,0 +1,12 @@
+@layer theme, base, components, utilities;
+
+@import "./color.css" layer(theme);
+@import "./theme.css" layer(theme);
+
+@import "./base.css" layer(base);
+
+@import "./components/button.css" layer(components);
+@import "./components/icon.css" layer(components);
+@import "./components/select.css" layer(components);
+
+@import "./utilities.css" layer(utilities);
diff --git a/packages/css/src/theme.css b/packages/css/src/theme.css
new file mode 100644
index 000000000..9a9dd8d47
--- /dev/null
+++ b/packages/css/src/theme.css
@@ -0,0 +1,536 @@
+:root {
+  --font-sans:
+    ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+  --spacing: 0.25rem;
+
+  --breakpoint-sm: 40rem;
+  --breakpoint-md: 48rem;
+  --breakpoint-lg: 64rem;
+  --breakpoint-xl: 80rem;
+  --breakpoint-2xl: 96rem;
+
+  --container-3xs: 16rem;
+  --container-2xs: 18rem;
+  --container-xs: 20rem;
+  --container-sm: 24rem;
+  --container-md: 28rem;
+  --container-lg: 32rem;
+  --container-xl: 36rem;
+  --container-2xl: 42rem;
+  --container-3xl: 48rem;
+  --container-4xl: 56rem;
+  --container-5xl: 64rem;
+  --container-6xl: 72rem;
+  --container-7xl: 80rem;
+
+  --text-xs: 0.75rem;
+  --text-xs--line-height: calc(1 / 0.75);
+  --text-sm: 0.875rem;
+  --text-sm--line-height: calc(1.25 / 0.875);
+  --text-base: 1rem;
+  --text-base--line-height: calc(1.5 / 1);
+  --text-lg: 1.125rem;
+  --text-lg--line-height: calc(1.75 / 1.125);
+  --text-xl: 1.25rem;
+  --text-xl--line-height: calc(1.75 / 1.25);
+  --text-2xl: 1.5rem;
+  --text-2xl--line-height: calc(2 / 1.5);
+  --text-3xl: 1.875rem;
+  --text-3xl--line-height: calc(2.25 / 1.875);
+  --text-4xl: 2.25rem;
+  --text-4xl--line-height: calc(2.5 / 2.25);
+  --text-5xl: 3rem;
+  --text-5xl--line-height: 1;
+  --text-6xl: 3.75rem;
+  --text-6xl--line-height: 1;
+  --text-7xl: 4.5rem;
+  --text-7xl--line-height: 1;
+  --text-8xl: 6rem;
+  --text-8xl--line-height: 1;
+  --text-9xl: 8rem;
+  --text-9xl--line-height: 1;
+
+  --font-weight-thin: 100;
+  --font-weight-extralight: 200;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  --font-weight-black: 900;
+
+  --tracking-tighter: -0.05em;
+  --tracking-tight: -0.025em;
+  --tracking-normal: 0em;
+  --tracking-wide: 0.025em;
+  --tracking-wider: 0.05em;
+  --tracking-widest: 0.1em;
+
+  --leading-tight: 1.25;
+  --leading-snug: 1.375;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+  --leading-loose: 2;
+
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+  --radius-4xl: 2rem;
+
+  --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+  --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
+  --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
+  --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
+
+  --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
+  --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
+  --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
+  --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
+  --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
+  --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
+
+  --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15);
+  --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2);
+  --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075);
+  --text-shadow-md: 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1);
+  --text-shadow-lg: 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1);
+}
+
+:root {
+  /* OC-1-Light */
+  color-scheme: light;
+  --background-background: var(--smoke-light-1);
+  --background-background-weak: #f7f6f6;
+  --background-background-weaker: #fcfcfc;
+  --surface-default-surface: var(--smoke-light-2);
+  --input-input: var(--smoke-light-1);
+  --input-input-hover: var(--smoke-light-2);
+  --input-input-active: var(--cobalt-light-1);
+  --input-input-selected: var(--cobalt-light-4);
+  --input-input-focus: var(--cobalt-light-1);
+  --input-input-disabled: var(--smoke-light-4);
+  --surface-default-surface-hover: var(--smoke-light-4);
+  --surface-default-surface-active: var(--smoke-light-5);
+  --surface-default-surface-selected: var(--cobalt-light-3);
+  --surface-default-surface-disabled: var(--smoke-light-2);
+  --surface-default-surface-focus: var(--cobalt-light-3);
+  --surface-inset-surface-inset: var(--smoke-light-3);
+  --surface-inset-surface-inset-hover: var(--smoke-light-4);
+  --surface-inset-surface-inset-active: var(--smoke-light-6);
+  --surface-inset-surface-inset-selected: var(--cobalt-light-4);
+  --surface-inset-surface-inset-disabled: var(--smoke-light-3);
+  --surface-inset-surface-inset-focus: var(--cobalt-light-4);
+  --surface-raised-surface-raised: var(--white);
+  --surface-raised-surface-raised-hover: var(--smoke-light-3);
+  --surface-raised-surface-raised-active: var(--smoke-light-4);
+  --surface-raised-surface-raised-selected: var(--cobalt-light-3);
+  --surface-raised-surface-raised-disabled: var(--smoke-light-2);
+  --surface-raised-surface-raised-focus: var(--cobalt-light-3);
+  --surface-overlay-surface-overlay: var(--smoke-light-alpha-9);
+  --surface-brand-surface-brand: var(--yuzu-light-9);
+  --surface-brand-surface-brand-hover: var(--yuzu-light-10);
+  --surface-interactive-surface-interactive: var(--cobalt-light-3);
+  --surface-interactive-surface-interactive-hover: var(--cobalt-light-4);
+  --surface-interactive-surface-interactive-weak: var(--cobalt-light-2);
+  --surface-interactive-surface-interactive-weak-hover: var(--cobalt-light-3);
+  --surface-success-surface-success: var(--apple-light-3);
+  --surface-success-surface-success-weak: var(--apple-light-2);
+  --surface-success-surface-success-strong: var(--apple-light-9);
+  --surface-warning-surface-warning: var(--solaris-light-3);
+  --surface-warning-surface-warning-weak: var(--solaris-light-2);
+  --surface-warning-surface-warning-strong: var(--solaris-light-9);
+  --surface-critical-surface-critical: var(--ember-light-3);
+  --surface-critical-surface-critical-weak: var(--ember-light-2);
+  --surface-critical-surface-critical-strong: var(--ember-light-9);
+  --surface-info-surface-info: var(--lilac-light-3);
+  --surface-info-surface-info-weak: var(--lilac-light-2);
+  --surface-info-surface-info-strong: var(--lilac-light-9);
+  --surface-diff-add-surface-diff-add: var(--coral-light-3);
+  --surface-diff-add-surface-diff-add-weak: var(--coral-light-2);
+  --surface-diff-add-surface-diff-add-weaker: var(--coral-light-1);
+  --surface-diff-add-surface-diff-add-strong: var(--coral-light-9);
+  --surface-diff-add-surface-diff-add-stronger: var(--coral-light-12);
+  --surface-diff-delete-surface-diff-delete: var(--mint-light-3);
+  --surface-on-background-weak-default-surface-on-background-weak: var(--smoke-light-1);
+  --surface-on-background-weak-inset-surface-inset-on-background-weak: var(--smoke-light-1);
+  --surface-on-background-weak-default-surface-on-background-weak-hover: var(--smoke-light-1);
+  --surface-on-background-weak-default-surface-on-background-weak-active: var(--smoke-light-1);
+  --surface-on-background-weak-default-surface-on-background-weak-selected: var(--smoke-light-1);
+  --surface-on-background-weak-default-surface-on-background-weak-disabled: var(--smoke-light-1);
+  --surface-on-background-weak-default-surface-on-background-weak-focus: var(--smoke-light-1);
+  --surface-on-background-weak-inset-surface-inset-on-background-weak-hover: var(--smoke-light-1);
+  --surface-on-background-weak-inset-surface-inset-on-background-weak-active: var(--smoke-light-1);
+  --surface-on-background-weak-inset-surface-inset-on-background-weak-selected: var(--smoke-light-1);
+  --surface-on-background-weak-inset-surface-inset-on-background-weak-disabled: var(--smoke-light-1);
+  --surface-on-background-weak-inset-surface-inset-on-background-weak-focus: var(--smoke-light-1);
+  --surface-diff-delete-surface-diff-delete-weak: var(--mint-light-2);
+  --surface-diff-delete-surface-diff-delete-weaker: var(--mint-light-1);
+  --surface-diff-delete-surface-diff-delete-strong: var(--mint-light-9);
+  --surface-diff-delete-surface-diff-delete-stronger: var(--mint-light-11);
+  --text-default-text: var(--smoke-light-11);
+  --text-default-text-weak: var(--smoke-light-9);
+  --text-default-text-weaker: var(--smoke-light-8);
+  --text-default-text-strong: var(--smoke-light-12);
+  --text-on-brand-text-on-brand: var(--smoke-light-alpha-11);
+  --text-on-interactive-text-on-interactive: var(--smoke-light-alpha-11);
+  --text-on-success-text-on-success: var(--smoke-dark-alpha-11);
+  --text-on-warning-text-on-warning: var(--smoke-dark-alpha-11);
+  --text-on-info-text-on-info: var(--smoke-dark-alpha-11);
+  --text-on-diff-add-text-on-diff-add: var(--smoke-dark-alpha-11);
+  --text-on-diff-delete-text-on-diff-delete: var(--smoke-dark-alpha-11);
+  --text-on-diff-delete-text-weak-on-diff-delete: var(--smoke-dark-alpha-9);
+  --text-on-diff-delete-text-strong-on-diff-delete: var(--smoke-dark-alpha-12);
+  --text-on-diff-add-text-weak-on-diff-add: var(--smoke-dark-alpha-9);
+  --text-on-diff-add-text-strong-on-diff-add: var(--smoke-dark-alpha-12);
+  --text-on-info-text-weak-on-info: var(--smoke-dark-alpha-9);
+  --text-on-info-text-strong-on-info: var(--smoke-dark-alpha-12);
+  --text-on-warning-text-weak-on-warning: var(--smoke-dark-alpha-9);
+  --text-on-warning-text-strong-on-warning: var(--smoke-dark-alpha-12);
+  --text-on-success-text-weak-on-success: var(--smoke-dark-alpha-9);
+  --text-on-success-text-strong-on-success: var(--smoke-dark-alpha-12);
+  --text-on-interactive-text-weak-on-interactive: var(--smoke-light-alpha-9);
+  --text-on-interactive-text-strong-on-interactive: var(--smoke-light-alpha-12);
+  --text-on-brand-text-weak-on-brand: var(--smoke-light-alpha-9);
+  --text-on-brand-text-weaker-on-brand: var(--smoke-light-alpha-8);
+  --text-on-brand-text-strong-on-brand: var(--smoke-light-alpha-12);
+  --border-default-border: var(--smoke-light-alpha-7);
+  --border-default-border-hover: var(--smoke-light-alpha-8);
+  --border-default-border-active: var(--smoke-light-alpha-9);
+  --border-default-border-selected: var(--cobalt-light-alpha-9);
+  --border-default-border-disabled: var(--smoke-light-alpha-8);
+  --border-default-border-focus: var(--smoke-light-alpha-9);
+  --border-default-border-weak: var(--smoke-light-alpha-5);
+  --icon-default-icon: var(--smoke-light-9);
+  --border-default-border-weak-hover: var(--smoke-light-alpha-6);
+  --icon-default-icon-hover: var(--smoke-light-10);
+  --border-default-border-weak-active: var(--smoke-light-alpha-7);
+  --icon-default-icon-active: var(--smoke-light-11);
+  --icon-default-icon-selected: var(--smoke-light-12);
+  --icon-default-icon-disabled: var(--smoke-light-7);
+  --icon-default-icon-focus: var(--smoke-light-12);
+  --icon-default-icon-weak: var(--smoke-light-7);
+  --icon-default-icon-weak-hover: var(--smoke-light-8);
+  --icon-default-icon-weak-active: var(--smoke-light-9);
+  --icon-default-icon-weak-selected: var(--smoke-light-10);
+  --icon-default-icon-weak-disabled: var(--smoke-light-6);
+  --icon-default-icon-weak-focus: var(--smoke-light-9);
+  --icon-default-icon-strong: var(--smoke-light-12);
+  --icon-default-icon-strong-hover: var(--smoke-light-12);
+  --icon-default-icon-strong-active: var(--smoke-light-12);
+  --icon-default-icon-strong-selected: var(--smoke-light-12);
+  --icon-default-icon-strong-disabled: var(--smoke-light-8);
+  --icon-default-icon-strong-focus: var(--smoke-light-12);
+  --border-default-border-weak-selected: var(--cobalt-light-alpha-6);
+  --border-default-border-weak-disabled: var(--smoke-light-alpha-6);
+  --border-default-border-weak-focus: var(--smoke-light-alpha-7);
+  --border-interactive-border-interactive: var(--cobalt-light-7);
+  --border-interactive-border-interactive-hover: var(--cobalt-light-8);
+  --border-interactive-border-interactive-active: var(--cobalt-light-9);
+  --border-interactive-border-interactive-selected: var(--cobalt-light-9);
+  --border-interactive-border-interactive-disabled: var(--smoke-light-8);
+  --border-interactive-border-interactive-focus: var(--cobalt-light-9);
+  --border-success-border-success: var(--apple-light-6);
+  --border-success-border-success-hover: var(--apple-light-7);
+  --border-success-border-success-selected: var(--apple-light-9);
+  --border-warning-border-warning: var(--solaris-light-6);
+  --border-warning-border-warning-hover: var(--solaris-light-7);
+  --border-warning-border-warning-selected: var(--solaris-light-9);
+  --border-critical-border-critical: var(--ember-light-6);
+  --border-critical-border-critical-hover: var(--ember-light-7);
+  --border-critical-border-critical-selected: var(--ember-light-9);
+  --border-info-border-info: var(--lilac-light-6);
+  --border-info-border-info-hover: var(--lilac-light-7);
+  --border-info-border-info-selected: var(--lilac-light-9);
+  --icon-brand-icon-brand: var(--smoke-light-12);
+  --icon-success-icon-success: var(--apple-light-7);
+  --icon-warning-icon-warning: var(--solaris-light-7);
+  --icon-warning-icon-warning-hover: var(--solaris-light-8);
+  --icon-warning-icon-warning-active: var(--solaris-light-11);
+  --icon-success-icon-success-hover: var(--apple-light-8);
+  --icon-success-icon-success-active: var(--apple-light-11);
+  --icon-critical-icon-critical: var(--ember-light-7);
+  --icon-critical-icon-critical-hover: var(--ember-light-8);
+  --icon-critical-icon-critical-active: var(--ember-light-11);
+  --icon-info-icon-info: var(--lilac-light-7);
+  --icon-info-icon-info-hover: var(--lilac-light-8);
+  --icon-info-icon-info-active: var(--lilac-light-11);
+  --icon-on-brand-icon-on-brand: var(--smoke-light-alpha-11);
+  --icon-on-brand-icon-on-brand-hover: var(--smoke-light-alpha-12);
+  --icon-on-brand-icon-on-brand-selected: var(--smoke-light-alpha-12);
+  --icon-on-interactive-icon-on-interactive: var(--smoke-light-alpha-9);
+  --icon-on-interactive-icon-on-interactive-hover: var(--smoke-light-alpha-10);
+  --icon-on-interactive-icon-on-interactive-selected: var(--smoke-light-alpha-11);
+  --icon-on-success-icon-on-success: var(--apple-light-alpha-9);
+  --icon-on-success-icon-on-success-hover: var(--apple-light-alpha-10);
+  --icon-on-success-icon-on-success-selected: var(--apple-light-alpha-11);
+  --icon-on-warning-icon-on-warning: var(--solaris-light-alpha-9);
+  --icon-on-warning-icon-on-warning-hover: var(--solaris-light-alpha-10);
+  --icon-on-warning-icon-on-warning-selected: var(--solaris-light-alpha-11);
+  --icon-on-critical-icon-on-critical: var(--ember-light-alpha-9);
+  --icon-on-critical-icon-on-critical-hover: var(--ember-light-alpha-10);
+  --icon-on-critical-icon-on-critical-selected: var(--ember-light-alpha-11);
+  --icon-on-info-icon-on-info: var(--lilac-light-9);
+  --icon-on-diff-add-icon-on-diff-add: var(--mint-dark-alpha-9);
+  --icon-on-diff-delete-icon-on-diff-delete: var(--coral-light-alpha-9);
+  --icon-on-diff-delete-icon-on-diff-delete-hover: var(--coral-light-alpha-10);
+  --icon-on-diff-delete-icon-on-diff-delete-active: var(--coral-light-alpha-11);
+  --icon-on-diff-add-icon-on-diff-add-hover: var(--mint-dark-alpha-10);
+  --icon-on-diff-add-icon-on-diff-add-active: var(--mint-dark-alpha-11);
+  --icon-on-info-icon-on-info-hover: var(--lilac-light-alpha-10);
+  --icon-on-info-icon-on-info-selected: var(--lilac-light-alpha-11);
+  --syntax-syntax-comment: #ffffff;
+  --syntax-syntax-string: #ffffff;
+  --syntax-syntax-keyword: #ffffff;
+  --syntax-syntax-function: #ffffff;
+  --syntax-syntax-number: #ffffff;
+  --syntax-syntax-operator: #ffffff;
+  --syntax-syntax-variable: #ffffff;
+  --syntax-syntax-type: #ffffff;
+  --syntax-syntax-constant: #ffffff;
+  --syntax-syntax-punctuation: #ffffff;
+  --syntax-syntax-success: #ffffff;
+  --syntax-syntax-warning: #ffffff;
+  --syntax-syntax-critical: #ffffff;
+  --syntax-syntax-info: #ffffff;
+  --markdown-markdown-heading: #ffffff;
+  --markdown-markdown-text: #ffffff;
+  --markdown-markdown-link: #ffffff;
+  --markdown-markdown-link-text: #ffffff;
+  --markdown-markdown-code: #ffffff;
+  --markdown-markdown-block-quote: #ffffff;
+  --markdown-markdown-emph: #ffffff;
+  --markdown-markdown-strong: #ffffff;
+  --markdown-markdown-horizontal-rule: #ffffff;
+  --markdown-markdown-list-item: #ffffff;
+  --markdown-markdown-list-enumeration: #ffffff;
+  --markdown-markdown-image: #ffffff;
+  --markdown-markdown-image-text: #ffffff;
+  --markdown-markdown-code-block: #ffffff;
+
+  .dark {
+    /* OC-1-Dark */
+    color-scheme: dark;
+    --background-background: var(--smoke-dark-1);
+    --background-background-weak: #151313;
+    --background-background-weaker: #201c1c;
+    --surface-default-surface: var(--smoke-dark-3);
+    --input-input: var(--smoke-dark-2);
+    --input-input-hover: var(--smoke-dark-2);
+    --input-input-active: var(--cobalt-dark-1);
+    --input-input-selected: var(--cobalt-dark-2);
+    --input-input-focus: var(--cobalt-dark-1);
+    --input-input-disabled: var(--smoke-dark-4);
+    --surface-default-surface-hover: var(--smoke-dark-4);
+    --surface-default-surface-active: var(--smoke-dark-5);
+    --surface-default-surface-selected: var(--cobalt-dark-3);
+    --surface-default-surface-disabled: var(--smoke-dark-2);
+    --surface-default-surface-focus: var(--cobalt-dark-3);
+    --surface-inset-surface-inset: var(--smoke-dark-4);
+    --surface-inset-surface-inset-hover: var(--smoke-dark-5);
+    --surface-inset-surface-inset-active: var(--smoke-dark-6);
+    --surface-inset-surface-inset-selected: var(--cobalt-dark-4);
+    --surface-inset-surface-inset-disabled: var(--smoke-dark-3);
+    --surface-inset-surface-inset-focus: var(--cobalt-dark-4);
+    --surface-raised-surface-raised: var(--smoke-dark-4);
+    --surface-raised-surface-raised-hover: var(--smoke-dark-7);
+    --surface-raised-surface-raised-active: var(--smoke-dark-8);
+    --surface-raised-surface-raised-selected: var(--cobalt-dark-3);
+    --surface-raised-surface-raised-disabled: var(--smoke-dark-3);
+    --surface-raised-surface-raised-focus: var(--cobalt-dark-3);
+    --surface-overlay-surface-overlay: var(--smoke-dark-alpha-2);
+    --surface-brand-surface-brand: var(--yuzu-light-9);
+    --surface-brand-surface-brand-hover: var(--yuzu-light-10);
+    --surface-interactive-surface-interactive: var(--cobalt-light-3);
+    --surface-interactive-surface-interactive-hover: var(--cobalt-light-4);
+    --surface-interactive-surface-interactive-weak: var(--cobalt-light-2);
+    --surface-interactive-surface-interactive-weak-hover: var(--cobalt-light-3);
+    --surface-success-surface-success: var(--apple-light-3);
+    --surface-success-surface-success-weak: var(--apple-light-2);
+    --surface-success-surface-success-strong: var(--apple-light-9);
+    --surface-warning-surface-warning: var(--solaris-light-3);
+    --surface-warning-surface-warning-weak: var(--solaris-light-2);
+    --surface-warning-surface-warning-strong: var(--solaris-light-9);
+    --surface-critical-surface-critical: var(--ember-light-3);
+    --surface-critical-surface-critical-weak: var(--ember-light-2);
+    --surface-critical-surface-critical-strong: var(--ember-light-9);
+    --surface-info-surface-info: var(--lilac-light-3);
+    --surface-info-surface-info-weak: var(--lilac-light-2);
+    --surface-info-surface-info-strong: var(--lilac-light-9);
+    --surface-diff-add-surface-diff-add: var(--coral-light-3);
+    --surface-diff-add-surface-diff-add-weak: var(--coral-light-2);
+    --surface-diff-add-surface-diff-add-weaker: var(--coral-light-1);
+    --surface-diff-add-surface-diff-add-strong: var(--coral-light-9);
+    --surface-diff-add-surface-diff-add-stronger: var(--coral-light-12);
+    --surface-diff-delete-surface-diff-delete: var(--mint-light-3);
+    --surface-on-background-weak-default-surface-on-background-weak: var(--smoke-dark-1);
+    --surface-on-background-weak-inset-surface-inset-on-background-weak: var(--smoke-light-1);
+    --surface-on-background-weak-default-surface-on-background-weak-hover: var(--smoke-light-1);
+    --surface-on-background-weak-default-surface-on-background-weak-active: var(--smoke-light-1);
+    --surface-on-background-weak-default-surface-on-background-weak-selected: var(--smoke-light-1);
+    --surface-on-background-weak-default-surface-on-background-weak-disabled: var(--smoke-light-1);
+    --surface-on-background-weak-default-surface-on-background-weak-focus: var(--smoke-light-1);
+    --surface-on-background-weak-inset-surface-inset-on-background-weak-hover: var(--smoke-light-1);
+    --surface-on-background-weak-inset-surface-inset-on-background-weak-active: var(--smoke-light-1);
+    --surface-on-background-weak-inset-surface-inset-on-background-weak-selected: var(--smoke-light-1);
+    --surface-on-background-weak-inset-surface-inset-on-background-weak-disabled: var(--smoke-light-1);
+    --surface-on-background-weak-inset-surface-inset-on-background-weak-focus: var(--smoke-light-1);
+    --surface-diff-delete-surface-diff-delete-weak: var(--mint-light-2);
+    --surface-diff-delete-surface-diff-delete-weaker: var(--mint-light-1);
+    --surface-diff-delete-surface-diff-delete-strong: var(--mint-light-9);
+    --surface-diff-delete-surface-diff-delete-stronger: var(--mint-light-11);
+    --text-default-text: var(--smoke-dark-alpha-11);
+    --text-default-text-weak: var(--smoke-dark-alpha-9);
+    --text-default-text-weaker: var(--smoke-dark-alpha-8);
+    --text-default-text-strong: var(--smoke-dark-alpha-12);
+    --text-on-brand-text-on-brand: var(--smoke-dark-alpha-11);
+    --text-on-interactive-text-on-interactive: var(--smoke-dark-alpha-11);
+    --text-on-success-text-on-success: var(--smoke-dark-alpha-11);
+    --text-on-warning-text-on-warning: var(--smoke-dark-alpha-11);
+    --text-on-info-text-on-info: var(--smoke-dark-alpha-11);
+    --text-on-diff-add-text-on-diff-add: var(--smoke-dark-alpha-11);
+    --text-on-diff-delete-text-on-diff-delete: var(--smoke-dark-alpha-11);
+    --text-on-diff-delete-text-weak-on-diff-delete: var(--smoke-dark-alpha-9);
+    --text-on-diff-delete-text-strong-on-diff-delete: var(--smoke-dark-alpha-12);
+    --text-on-diff-add-text-weak-on-diff-add: var(--smoke-dark-alpha-9);
+    --text-on-diff-add-text-strong-on-diff-add: var(--smoke-dark-alpha-12);
+    --text-on-info-text-weak-on-info: var(--smoke-dark-alpha-9);
+    --text-on-info-text-strong-on-info: var(--smoke-dark-alpha-12);
+    --text-on-warning-text-weak-on-warning: var(--smoke-dark-alpha-9);
+    --text-on-warning-text-strong-on-warning: var(--smoke-dark-alpha-12);
+    --text-on-success-text-weak-on-success: var(--smoke-dark-alpha-9);
+    --text-on-success-text-strong-on-success: var(--smoke-dark-alpha-12);
+    --text-on-interactive-text-weak-on-interactive: var(--smoke-dark-alpha-9);
+    --text-on-interactive-text-strong-on-interactive: var(--smoke-dark-alpha-12);
+    --text-on-brand-text-weak-on-brand: var(--smoke-dark-alpha-9);
+    --text-on-brand-text-weaker-on-brand: var(--smoke-dark-alpha-8);
+    --text-on-brand-text-strong-on-brand: var(--smoke-dark-alpha-12);
+    --border-default-border: var(--smoke-dark-alpha-7);
+    --border-default-border-hover: var(--smoke-dark-alpha-8);
+    --border-default-border-active: var(--smoke-dark-alpha-9);
+    --border-default-border-selected: var(--cobalt-dark-alpha-9);
+    --border-default-border-disabled: var(--smoke-dark-alpha-8);
+    --border-default-border-focus: var(--smoke-dark-alpha-9);
+    --border-default-border-weak: var(--smoke-dark-alpha-6);
+    --icon-default-icon: var(--smoke-light-9);
+    --border-default-border-weak-hover: var(--smoke-dark-alpha-7);
+    --icon-default-icon-hover: var(--smoke-light-10);
+    --border-default-border-weak-active: var(--smoke-dark-alpha-8);
+    --icon-default-icon-active: var(--smoke-light-11);
+    --icon-default-icon-selected: var(--smoke-light-12);
+    --icon-default-icon-disabled: var(--smoke-light-7);
+    --icon-default-icon-focus: var(--smoke-light-12);
+    --icon-default-icon-weak: var(--smoke-dark-6);
+    --icon-default-icon-weak-hover: var(--smoke-light-7);
+    --icon-default-icon-weak-active: var(--smoke-light-8);
+    --icon-default-icon-weak-selected: var(--smoke-light-9);
+    --icon-default-icon-weak-disabled: var(--smoke-light-4);
+    --icon-default-icon-weak-focus: var(--smoke-light-9);
+    --icon-default-icon-strong: var(--smoke-dark-12);
+    --icon-default-icon-strong-hover: var(--smoke-light-12);
+    --icon-default-icon-strong-active: var(--smoke-light-12);
+    --icon-default-icon-strong-selected: var(--smoke-light-12);
+    --icon-default-icon-strong-disabled: var(--smoke-light-8);
+    --icon-default-icon-strong-focus: var(--smoke-light-12);
+    --border-default-border-weak-selected: var(--cobalt-dark-alpha-6);
+    --border-default-border-weak-disabled: var(--smoke-dark-alpha-6);
+    --border-default-border-weak-focus: var(--smoke-dark-alpha-8);
+    --border-interactive-border-interactive: var(--cobalt-light-7);
+    --border-interactive-border-interactive-hover: var(--cobalt-light-8);
+    --border-interactive-border-interactive-active: var(--cobalt-light-9);
+    --border-interactive-border-interactive-selected: var(--cobalt-light-9);
+    --border-interactive-border-interactive-disabled: var(--smoke-light-8);
+    --border-interactive-border-interactive-focus: var(--cobalt-light-9);
+    --border-success-border-success: var(--apple-light-6);
+    --border-success-border-success-hover: var(--apple-light-7);
+    --border-success-border-success-selected: var(--apple-light-9);
+    --border-warning-border-warning: var(--solaris-light-6);
+    --border-warning-border-warning-hover: var(--solaris-light-7);
+    --border-warning-border-warning-selected: var(--solaris-light-9);
+    --border-critical-border-critical: var(--ember-light-6);
+    --border-critical-border-critical-hover: var(--ember-light-7);
+    --border-critical-border-critical-selected: var(--ember-light-9);
+    --border-info-border-info: var(--lilac-light-6);
+    --border-info-border-info-hover: var(--lilac-light-7);
+    --border-info-border-info-selected: var(--lilac-light-9);
+    --icon-brand-icon-brand: var(--white);
+    --icon-success-icon-success: var(--apple-light-7);
+    --icon-warning-icon-warning: var(--solaris-light-7);
+    --icon-warning-icon-warning-hover: var(--solaris-light-8);
+    --icon-warning-icon-warning-active: var(--solaris-light-11);
+    --icon-success-icon-success-hover: var(--apple-light-8);
+    --icon-success-icon-success-active: var(--apple-light-11);
+    --icon-critical-icon-critical: var(--ember-light-7);
+    --icon-critical-icon-critical-hover: var(--ember-light-8);
+    --icon-critical-icon-critical-active: var(--ember-light-11);
+    --icon-info-icon-info: var(--lilac-light-7);
+    --icon-info-icon-info-hover: var(--lilac-light-8);
+    --icon-info-icon-info-active: var(--lilac-light-11);
+    --icon-on-brand-icon-on-brand: var(--smoke-light-alpha-11);
+    --icon-on-brand-icon-on-brand-hover: var(--smoke-light-alpha-12);
+    --icon-on-brand-icon-on-brand-selected: var(--smoke-light-alpha-12);
+    --icon-on-interactive-icon-on-interactive: var(--smoke-dark-alpha-9);
+    --icon-on-interactive-icon-on-interactive-hover: var(--smoke-dark-alpha-10);
+    --icon-on-interactive-icon-on-interactive-selected: var(--smoke-dark-alpha-11);
+    --icon-on-success-icon-on-success: var(--apple-light-alpha-9);
+    --icon-on-success-icon-on-success-hover: var(--apple-light-alpha-10);
+    --icon-on-success-icon-on-success-selected: var(--apple-light-alpha-11);
+    --icon-on-warning-icon-on-warning: var(--solaris-light-alpha-9);
+    --icon-on-warning-icon-on-warning-hover: var(--solaris-light-alpha-10);
+    --icon-on-warning-icon-on-warning-selected: var(--solaris-light-alpha-11);
+    --icon-on-critical-icon-on-critical: var(--ember-light-alpha-9);
+    --icon-on-critical-icon-on-critical-hover: var(--ember-light-alpha-10);
+    --icon-on-critical-icon-on-critical-selected: var(--ember-light-alpha-11);
+    --icon-on-info-icon-on-info: var(--lilac-light-9);
+    --icon-on-diff-add-icon-on-diff-add: var(--mint-dark-alpha-9);
+    --icon-on-diff-delete-icon-on-diff-delete: var(--coral-light-alpha-9);
+    --icon-on-diff-delete-icon-on-diff-delete-hover: var(--coral-light-alpha-10);
+    --icon-on-diff-delete-icon-on-diff-delete-active: var(--coral-light-alpha-11);
+    --icon-on-diff-add-icon-on-diff-add-hover: var(--mint-dark-alpha-10);
+    --icon-on-diff-add-icon-on-diff-add-active: var(--mint-dark-alpha-11);
+    --icon-on-info-icon-on-info-hover: var(--lilac-light-alpha-10);
+    --icon-on-info-icon-on-info-selected: var(--lilac-light-alpha-11);
+    --syntax-syntax-comment: #ffffff;
+    --syntax-syntax-string: #ffffff;
+    --syntax-syntax-keyword: #ffffff;
+    --syntax-syntax-function: #ffffff;
+    --syntax-syntax-number: #ffffff;
+    --syntax-syntax-operator: #ffffff;
+    --syntax-syntax-variable: #ffffff;
+    --syntax-syntax-type: #ffffff;
+    --syntax-syntax-constant: #ffffff;
+    --syntax-syntax-punctuation: #ffffff;
+    --syntax-syntax-success: #ffffff;
+    --syntax-syntax-warning: #ffffff;
+    --syntax-syntax-critical: #ffffff;
+    --syntax-syntax-info: #ffffff;
+    --markdown-markdown-heading: #ffffff;
+    --markdown-markdown-text: #ffffff;
+    --markdown-markdown-link: #ffffff;
+    --markdown-markdown-link-text: #ffffff;
+    --markdown-markdown-code: #ffffff;
+    --markdown-markdown-block-quote: #ffffff;
+    --markdown-markdown-emph: #ffffff;
+    --markdown-markdown-strong: #ffffff;
+    --markdown-markdown-horizontal-rule: #ffffff;
+    --markdown-markdown-list-item: #ffffff;
+    --markdown-markdown-list-enumeration: #ffffff;
+    --markdown-markdown-image: #ffffff;
+    --markdown-markdown-image-text: #ffffff;
+    --markdown-markdown-code-block: #ffffff;
+  }
+}
diff --git a/packages/css/src/utilities.css b/packages/css/src/utilities.css
new file mode 100644
index 000000000..213a51680
--- /dev/null
+++ b/packages/css/src/utilities.css
@@ -0,0 +1,14 @@
+:root {
+  interpolate-size: allow-keywords;
+}
+
+.no-scrollbar {
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  & {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}