Vendor opencode source for docker build
This commit is contained in:
southseact-3d
130
opencode/packages/ui/src/styles/animations.css
Normal file
130
opencode/packages/ui/src/styles/animations.css
Normal file
@@ -0,0 +1,130 @@
|
||||
:root {
|
||||
--animate-pulse: pulse-opacity 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-opacity {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-opacity-dim {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(5px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-up-text {
|
||||
animation: fadeUp 0.4s ease-out forwards;
|
||||
opacity: 0;
|
||||
|
||||
&:nth-child(1) {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
&:nth-child(5) {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
&:nth-child(6) {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
&:nth-child(7) {
|
||||
animation-delay: 0.7s;
|
||||
}
|
||||
&:nth-child(8) {
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
&:nth-child(9) {
|
||||
animation-delay: 0.9s;
|
||||
}
|
||||
&:nth-child(10) {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
&:nth-child(11) {
|
||||
animation-delay: 1.1s;
|
||||
}
|
||||
&:nth-child(12) {
|
||||
animation-delay: 1.2s;
|
||||
}
|
||||
&:nth-child(13) {
|
||||
animation-delay: 1.3s;
|
||||
}
|
||||
&:nth-child(14) {
|
||||
animation-delay: 1.4s;
|
||||
}
|
||||
&:nth-child(15) {
|
||||
animation-delay: 1.5s;
|
||||
}
|
||||
&:nth-child(16) {
|
||||
animation-delay: 1.6s;
|
||||
}
|
||||
&:nth-child(17) {
|
||||
animation-delay: 1.7s;
|
||||
}
|
||||
&:nth-child(18) {
|
||||
animation-delay: 1.8s;
|
||||
}
|
||||
&:nth-child(19) {
|
||||
animation-delay: 1.9s;
|
||||
}
|
||||
&:nth-child(20) {
|
||||
animation-delay: 2s;
|
||||
}
|
||||
&:nth-child(21) {
|
||||
animation-delay: 2.1s;
|
||||
}
|
||||
&:nth-child(22) {
|
||||
animation-delay: 2.2s;
|
||||
}
|
||||
&:nth-child(23) {
|
||||
animation-delay: 2.3s;
|
||||
}
|
||||
&:nth-child(24) {
|
||||
animation-delay: 2.4s;
|
||||
}
|
||||
&:nth-child(25) {
|
||||
animation-delay: 2.5s;
|
||||
}
|
||||
&:nth-child(26) {
|
||||
animation-delay: 2.6s;
|
||||
}
|
||||
&:nth-child(27) {
|
||||
animation-delay: 2.7s;
|
||||
}
|
||||
&:nth-child(28) {
|
||||
animation-delay: 2.8s;
|
||||
}
|
||||
&:nth-child(29) {
|
||||
animation-delay: 2.9s;
|
||||
}
|
||||
&:nth-child(30) {
|
||||
animation-delay: 3s;
|
||||
}
|
||||
}
|
||||
393
opencode/packages/ui/src/styles/base.css
Normal file
393
opencode/packages/ui/src/styles/base.css
Normal file
@@ -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: var(--line-height-large); /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
tab-size: 4; /* 3 */
|
||||
font-family: var(--font-family-sans); /* 4 */
|
||||
font-feature-settings: var(--font-family-sans--font-feature-settings, normal); /* 5 */
|
||||
font-variation-settings: var(--font-family-sans--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;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
*[data-tauri-drag-region] {
|
||||
app-region: drag;
|
||||
}
|
||||
|
||||
/*
|
||||
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: var(--font-family-mono); /* 1 */
|
||||
font-feature-settings: var(--font-family-mono--font-feature-settings, normal); /* 2 */
|
||||
font-variation-settings: var(--font-family-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;
|
||||
}
|
||||
|
||||
/*
|
||||
Prevent iOS Safari from auto-zooming on input focus.
|
||||
iOS WebKit zooms on any input with font-size < 16px as an accessibility feature.
|
||||
*/
|
||||
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
input,
|
||||
select,
|
||||
textarea,
|
||||
[contenteditable="true"] {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
592
opencode/packages/ui/src/styles/colors.css
Normal file
592
opencode/packages/ui/src/styles/colors.css
Normal file
@@ -0,0 +1,592 @@
|
||||
:root {
|
||||
--smoke-dark-1: #131010;
|
||||
--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: #82383803;
|
||||
--smoke-dark-alpha-2: #e6c6c60b;
|
||||
--smoke-dark-alpha-3: #edd5d516;
|
||||
--smoke-dark-alpha-4: #f2e1e11e;
|
||||
--smoke-dark-alpha-5: #f5e8e826;
|
||||
--smoke-dark-alpha-6: #f5e8e831;
|
||||
--smoke-dark-alpha-7: #f7ecec3f;
|
||||
--smoke-dark-alpha-8: #faf5f559;
|
||||
--smoke-dark-alpha-9: #faf5f467;
|
||||
--smoke-dark-alpha-10: #fbf5f576;
|
||||
--smoke-dark-alpha-11: #fcf9f9b2;
|
||||
--smoke-dark-alpha-12: #fdfbfbf0;
|
||||
--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-light-8: #73a4ff;
|
||||
--cobalt-dark-alpha-12: #cde2ff;
|
||||
--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;
|
||||
--black: #000000;
|
||||
--white: #ffffff;
|
||||
--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;
|
||||
--blue-dark-1: #0e161f;
|
||||
--blue-dark-2: #0f1b2d;
|
||||
--blue-dark-3: #0f233c;
|
||||
--blue-dark-4: #10294b;
|
||||
--blue-dark-5: #0e2f57;
|
||||
--blue-dark-6: #0c3768;
|
||||
--blue-dark-7: #094280;
|
||||
--blue-dark-8: #0854a4;
|
||||
--blue-dark-9: #0091ff;
|
||||
--blue-dark-10: #389eff;
|
||||
--blue-dark-11: #51a8ff;
|
||||
--blue-dark-12: #eaf6ff;
|
||||
--blue-light-1: #f9fcff;
|
||||
--blue-light-2: #f5faff;
|
||||
--blue-light-3: #eaf4ff;
|
||||
--blue-light-4: #e0efff;
|
||||
--blue-light-5: #cde6fd;
|
||||
--blue-light-6: #b9d9f8;
|
||||
--blue-light-7: #96c7f2;
|
||||
--blue-light-8: #5cafee;
|
||||
--blue-light-9: #0091ff;
|
||||
--blue-light-10: #007fef;
|
||||
--blue-light-11: #0069db;
|
||||
--blue-light-12: #00254d;
|
||||
--blue-dark-alpha-1: #00000000;
|
||||
--blue-dark-alpha-2: #0c58fc0f;
|
||||
--blue-dark-alpha-3: #1576fd23;
|
||||
--blue-dark-alpha-4: #1576fd33;
|
||||
--blue-dark-alpha-5: #107bfd3f;
|
||||
--blue-dark-alpha-6: #0a7cff51;
|
||||
--blue-dark-alpha-7: #057dff70;
|
||||
--blue-dark-alpha-8: #057dff99;
|
||||
--blue-dark-alpha-9: #0094fff9;
|
||||
--blue-dark-alpha-10: #38a2fff9;
|
||||
--blue-dark-alpha-11: #51abfff9;
|
||||
--blue-dark-alpha-12: #effbfff9;
|
||||
--blue-light-alpha-1: #0582ff05;
|
||||
--blue-light-alpha-2: #0582ff0a;
|
||||
--blue-light-alpha-3: #007fff11;
|
||||
--blue-light-alpha-4: #007fff1e;
|
||||
--blue-light-alpha-5: #017fee30;
|
||||
--blue-light-alpha-6: #0176e447;
|
||||
--blue-light-alpha-7: #0077e068;
|
||||
--blue-light-alpha-8: #0082e5a0;
|
||||
--blue-light-alpha-9: #0090fff9;
|
||||
--blue-light-alpha-10: #007feff9;
|
||||
--blue-light-alpha-11: #0066dbf9;
|
||||
--blue-light-alpha-12: #002047f9;
|
||||
--ink-dark-1: #101313;
|
||||
--ink-dark-2: #181b1b;
|
||||
--ink-dark-3: #212525;
|
||||
--ink-dark-4: #282d2d;
|
||||
--ink-dark-5: #303434;
|
||||
--ink-dark-6: #393e3e;
|
||||
--ink-dark-7: #464b4b;
|
||||
--ink-dark-8: #5f6464;
|
||||
--ink-dark-9: #6b7171;
|
||||
--ink-dark-10: #797f7f;
|
||||
--ink-dark-11: #b1b7b7;
|
||||
--ink-dark-12: #ecf1f1;
|
||||
--ink-light-1: #fcfdfd;
|
||||
--ink-light-2: #f8f9f9;
|
||||
--ink-light-3: #f0f1f1;
|
||||
--ink-light-4: #e8e9e9;
|
||||
--ink-light-5: #e0e2e2;
|
||||
--ink-light-6: #d9dada;
|
||||
--ink-light-7: #cdcfcf;
|
||||
--ink-light-8: #bbbcbc;
|
||||
--ink-light-9: #8b8e8e;
|
||||
--ink-light-10: #818484;
|
||||
--ink-light-11: #636565;
|
||||
--ink-light-12: #1e2121;
|
||||
--ink-dark-alpha-1: #38828203;
|
||||
--ink-dark-alpha-2: #c6e6e60b;
|
||||
--ink-dark-alpha-3: #d5eded16;
|
||||
--ink-dark-alpha-4: #e1f2f21e;
|
||||
--ink-dark-alpha-5: #e8f5f526;
|
||||
--ink-dark-alpha-6: #e8f5f531;
|
||||
--ink-dark-alpha-7: #ecf7f73f;
|
||||
--ink-dark-alpha-8: #f5fafa59;
|
||||
--ink-dark-alpha-9: #f4fafa67;
|
||||
--ink-dark-alpha-10: #f5fbfb76;
|
||||
--ink-dark-alpha-11: #f9fcfcb2;
|
||||
--ink-dark-alpha-12: #fbfdfdf0;
|
||||
--ink-light-alpha-1: #00555503;
|
||||
--ink-light-alpha-2: #00252507;
|
||||
--ink-light-alpha-3: #0011110f;
|
||||
--ink-light-alpha-4: #000c0c17;
|
||||
--ink-light-alpha-5: #0011111f;
|
||||
--ink-light-alpha-6: #00070726;
|
||||
--ink-light-alpha-7: #000b0b32;
|
||||
--ink-light-alpha-8: #00040444;
|
||||
--ink-light-alpha-9: #00070774;
|
||||
--ink-light-alpha-10: #0004049c;
|
||||
--ink-light-alpha-11: #0007077e;
|
||||
--ink-light-alpha-12: #000202df;
|
||||
--amber-light-1: #fefdfb;
|
||||
--amber-light-2: #fff9ed;
|
||||
--amber-light-3: #fff4d5;
|
||||
--amber-light-4: #ffecbc;
|
||||
--amber-light-5: #ffe3a2;
|
||||
--amber-light-6: #ffd386;
|
||||
--amber-light-7: #f3ba63;
|
||||
--amber-light-8: #ee9d2b;
|
||||
--amber-light-9: #ffb224;
|
||||
--amber-light-10: #ffa01c;
|
||||
--amber-light-11: #ad5700;
|
||||
--amber-light-12: #4e2009;
|
||||
--amber-dark-1: #1f1300;
|
||||
--amber-dark-2: #271700;
|
||||
--amber-dark-3: #341c00;
|
||||
--amber-dark-4: #3f2200;
|
||||
--amber-dark-5: #4a2900;
|
||||
--amber-dark-6: #573300;
|
||||
--amber-dark-7: #693f05;
|
||||
--amber-dark-8: #824e00;
|
||||
--amber-dark-9: #ffb224;
|
||||
--amber-dark-10: #ffcb47;
|
||||
--amber-dark-11: #f1a10d;
|
||||
--amber-dark-12: #fef3dd;
|
||||
--amber-light-alpha-1: #c0820505;
|
||||
--amber-light-alpha-2: #ffab0211;
|
||||
--amber-light-alpha-3: #ffbb012b;
|
||||
--amber-light-alpha-4: #ffb70042;
|
||||
--amber-light-alpha-5: #ffb3005e;
|
||||
--amber-light-alpha-6: #ffa20177;
|
||||
--amber-light-alpha-7: #ec8d009b;
|
||||
--amber-light-alpha-8: #ea8900d3;
|
||||
--amber-light-alpha-9: #ffa600db;
|
||||
--amber-light-alpha-10: #ff9500e2;
|
||||
--amber-light-alpha-11: #ab5300f9;
|
||||
--amber-light-alpha-12: #481800f4;
|
||||
--amber-dark-alpha-1: #00000000;
|
||||
--amber-dark-alpha-2: #fd83000a;
|
||||
--amber-dark-alpha-3: #fe730016;
|
||||
--amber-dark-alpha-4: #ff7b0023;
|
||||
--amber-dark-alpha-5: #ff840030;
|
||||
--amber-dark-alpha-6: #ff95003f;
|
||||
--amber-dark-alpha-7: #ff970f54;
|
||||
--amber-dark-alpha-8: #ff990070;
|
||||
--amber-dark-alpha-9: #ffb625f9;
|
||||
--amber-dark-alpha-10: #ffce48f9;
|
||||
--amber-dark-alpha-11: #ffab0eef;
|
||||
--amber-dark-alpha-12: #fff8e1f9;
|
||||
}
|
||||
55
opencode/packages/ui/src/styles/index.css
Normal file
55
opencode/packages/ui/src/styles/index.css
Normal file
@@ -0,0 +1,55 @@
|
||||
@layer theme, base, components, utilities;
|
||||
|
||||
@import "./colors.css" layer(theme);
|
||||
@import "./theme.css" layer(theme);
|
||||
|
||||
@import "./base.css" layer(base);
|
||||
@import "katex/dist/katex.min.css" layer(base);
|
||||
|
||||
@import "../components/accordion.css" layer(components);
|
||||
@import "../components/app-icon.css" layer(components);
|
||||
@import "../components/avatar.css" layer(components);
|
||||
@import "../components/basic-tool.css" layer(components);
|
||||
@import "../components/button.css" layer(components);
|
||||
@import "../components/card.css" layer(components);
|
||||
@import "../components/checkbox.css" layer(components);
|
||||
@import "../components/code.css" layer(components);
|
||||
@import "../components/collapsible.css" layer(components);
|
||||
@import "../components/diff.css" layer(components);
|
||||
@import "../components/diff-changes.css" layer(components);
|
||||
@import "../components/context-menu.css" layer(components);
|
||||
@import "../components/dropdown-menu.css" layer(components);
|
||||
@import "../components/dialog.css" layer(components);
|
||||
@import "../components/file-icon.css" layer(components);
|
||||
@import "../components/hover-card.css" layer(components);
|
||||
@import "../components/provider-icon.css" layer(components);
|
||||
@import "../components/icon.css" layer(components);
|
||||
@import "../components/icon-button.css" layer(components);
|
||||
@import "../components/image-preview.css" layer(components);
|
||||
@import "../components/keybind.css" layer(components);
|
||||
@import "../components/line-comment.css" layer(components);
|
||||
@import "../components/text-field.css" layer(components);
|
||||
@import "../components/inline-input.css" layer(components);
|
||||
@import "../components/list.css" layer(components);
|
||||
@import "../components/logo.css" layer(components);
|
||||
@import "../components/markdown.css" layer(components);
|
||||
@import "../components/message-part.css" layer(components);
|
||||
@import "../components/message-nav.css" layer(components);
|
||||
@import "../components/popover.css" layer(components);
|
||||
@import "../components/progress-circle.css" layer(components);
|
||||
@import "../components/radio-group.css" layer(components);
|
||||
@import "../components/resize-handle.css" layer(components);
|
||||
@import "../components/select.css" layer(components);
|
||||
@import "../components/spinner.css" layer(components);
|
||||
@import "../components/switch.css" layer(components);
|
||||
@import "../components/session-review.css" layer(components);
|
||||
@import "../components/session-turn.css" layer(components);
|
||||
@import "../components/sticky-accordion-header.css" layer(components);
|
||||
@import "../components/tabs.css" layer(components);
|
||||
@import "../components/tag.css" layer(components);
|
||||
@import "../components/toast.css" layer(components);
|
||||
@import "../components/tooltip.css" layer(components);
|
||||
@import "../components/typewriter.css" layer(components);
|
||||
|
||||
@import "./utilities.css" layer(utilities);
|
||||
@import "./animations.css" layer(utilities);
|
||||
244
opencode/packages/ui/src/styles/tailwind/colors.css
Normal file
244
opencode/packages/ui/src/styles/tailwind/colors.css
Normal file
@@ -0,0 +1,244 @@
|
||||
/* Generated by script/colors.ts */
|
||||
/* Do not edit this file manually */
|
||||
|
||||
@theme {
|
||||
--color-*: initial;
|
||||
--color-background-base: var(--background-base);
|
||||
--color-background-weak: var(--background-weak);
|
||||
--color-background-strong: var(--background-strong);
|
||||
--color-background-stronger: var(--background-stronger);
|
||||
--color-surface-base: var(--surface-base);
|
||||
--color-base: var(--base);
|
||||
--color-surface-base-hover: var(--surface-base-hover);
|
||||
--color-surface-base-active: var(--surface-base-active);
|
||||
--color-surface-base-interactive-active: var(--surface-base-interactive-active);
|
||||
--color-base2: var(--base2);
|
||||
--color-base3: var(--base3);
|
||||
--color-surface-inset-base: var(--surface-inset-base);
|
||||
--color-surface-inset-base-hover: var(--surface-inset-base-hover);
|
||||
--color-surface-inset-strong: var(--surface-inset-strong);
|
||||
--color-surface-inset-strong-hover: var(--surface-inset-strong-hover);
|
||||
--color-surface-raised-base: var(--surface-raised-base);
|
||||
--color-surface-float-base: var(--surface-float-base);
|
||||
--color-surface-float-base-hover: var(--surface-float-base-hover);
|
||||
--color-surface-raised-base-hover: var(--surface-raised-base-hover);
|
||||
--color-surface-raised-base-active: var(--surface-raised-base-active);
|
||||
--color-surface-raised-strong: var(--surface-raised-strong);
|
||||
--color-surface-raised-strong-hover: var(--surface-raised-strong-hover);
|
||||
--color-surface-raised-stronger: var(--surface-raised-stronger);
|
||||
--color-surface-raised-stronger-hover: var(--surface-raised-stronger-hover);
|
||||
--color-surface-weak: var(--surface-weak);
|
||||
--color-surface-weaker: var(--surface-weaker);
|
||||
--color-surface-strong: var(--surface-strong);
|
||||
--color-surface-raised-stronger-non-alpha: var(--surface-raised-stronger-non-alpha);
|
||||
--color-surface-brand-base: var(--surface-brand-base);
|
||||
--color-surface-brand-hover: var(--surface-brand-hover);
|
||||
--color-surface-interactive-base: var(--surface-interactive-base);
|
||||
--color-surface-interactive-hover: var(--surface-interactive-hover);
|
||||
--color-surface-interactive-weak: var(--surface-interactive-weak);
|
||||
--color-surface-interactive-weak-hover: var(--surface-interactive-weak-hover);
|
||||
--color-surface-success-base: var(--surface-success-base);
|
||||
--color-surface-success-weak: var(--surface-success-weak);
|
||||
--color-surface-success-strong: var(--surface-success-strong);
|
||||
--color-surface-warning-base: var(--surface-warning-base);
|
||||
--color-surface-warning-weak: var(--surface-warning-weak);
|
||||
--color-surface-warning-strong: var(--surface-warning-strong);
|
||||
--color-surface-critical-base: var(--surface-critical-base);
|
||||
--color-surface-critical-weak: var(--surface-critical-weak);
|
||||
--color-surface-critical-strong: var(--surface-critical-strong);
|
||||
--color-surface-info-base: var(--surface-info-base);
|
||||
--color-surface-info-weak: var(--surface-info-weak);
|
||||
--color-surface-info-strong: var(--surface-info-strong);
|
||||
--color-surface-diff-unchanged-base: var(--surface-diff-unchanged-base);
|
||||
--color-surface-diff-skip-base: var(--surface-diff-skip-base);
|
||||
--color-surface-diff-hidden-base: var(--surface-diff-hidden-base);
|
||||
--color-surface-diff-hidden-weak: var(--surface-diff-hidden-weak);
|
||||
--color-surface-diff-hidden-weaker: var(--surface-diff-hidden-weaker);
|
||||
--color-surface-diff-hidden-strong: var(--surface-diff-hidden-strong);
|
||||
--color-surface-diff-hidden-stronger: var(--surface-diff-hidden-stronger);
|
||||
--color-surface-diff-add-base: var(--surface-diff-add-base);
|
||||
--color-surface-diff-add-weak: var(--surface-diff-add-weak);
|
||||
--color-surface-diff-add-weaker: var(--surface-diff-add-weaker);
|
||||
--color-surface-diff-add-strong: var(--surface-diff-add-strong);
|
||||
--color-surface-diff-add-stronger: var(--surface-diff-add-stronger);
|
||||
--color-surface-diff-delete-base: var(--surface-diff-delete-base);
|
||||
--color-surface-diff-delete-weak: var(--surface-diff-delete-weak);
|
||||
--color-surface-diff-delete-weaker: var(--surface-diff-delete-weaker);
|
||||
--color-surface-diff-delete-strong: var(--surface-diff-delete-strong);
|
||||
--color-surface-diff-delete-stronger: var(--surface-diff-delete-stronger);
|
||||
--color-text-base: var(--text-base);
|
||||
--color-input-base: var(--input-base);
|
||||
--color-input-hover: var(--input-hover);
|
||||
--color-input-active: var(--input-active);
|
||||
--color-input-selected: var(--input-selected);
|
||||
--color-input-focus: var(--input-focus);
|
||||
--color-input-disabled: var(--input-disabled);
|
||||
--color-text-weak: var(--text-weak);
|
||||
--color-text-weaker: var(--text-weaker);
|
||||
--color-text-strong: var(--text-strong);
|
||||
--color-text-interactive-base: var(--text-interactive-base);
|
||||
--color-text-invert-base: var(--text-invert-base);
|
||||
--color-text-invert-weak: var(--text-invert-weak);
|
||||
--color-text-invert-weaker: var(--text-invert-weaker);
|
||||
--color-text-invert-strong: var(--text-invert-strong);
|
||||
--color-text-on-brand-base: var(--text-on-brand-base);
|
||||
--color-text-on-interactive-base: var(--text-on-interactive-base);
|
||||
--color-text-on-interactive-weak: var(--text-on-interactive-weak);
|
||||
--color-text-on-success-base: var(--text-on-success-base);
|
||||
--color-text-on-critical-base: var(--text-on-critical-base);
|
||||
--color-text-on-critical-weak: var(--text-on-critical-weak);
|
||||
--color-text-on-critical-strong: var(--text-on-critical-strong);
|
||||
--color-text-on-warning-base: var(--text-on-warning-base);
|
||||
--color-text-on-info-base: var(--text-on-info-base);
|
||||
--color-text-diff-add-base: var(--text-diff-add-base);
|
||||
--color-text-diff-delete-base: var(--text-diff-delete-base);
|
||||
--color-text-diff-delete-strong: var(--text-diff-delete-strong);
|
||||
--color-text-diff-add-strong: var(--text-diff-add-strong);
|
||||
--color-text-on-info-weak: var(--text-on-info-weak);
|
||||
--color-text-on-info-strong: var(--text-on-info-strong);
|
||||
--color-text-on-warning-weak: var(--text-on-warning-weak);
|
||||
--color-text-on-warning-strong: var(--text-on-warning-strong);
|
||||
--color-text-on-success-weak: var(--text-on-success-weak);
|
||||
--color-text-on-success-strong: var(--text-on-success-strong);
|
||||
--color-text-on-brand-weak: var(--text-on-brand-weak);
|
||||
--color-text-on-brand-weaker: var(--text-on-brand-weaker);
|
||||
--color-text-on-brand-strong: var(--text-on-brand-strong);
|
||||
--color-button-secondary-base: var(--button-secondary-base);
|
||||
--color-button-secondary-hover: var(--button-secondary-hover);
|
||||
--color-border-base: var(--border-base);
|
||||
--color-border-hover: var(--border-hover);
|
||||
--color-border-active: var(--border-active);
|
||||
--color-border-selected: var(--border-selected);
|
||||
--color-border-disabled: var(--border-disabled);
|
||||
--color-border-focus: var(--border-focus);
|
||||
--color-border-weak-base: var(--border-weak-base);
|
||||
--color-border-strong-base: var(--border-strong-base);
|
||||
--color-border-strong-hover: var(--border-strong-hover);
|
||||
--color-border-strong-active: var(--border-strong-active);
|
||||
--color-border-strong-selected: var(--border-strong-selected);
|
||||
--color-border-strong-disabled: var(--border-strong-disabled);
|
||||
--color-border-strong-focus: var(--border-strong-focus);
|
||||
--color-border-weak-hover: var(--border-weak-hover);
|
||||
--color-border-weak-active: var(--border-weak-active);
|
||||
--color-border-weak-selected: var(--border-weak-selected);
|
||||
--color-border-weak-disabled: var(--border-weak-disabled);
|
||||
--color-border-weak-focus: var(--border-weak-focus);
|
||||
--color-border-interactive-base: var(--border-interactive-base);
|
||||
--color-border-interactive-hover: var(--border-interactive-hover);
|
||||
--color-border-interactive-active: var(--border-interactive-active);
|
||||
--color-border-interactive-selected: var(--border-interactive-selected);
|
||||
--color-border-interactive-disabled: var(--border-interactive-disabled);
|
||||
--color-border-interactive-focus: var(--border-interactive-focus);
|
||||
--color-border-success-base: var(--border-success-base);
|
||||
--color-border-success-hover: var(--border-success-hover);
|
||||
--color-border-success-selected: var(--border-success-selected);
|
||||
--color-border-warning-base: var(--border-warning-base);
|
||||
--color-border-warning-hover: var(--border-warning-hover);
|
||||
--color-border-warning-selected: var(--border-warning-selected);
|
||||
--color-border-critical-base: var(--border-critical-base);
|
||||
--color-border-critical-hover: var(--border-critical-hover);
|
||||
--color-border-critical-selected: var(--border-critical-selected);
|
||||
--color-border-info-base: var(--border-info-base);
|
||||
--color-border-info-hover: var(--border-info-hover);
|
||||
--color-border-info-selected: var(--border-info-selected);
|
||||
--color-icon-base: var(--icon-base);
|
||||
--color-icon-hover: var(--icon-hover);
|
||||
--color-icon-active: var(--icon-active);
|
||||
--color-icon-selected: var(--icon-selected);
|
||||
--color-icon-disabled: var(--icon-disabled);
|
||||
--color-icon-focus: var(--icon-focus);
|
||||
--color-icon-invert-base: var(--icon-invert-base);
|
||||
--color-icon-weak-base: var(--icon-weak-base);
|
||||
--color-icon-weak-hover: var(--icon-weak-hover);
|
||||
--color-icon-weak-active: var(--icon-weak-active);
|
||||
--color-icon-weak-selected: var(--icon-weak-selected);
|
||||
--color-icon-weak-disabled: var(--icon-weak-disabled);
|
||||
--color-icon-weak-focus: var(--icon-weak-focus);
|
||||
--color-icon-strong-base: var(--icon-strong-base);
|
||||
--color-icon-strong-hover: var(--icon-strong-hover);
|
||||
--color-icon-strong-active: var(--icon-strong-active);
|
||||
--color-icon-strong-selected: var(--icon-strong-selected);
|
||||
--color-icon-strong-disabled: var(--icon-strong-disabled);
|
||||
--color-icon-strong-focus: var(--icon-strong-focus);
|
||||
--color-icon-brand-base: var(--icon-brand-base);
|
||||
--color-icon-interactive-base: var(--icon-interactive-base);
|
||||
--color-icon-success-base: var(--icon-success-base);
|
||||
--color-icon-success-hover: var(--icon-success-hover);
|
||||
--color-icon-success-active: var(--icon-success-active);
|
||||
--color-icon-warning-base: var(--icon-warning-base);
|
||||
--color-icon-warning-hover: var(--icon-warning-hover);
|
||||
--color-icon-warning-active: var(--icon-warning-active);
|
||||
--color-icon-critical-base: var(--icon-critical-base);
|
||||
--color-icon-critical-hover: var(--icon-critical-hover);
|
||||
--color-icon-critical-active: var(--icon-critical-active);
|
||||
--color-icon-info-base: var(--icon-info-base);
|
||||
--color-icon-info-hover: var(--icon-info-hover);
|
||||
--color-icon-info-active: var(--icon-info-active);
|
||||
--color-icon-on-brand-base: var(--icon-on-brand-base);
|
||||
--color-icon-on-brand-hover: var(--icon-on-brand-hover);
|
||||
--color-icon-on-brand-selected: var(--icon-on-brand-selected);
|
||||
--color-icon-on-interactive-base: var(--icon-on-interactive-base);
|
||||
--color-icon-agent-plan-base: var(--icon-agent-plan-base);
|
||||
--color-icon-agent-docs-base: var(--icon-agent-docs-base);
|
||||
--color-icon-agent-ask-base: var(--icon-agent-ask-base);
|
||||
--color-icon-agent-build-base: var(--icon-agent-build-base);
|
||||
--color-icon-on-success-base: var(--icon-on-success-base);
|
||||
--color-icon-on-success-hover: var(--icon-on-success-hover);
|
||||
--color-icon-on-success-selected: var(--icon-on-success-selected);
|
||||
--color-icon-on-warning-base: var(--icon-on-warning-base);
|
||||
--color-icon-on-warning-hover: var(--icon-on-warning-hover);
|
||||
--color-icon-on-warning-selected: var(--icon-on-warning-selected);
|
||||
--color-icon-on-critical-base: var(--icon-on-critical-base);
|
||||
--color-icon-on-critical-hover: var(--icon-on-critical-hover);
|
||||
--color-icon-on-critical-selected: var(--icon-on-critical-selected);
|
||||
--color-icon-on-info-base: var(--icon-on-info-base);
|
||||
--color-icon-on-info-hover: var(--icon-on-info-hover);
|
||||
--color-icon-on-info-selected: var(--icon-on-info-selected);
|
||||
--color-icon-diff-add-base: var(--icon-diff-add-base);
|
||||
--color-icon-diff-add-hover: var(--icon-diff-add-hover);
|
||||
--color-icon-diff-add-active: var(--icon-diff-add-active);
|
||||
--color-icon-diff-delete-base: var(--icon-diff-delete-base);
|
||||
--color-icon-diff-delete-hover: var(--icon-diff-delete-hover);
|
||||
--color-syntax-comment: var(--syntax-comment);
|
||||
--color-syntax-regexp: var(--syntax-regexp);
|
||||
--color-syntax-string: var(--syntax-string);
|
||||
--color-syntax-keyword: var(--syntax-keyword);
|
||||
--color-syntax-primitive: var(--syntax-primitive);
|
||||
--color-syntax-operator: var(--syntax-operator);
|
||||
--color-syntax-variable: var(--syntax-variable);
|
||||
--color-syntax-property: var(--syntax-property);
|
||||
--color-syntax-type: var(--syntax-type);
|
||||
--color-syntax-constant: var(--syntax-constant);
|
||||
--color-syntax-punctuation: var(--syntax-punctuation);
|
||||
--color-syntax-object: var(--syntax-object);
|
||||
--color-syntax-success: var(--syntax-success);
|
||||
--color-syntax-warning: var(--syntax-warning);
|
||||
--color-syntax-critical: var(--syntax-critical);
|
||||
--color-syntax-info: var(--syntax-info);
|
||||
--color-syntax-diff-add: var(--syntax-diff-add);
|
||||
--color-syntax-diff-delete: var(--syntax-diff-delete);
|
||||
--color-syntax-diff-unknown: var(--syntax-diff-unknown);
|
||||
--color-markdown-heading: var(--markdown-heading);
|
||||
--color-markdown-text: var(--markdown-text);
|
||||
--color-markdown-link: var(--markdown-link);
|
||||
--color-markdown-link-text: var(--markdown-link-text);
|
||||
--color-markdown-code: var(--markdown-code);
|
||||
--color-markdown-block-quote: var(--markdown-block-quote);
|
||||
--color-markdown-emph: var(--markdown-emph);
|
||||
--color-markdown-strong: var(--markdown-strong);
|
||||
--color-markdown-horizontal-rule: var(--markdown-horizontal-rule);
|
||||
--color-markdown-list-item: var(--markdown-list-item);
|
||||
--color-markdown-list-enumeration: var(--markdown-list-enumeration);
|
||||
--color-markdown-image: var(--markdown-image);
|
||||
--color-markdown-image-text: var(--markdown-image-text);
|
||||
--color-markdown-code-block: var(--markdown-code-block);
|
||||
--color-border-color: var(--border-color);
|
||||
--color-border-weaker-base: var(--border-weaker-base);
|
||||
--color-border-weaker-hover: var(--border-weaker-hover);
|
||||
--color-border-weaker-active: var(--border-weaker-active);
|
||||
--color-border-weaker-selected: var(--border-weaker-selected);
|
||||
--color-border-weaker-disabled: var(--border-weaker-disabled);
|
||||
--color-border-weaker-focus: var(--border-weaker-focus);
|
||||
--color-button-ghost-hover: var(--button-ghost-hover);
|
||||
--color-button-ghost-hover2: var(--button-ghost-hover2);
|
||||
}
|
||||
78
opencode/packages/ui/src/styles/tailwind/index.css
Normal file
78
opencode/packages/ui/src/styles/tailwind/index.css
Normal file
@@ -0,0 +1,78 @@
|
||||
@layer theme, base, components, utilities;
|
||||
|
||||
@import "tailwindcss/theme.css" layer(theme);
|
||||
@import "tailwindcss/utilities.css" layer(utilities) source("../../../../");
|
||||
@import "./utilities.css";
|
||||
|
||||
@import "../index.css";
|
||||
|
||||
@theme {
|
||||
--*: initial;
|
||||
|
||||
--spacing: 0.25rem;
|
||||
/* --spacing: var(--spacing); */
|
||||
|
||||
--breakpoint-sm: 40rem;
|
||||
--breakpoint-md: 48rem;
|
||||
--breakpoint-lg: 64rem;
|
||||
--breakpoint-xl: 80rem;
|
||||
--breakpoint-2xl: 96rem;
|
||||
--breakpoint-3xl: 112rem;
|
||||
--breakpoint-4xl: 128rem;
|
||||
--breakpoint-5xl: 144rem;
|
||||
|
||||
--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;
|
||||
|
||||
--font-sans: var(--font-family-sans);
|
||||
--font-sans--font-feature-settings: var(--font-family-sans--font-feature-settings);
|
||||
--font-mono: var(--font-family-mono);
|
||||
--font-mono--font-feature-settings: var(--font-family-mono--font-feature-settings);
|
||||
|
||||
--text-sm: var(--font-size-small);
|
||||
--text-base: var(--font-size-base);
|
||||
--text-lg: var(--font-size-large);
|
||||
--text-xl: var(--font-size-x-large);
|
||||
|
||||
--font-weight-regular: var(--font-weight-regular);
|
||||
--font-weight-medium: var(--font-weight-medium);
|
||||
|
||||
--leading-lg: var(--line-height-large);
|
||||
--leading-xl: var(--line-height-x-large);
|
||||
--leading-2xl: var(--line-height-2x-large);
|
||||
|
||||
--tracking-normal: var(--letter-spacing-normal);
|
||||
--tracking-tight: var(--letter-spacing-tight);
|
||||
--tracking-tightest: var(--letter-spacing-tightest);
|
||||
|
||||
--radius-xs: 0.125rem;
|
||||
--radius-sm: 0.25rem;
|
||||
--radius-md: 0.375rem;
|
||||
--radius-lg: 0.5rem;
|
||||
--radius-xl: 0.625rem;
|
||||
|
||||
--shadow-xs: var(--shadow-xs);
|
||||
--shadow-md: var(--shadow-md);
|
||||
--shadow-xs-border: var(--shadow-xs-border);
|
||||
--shadow-xs-border-base: var(--shadow-xs-border-base);
|
||||
--shadow-xs-border-select: var(--shadow-xs-border-select);
|
||||
--shadow-xs-border-focus: var(--shadow-xs-border-focus);
|
||||
--shadow-xs-border-hover: var(--shadow-xs-border-hover);
|
||||
--shadow-xs-border-critical-base: var(--shadow-xs-border-critical-base);
|
||||
--shadow-lg-border-base: var(--shadow-lg-border-base);
|
||||
|
||||
--animate-pulse: var(--animate-pulse);
|
||||
}
|
||||
|
||||
@import "./colors.css";
|
||||
146
opencode/packages/ui/src/styles/tailwind/utilities.css
Normal file
146
opencode/packages/ui/src/styles/tailwind/utilities.css
Normal file
@@ -0,0 +1,146 @@
|
||||
@utility no-scrollbar {
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
& {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
}
|
||||
|
||||
@utility session-scroller {
|
||||
&::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--border-weak-base);
|
||||
border-radius: 5px;
|
||||
border: 3px solid transparent;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--border-weak-base);
|
||||
}
|
||||
|
||||
& {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--border-weak-base) transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@utility badge-mask {
|
||||
-webkit-mask-image: radial-gradient(circle 5px at calc(100% - 4px) 4px, transparent 5px, black 5.5px);
|
||||
mask-image: radial-gradient(circle 5px at calc(100% - 4px) 4px, transparent 5px, black 5.5px);
|
||||
}
|
||||
|
||||
@utility truncate-start {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
direction: rtl;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@utility fade-up-text {
|
||||
animation: fadeUp 0.4s ease-out forwards;
|
||||
opacity: 0;
|
||||
|
||||
&:nth-child(1) {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
&:nth-child(5) {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
&:nth-child(6) {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
&:nth-child(7) {
|
||||
animation-delay: 0.7s;
|
||||
}
|
||||
&:nth-child(8) {
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
&:nth-child(9) {
|
||||
animation-delay: 0.9s;
|
||||
}
|
||||
&:nth-child(10) {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
&:nth-child(11) {
|
||||
animation-delay: 1.1s;
|
||||
}
|
||||
&:nth-child(12) {
|
||||
animation-delay: 1.2s;
|
||||
}
|
||||
&:nth-child(13) {
|
||||
animation-delay: 1.3s;
|
||||
}
|
||||
&:nth-child(14) {
|
||||
animation-delay: 1.4s;
|
||||
}
|
||||
&:nth-child(15) {
|
||||
animation-delay: 1.5s;
|
||||
}
|
||||
&:nth-child(16) {
|
||||
animation-delay: 1.6s;
|
||||
}
|
||||
&:nth-child(17) {
|
||||
animation-delay: 1.7s;
|
||||
}
|
||||
&:nth-child(18) {
|
||||
animation-delay: 1.8s;
|
||||
}
|
||||
&:nth-child(19) {
|
||||
animation-delay: 1.9s;
|
||||
}
|
||||
&:nth-child(20) {
|
||||
animation-delay: 2s;
|
||||
}
|
||||
&:nth-child(21) {
|
||||
animation-delay: 2.1s;
|
||||
}
|
||||
&:nth-child(22) {
|
||||
animation-delay: 2.2s;
|
||||
}
|
||||
&:nth-child(23) {
|
||||
animation-delay: 2.3s;
|
||||
}
|
||||
&:nth-child(24) {
|
||||
animation-delay: 2.4s;
|
||||
}
|
||||
&:nth-child(25) {
|
||||
animation-delay: 2.5s;
|
||||
}
|
||||
&:nth-child(26) {
|
||||
animation-delay: 2.6s;
|
||||
}
|
||||
&:nth-child(27) {
|
||||
animation-delay: 2.7s;
|
||||
}
|
||||
&:nth-child(28) {
|
||||
animation-delay: 2.8s;
|
||||
}
|
||||
&:nth-child(29) {
|
||||
animation-delay: 2.9s;
|
||||
}
|
||||
&:nth-child(30) {
|
||||
animation-delay: 3s;
|
||||
}
|
||||
}
|
||||
603
opencode/packages/ui/src/styles/theme.css
Normal file
603
opencode/packages/ui/src/styles/theme.css
Normal file
@@ -0,0 +1,603 @@
|
||||
:root {
|
||||
--font-family-sans: "Inter", "Inter Fallback";
|
||||
--font-family-sans--font-feature-settings: "ss03" 1;
|
||||
--font-family-mono: "IBM Plex Mono", "IBM Plex Mono Fallback";
|
||||
--font-family-mono--font-feature-settings: "ss01" 1;
|
||||
|
||||
--font-size-small: 13px;
|
||||
--font-size-base: 14px;
|
||||
--font-size-large: 16px;
|
||||
--font-size-x-large: 20px;
|
||||
--font-weight-regular: 400;
|
||||
--font-weight-medium: 500;
|
||||
--line-height-large: 150%;
|
||||
--line-height-x-large: 180%;
|
||||
--line-height-2x-large: 200%;
|
||||
--letter-spacing-normal: 0;
|
||||
--letter-spacing-tight: -0.1599999964237213;
|
||||
--letter-spacing-tightest: -0.3199999928474426;
|
||||
--paragraph-spacing-base: 0;
|
||||
|
||||
--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;
|
||||
|
||||
--radius-xs: 0.125rem;
|
||||
--radius-sm: 0.25rem;
|
||||
--radius-md: 0.375rem;
|
||||
--radius-lg: 0.5rem;
|
||||
--radius-xl: 0.625rem;
|
||||
|
||||
--shadow-xs:
|
||||
0 1px 2px -0.5px light-dark(hsl(0 0% 0% / 0.04), hsl(0 0% 0% / 0.06)),
|
||||
0 0.5px 1.5px 0 light-dark(hsl(0 0% 0% / 0.025), hsl(0 0% 0% / 0.08)),
|
||||
0 1px 3px 0 light-dark(hsl(0 0% 0% / 0.05), hsl(0 0% 0% / 0.1));
|
||||
--shadow-md:
|
||||
0 6px 12px -2px light-dark(hsl(0 0% 0% / 0.075), hsl(0 0% 0% / 0.1)),
|
||||
0 4px 8px -2px light-dark(hsl(0 0% 0% / 0.075), hsl(0 0% 0% / 0.15)),
|
||||
0 1px 2px light-dark(hsl(0 0% 0% / 0.1), hsl(0 0% 0% / 0.15));
|
||||
--shadow-lg:
|
||||
0 16px 48px -6px light-dark(hsl(0 0% 0% / 0.05), hsl(0 0% 0% / 0.15)),
|
||||
0 6px 12px -2px light-dark(hsl(0 0% 0% / 0.025), hsl(0 0% 0% / 0.1)),
|
||||
0 1px 2.5px light-dark(hsl(0 0% 0% / 0.025), hsl(0 0% 0% / 0.1));
|
||||
--shadow-xxs-border: 0 0 0 0.5px var(--border-weak-base, rgba(0, 0, 0, 0.07));
|
||||
--shadow-xs-border:
|
||||
0 0 0 1px var(--border-base, rgba(11, 6, 0, 0.2)), 0 1px 2px -1px rgba(19, 16, 16, 0.04),
|
||||
0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);
|
||||
--shadow-xs-border-base:
|
||||
0 0 0 1px var(--border-weak-base, rgba(17, 0, 0, 0.12)), 0 1px 2px -1px rgba(19, 16, 16, 0.04),
|
||||
0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);
|
||||
--shadow-xs-border-select:
|
||||
0 0 0 3px var(--border-weak-selected, rgba(1, 103, 255, 0.29)),
|
||||
0 0 0 1px var(--border-selected, rgba(0, 74, 255, 0.99)), 0 1px 2px -1px rgba(19, 16, 16, 0.25),
|
||||
0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12);
|
||||
--shadow-xs-border-focus:
|
||||
0 0 0 1px var(--border-base, rgba(11, 6, 0, 0.2)), 0 1px 2px -1px rgba(19, 16, 16, 0.25),
|
||||
0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12), 0 0 0 2px var(--background-weak, #f1f0f0),
|
||||
0 0 0 3px var(--border-selected, rgba(0, 74, 255, 0.99));
|
||||
--shadow-xs-border-hover:
|
||||
0 0 0 1px var(--border-weak-selected, rgba(0, 112, 255, 0.22)), 0 1px 2px -1px rgba(19, 16, 16, 0.04),
|
||||
0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);
|
||||
--shadow-xs-border-critical-base: 0 0 0 1px var(--border-critical-selected, #fc543a);
|
||||
--shadow-xs-border-critical-focus:
|
||||
0 0 0 3px var(--border-critical-weak, rgba(251, 34, 0, 0.18)), 0 0 0 1px var(--border-critical-selected, #fc543a),
|
||||
0 1px 2px -1px rgba(19, 16, 16, 0.25), 0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12);
|
||||
--shadow-lg-border-base:
|
||||
0 0 0 1px var(--border-weak-base, rgba(0, 0, 0, 0.07)), 0 36px 80px 0 rgba(0, 0, 0, 0.03),
|
||||
0 13.141px 29.201px 0 rgba(0, 0, 0, 0.04), 0 6.38px 14.177px 0 rgba(0, 0, 0, 0.05),
|
||||
0 3.127px 6.95px 0 rgba(0, 0, 0, 0.06), 0 1.237px 2.748px 0 rgba(0, 0, 0, 0.09);
|
||||
|
||||
color-scheme: light;
|
||||
--text-mix-blend-mode: multiply;
|
||||
|
||||
/* OC-1 fallback variables (light) */
|
||||
--background-base: #f8f7f7;
|
||||
--background-weak: var(--smoke-light-3);
|
||||
--background-strong: var(--smoke-light-1);
|
||||
--background-stronger: #fcfcfc;
|
||||
--surface-base: var(--smoke-light-alpha-2);
|
||||
--base: var(--smoke-light-alpha-2);
|
||||
--surface-base-hover: #0500000f;
|
||||
--surface-base-active: var(--smoke-light-alpha-3);
|
||||
--surface-base-interactive-active: var(--cobalt-light-alpha-3);
|
||||
--base2: var(--smoke-light-alpha-2);
|
||||
--base3: var(--smoke-light-alpha-2);
|
||||
--surface-inset-base: var(--smoke-light-alpha-2);
|
||||
--surface-inset-base-hover: var(--smoke-light-alpha-3);
|
||||
--surface-inset-strong: #1f000017;
|
||||
--surface-inset-strong-hover: #1f000017;
|
||||
--surface-raised-base: var(--smoke-light-alpha-1);
|
||||
--surface-float-base: var(--smoke-dark-1);
|
||||
--surface-float-base-hover: var(--smoke-dark-2);
|
||||
--surface-raised-base-hover: var(--smoke-light-alpha-2);
|
||||
--surface-raised-base-active: var(--smoke-light-alpha-3);
|
||||
--surface-raised-strong: var(--smoke-light-1);
|
||||
--surface-raised-strong-hover: var(--white);
|
||||
--surface-raised-stronger: var(--white);
|
||||
--surface-raised-stronger-hover: var(--white);
|
||||
--surface-weak: var(--smoke-light-alpha-3);
|
||||
--surface-weaker: var(--smoke-light-alpha-4);
|
||||
--surface-strong: #ffffff;
|
||||
--surface-raised-stronger-non-alpha: var(--white);
|
||||
--surface-brand-base: var(--yuzu-light-9);
|
||||
--surface-brand-hover: var(--yuzu-light-10);
|
||||
--surface-interactive-base: var(--cobalt-light-3);
|
||||
--surface-interactive-hover: #e5f0ff;
|
||||
--surface-interactive-weak: var(--cobalt-light-2);
|
||||
--surface-interactive-weak-hover: var(--cobalt-light-3);
|
||||
--surface-success-base: var(--apple-light-3);
|
||||
--surface-success-weak: var(--apple-light-2);
|
||||
--surface-success-strong: var(--apple-light-9);
|
||||
--surface-warning-base: var(--solaris-light-3);
|
||||
--surface-warning-weak: var(--solaris-light-2);
|
||||
--surface-warning-strong: var(--solaris-light-9);
|
||||
--surface-critical-base: var(--ember-light-3);
|
||||
--surface-critical-weak: var(--ember-light-2);
|
||||
--surface-critical-strong: var(--ember-light-9);
|
||||
--surface-info-base: var(--lilac-light-3);
|
||||
--surface-info-weak: var(--lilac-light-2);
|
||||
--surface-info-strong: var(--lilac-light-9);
|
||||
--surface-diff-unchanged-base: #ffffff00;
|
||||
--surface-diff-skip-base: var(--smoke-light-2);
|
||||
--surface-diff-hidden-base: var(--blue-light-3);
|
||||
--surface-diff-hidden-weak: var(--blue-light-2);
|
||||
--surface-diff-hidden-weaker: var(--blue-light-1);
|
||||
--surface-diff-hidden-strong: var(--blue-light-5);
|
||||
--surface-diff-hidden-stronger: var(--blue-light-9);
|
||||
--surface-diff-add-base: #dafbe0;
|
||||
--surface-diff-add-weak: var(--mint-light-2);
|
||||
--surface-diff-add-weaker: var(--mint-light-1);
|
||||
--surface-diff-add-strong: var(--mint-light-5);
|
||||
--surface-diff-add-stronger: var(--mint-light-9);
|
||||
--surface-diff-delete-base: var(--ember-light-3);
|
||||
--surface-diff-delete-weak: var(--ember-light-2);
|
||||
--surface-diff-delete-weaker: var(--ember-light-1);
|
||||
--surface-diff-delete-strong: var(--ember-light-6);
|
||||
--surface-diff-delete-stronger: var(--ember-light-9);
|
||||
--input-base: var(--smoke-light-1);
|
||||
--input-hover: var(--smoke-light-2);
|
||||
--input-active: var(--cobalt-light-1);
|
||||
--input-selected: var(--cobalt-light-4);
|
||||
--input-focus: var(--cobalt-light-1);
|
||||
--input-disabled: var(--smoke-light-4);
|
||||
--text-base: var(--smoke-light-11);
|
||||
--text-weak: var(--smoke-light-9);
|
||||
--text-weaker: var(--smoke-light-8);
|
||||
--text-strong: var(--smoke-light-12);
|
||||
--text-invert-base: var(--smoke-dark-alpha-11);
|
||||
--text-invert-weak: var(--smoke-dark-alpha-9);
|
||||
--text-invert-weaker: var(--smoke-dark-alpha-8);
|
||||
--text-invert-strong: var(--smoke-dark-alpha-12);
|
||||
--text-interactive-base: var(--cobalt-light-9);
|
||||
--text-on-brand-base: var(--smoke-light-alpha-11);
|
||||
--text-on-interactive-base: var(--smoke-light-1);
|
||||
--text-on-interactive-weak: var(--smoke-dark-alpha-11);
|
||||
--text-on-success-base: var(--apple-light-10);
|
||||
--text-on-critical-base: var(--ember-light-10);
|
||||
--text-on-critical-weak: var(--ember-light-8);
|
||||
--text-on-critical-strong: var(--ember-light-12);
|
||||
--text-on-warning-base: var(--smoke-dark-alpha-11);
|
||||
--text-on-info-base: var(--smoke-dark-alpha-11);
|
||||
--text-diff-add-base: var(--mint-light-11);
|
||||
--text-diff-delete-base: var(--ember-light-10);
|
||||
--text-diff-delete-strong: var(--ember-light-12);
|
||||
--text-diff-add-strong: var(--mint-light-12);
|
||||
--text-on-info-weak: var(--smoke-dark-alpha-9);
|
||||
--text-on-info-strong: var(--smoke-dark-alpha-12);
|
||||
--text-on-warning-weak: var(--smoke-dark-alpha-9);
|
||||
--text-on-warning-strong: var(--smoke-dark-alpha-12);
|
||||
--text-on-success-weak: var(--apple-light-6);
|
||||
--text-on-success-strong: var(--apple-light-12);
|
||||
--text-on-brand-weak: var(--smoke-light-alpha-9);
|
||||
--text-on-brand-weaker: var(--smoke-light-alpha-8);
|
||||
--text-on-brand-strong: var(--smoke-light-alpha-12);
|
||||
--button-primary-base: var(--smoke-light-12);
|
||||
--button-secondary-base: #fdfcfc;
|
||||
--button-secondary-hover: #faf9f9;
|
||||
--border-base: var(--smoke-light-alpha-7);
|
||||
--border-hover: var(--smoke-light-alpha-8);
|
||||
--border-active: var(--smoke-light-alpha-9);
|
||||
--border-selected: var(--cobalt-light-alpha-9);
|
||||
--border-disabled: var(--smoke-light-alpha-8);
|
||||
--border-focus: var(--smoke-light-alpha-9);
|
||||
--border-weak-base: var(--smoke-light-alpha-5);
|
||||
--border-strong-base: var(--smoke-light-alpha-7);
|
||||
--border-strong-hover: var(--smoke-light-alpha-8);
|
||||
--border-strong-active: var(--smoke-light-alpha-7);
|
||||
--border-strong-selected: var(--cobalt-light-alpha-6);
|
||||
--border-strong-disabled: var(--smoke-light-alpha-6);
|
||||
--border-strong-focus: var(--smoke-light-alpha-7);
|
||||
--border-weak-hover: var(--smoke-light-alpha-6);
|
||||
--border-weak-active: var(--smoke-light-alpha-7);
|
||||
--border-weak-selected: var(--cobalt-light-alpha-5);
|
||||
--border-weak-disabled: var(--smoke-light-alpha-6);
|
||||
--border-weak-focus: var(--smoke-light-alpha-7);
|
||||
--border-interactive-base: var(--cobalt-light-7);
|
||||
--border-interactive-hover: var(--cobalt-light-8);
|
||||
--border-interactive-active: var(--cobalt-light-9);
|
||||
--border-interactive-selected: var(--cobalt-light-9);
|
||||
--border-interactive-disabled: var(--smoke-light-8);
|
||||
--border-interactive-focus: var(--cobalt-light-9);
|
||||
--border-success-base: var(--apple-light-6);
|
||||
--border-success-hover: var(--apple-light-7);
|
||||
--border-success-selected: var(--apple-light-9);
|
||||
--border-warning-base: var(--solaris-light-6);
|
||||
--border-warning-hover: var(--solaris-light-7);
|
||||
--border-warning-selected: var(--solaris-light-9);
|
||||
--border-critical-base: var(--ember-light-6);
|
||||
--border-critical-hover: var(--ember-light-7);
|
||||
--border-critical-selected: var(--ember-light-9);
|
||||
--border-info-base: var(--lilac-light-6);
|
||||
--border-info-hover: var(--lilac-light-7);
|
||||
--border-info-selected: var(--lilac-light-9);
|
||||
--icon-base: var(--smoke-light-9);
|
||||
--icon-hover: var(--smoke-light-11);
|
||||
--icon-active: var(--smoke-light-12);
|
||||
--icon-selected: var(--smoke-light-12);
|
||||
--icon-disabled: var(--smoke-light-8);
|
||||
--icon-focus: var(--smoke-light-12);
|
||||
--icon-invert-base: #ffffff;
|
||||
--icon-weak-base: var(--smoke-light-7);
|
||||
--icon-weak-hover: var(--smoke-light-8);
|
||||
--icon-weak-active: var(--smoke-light-9);
|
||||
--icon-weak-selected: var(--smoke-light-10);
|
||||
--icon-weak-disabled: var(--smoke-light-6);
|
||||
--icon-weak-focus: var(--smoke-light-9);
|
||||
--icon-strong-base: var(--smoke-light-12);
|
||||
--icon-strong-hover: #151313;
|
||||
--icon-strong-active: #020202;
|
||||
--icon-strong-selected: #020202;
|
||||
--icon-strong-disabled: var(--smoke-light-8);
|
||||
--icon-strong-focus: #020202;
|
||||
--icon-brand-base: var(--smoke-light-12);
|
||||
--icon-interactive-base: var(--cobalt-light-9);
|
||||
--icon-success-base: var(--apple-light-7);
|
||||
--icon-success-hover: var(--apple-light-8);
|
||||
--icon-success-active: var(--apple-light-11);
|
||||
--icon-warning-base: var(--amber-light-7);
|
||||
--icon-warning-hover: var(--amber-light-8);
|
||||
--icon-warning-active: var(--amber-light-11);
|
||||
--icon-critical-base: var(--ember-light-10);
|
||||
--icon-critical-hover: var(--ember-light-11);
|
||||
--icon-critical-active: var(--ember-light-12);
|
||||
--icon-info-base: var(--lilac-light-7);
|
||||
--icon-info-hover: var(--lilac-light-8);
|
||||
--icon-info-active: var(--lilac-light-11);
|
||||
--icon-on-brand-base: var(--smoke-light-alpha-11);
|
||||
--icon-on-brand-hover: var(--smoke-light-alpha-12);
|
||||
--icon-on-brand-selected: var(--smoke-light-alpha-12);
|
||||
--icon-on-interactive-base: var(--smoke-light-1);
|
||||
--icon-agent-plan-base: var(--purple-light-9);
|
||||
--icon-agent-docs-base: var(--amber-light-9);
|
||||
--icon-agent-ask-base: var(--cyan-light-9);
|
||||
--icon-agent-build-base: var(--cobalt-light-9);
|
||||
--icon-on-success-base: var(--apple-light-alpha-9);
|
||||
--icon-on-success-hover: var(--apple-light-alpha-10);
|
||||
--icon-on-success-selected: var(--apple-light-alpha-11);
|
||||
--icon-on-warning-base: var(--amber-lightalpha-9);
|
||||
--icon-on-warning-hover: var(--amber-lightalpha-10);
|
||||
--icon-on-warning-selected: var(--amber-lightalpha-11);
|
||||
--icon-on-critical-base: var(--ember-light-alpha-9);
|
||||
--icon-on-critical-hover: var(--ember-light-alpha-10);
|
||||
--icon-on-critical-selected: var(--ember-light-alpha-11);
|
||||
--icon-on-info-base: var(--lilac-light-9);
|
||||
--icon-on-info-hover: var(--lilac-light-alpha-10);
|
||||
--icon-on-info-selected: var(--lilac-light-alpha-11);
|
||||
--icon-diff-add-base: var(--mint-light-11);
|
||||
--icon-diff-add-hover: var(--mint-light-12);
|
||||
--icon-diff-add-active: var(--mint-light-12);
|
||||
--icon-diff-delete-base: var(--ember-light-10);
|
||||
--icon-diff-delete-hover: var(--ember-light-11);
|
||||
--icon-diff-modified-base: var(--icon-warning-base);
|
||||
--syntax-comment: var(--text-weak);
|
||||
--syntax-regexp: var(--text-base);
|
||||
--syntax-string: #006656;
|
||||
--syntax-keyword: var(--text-weak);
|
||||
--syntax-primitive: #fb4804;
|
||||
--syntax-operator: var(--text-base);
|
||||
--syntax-variable: var(--text-strong);
|
||||
--syntax-property: #ed6dc8;
|
||||
--syntax-type: #596600;
|
||||
--syntax-constant: #007b80;
|
||||
--syntax-punctuation: var(--text-base);
|
||||
--syntax-object: var(--text-strong);
|
||||
--syntax-success: var(--apple-light-10);
|
||||
--syntax-warning: var(--amber-light-10);
|
||||
--syntax-critical: var(--ember-light-10);
|
||||
--syntax-info: #0092a8;
|
||||
--syntax-diff-add: var(--mint-light-11);
|
||||
--syntax-diff-delete: var(--ember-light-11);
|
||||
--syntax-diff-unknown: #ff0000;
|
||||
--markdown-heading: #d68c27;
|
||||
--markdown-text: #1a1a1a;
|
||||
--markdown-link: #3b7dd8;
|
||||
--markdown-link-text: #318795;
|
||||
--markdown-code: #3d9a57;
|
||||
--markdown-block-quote: #b0851f;
|
||||
--markdown-emph: #b0851f;
|
||||
--markdown-strong: #d68c27;
|
||||
--markdown-horizontal-rule: #8a8a8a;
|
||||
--markdown-list-item: #3b7dd8;
|
||||
--markdown-list-enumeration: #318795;
|
||||
--markdown-image: #3b7dd8;
|
||||
--markdown-image-text: #318795;
|
||||
--markdown-code-block: #1a1a1a;
|
||||
--border-color: #ffffff;
|
||||
--border-weaker-base: var(--smoke-light-alpha-3);
|
||||
--border-weaker-hover: var(--smoke-light-alpha-4);
|
||||
--border-weaker-active: var(--smoke-light-alpha-6);
|
||||
--border-weaker-selected: var(--cobalt-light-alpha-4);
|
||||
--border-weaker-disabled: var(--smoke-light-alpha-2);
|
||||
--border-weaker-focus: var(--smoke-light-alpha-6);
|
||||
--button-ghost-hover: var(--smoke-light-alpha-2);
|
||||
--button-ghost-hover2: var(--smoke-light-alpha-3);
|
||||
--avatar-background-pink: #feeef8;
|
||||
--avatar-background-mint: #e1fbf4;
|
||||
--avatar-background-orange: #fff1e7;
|
||||
--avatar-background-purple: #f9f1fe;
|
||||
--avatar-background-cyan: #e7f9fb;
|
||||
--avatar-background-lime: #eefadc;
|
||||
--avatar-text-pink: #cd1d8d;
|
||||
--avatar-text-mint: #147d6f;
|
||||
--avatar-text-orange: #ed5f00;
|
||||
--avatar-text-purple: #8445bc;
|
||||
--avatar-text-cyan: #0894b3;
|
||||
--avatar-text-lime: #5d770d;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color-scheme: dark;
|
||||
--text-mix-blend-mode: plus-lighter;
|
||||
|
||||
/* OC-1 fallback variables (dark) */
|
||||
--background-base: var(--smoke-dark-1);
|
||||
--background-weak: #1c1717;
|
||||
--background-strong: #151313;
|
||||
--background-stronger: #191515;
|
||||
--surface-base: var(--smoke-dark-alpha-2);
|
||||
--base: var(--smoke-dark-alpha-2);
|
||||
--surface-base-hover: #e0b7b716;
|
||||
--surface-base-active: var(--smoke-dark-alpha-3);
|
||||
--surface-base-interactive-active: var(--cobalt-dark-alpha-2);
|
||||
--base2: var(--smoke-dark-alpha-2);
|
||||
--base3: var(--smoke-dark-alpha-2);
|
||||
--surface-inset-base: #0e0b0b7f;
|
||||
--surface-inset-base-hover: #0e0b0b7f;
|
||||
--surface-inset-strong: #060505cc;
|
||||
--surface-inset-strong-hover: #060505cc;
|
||||
--surface-raised-base: var(--smoke-dark-alpha-3);
|
||||
--surface-float-base: var(--smoke-dark-1);
|
||||
--surface-float-base-hover: var(--smoke-dark-2);
|
||||
--surface-raised-base-hover: var(--smoke-dark-alpha-4);
|
||||
--surface-raised-base-active: var(--smoke-dark-alpha-5);
|
||||
--surface-raised-strong: var(--smoke-dark-alpha-4);
|
||||
--surface-raised-strong-hover: var(--smoke-dark-alpha-6);
|
||||
--surface-raised-stronger: var(--smoke-dark-alpha-6);
|
||||
--surface-raised-stronger-hover: var(--smoke-dark-alpha-7);
|
||||
--surface-weak: var(--smoke-dark-alpha-4);
|
||||
--surface-weaker: var(--smoke-dark-alpha-5);
|
||||
--surface-strong: var(--smoke-dark-alpha-7);
|
||||
--surface-raised-stronger-non-alpha: var(--smoke-dark-3);
|
||||
--surface-brand-base: var(--yuzu-light-9);
|
||||
--surface-brand-hover: var(--yuzu-light-10);
|
||||
--surface-interactive-base: var(--cobalt-dark-3);
|
||||
--surface-interactive-hover: #0a1d4d;
|
||||
--surface-interactive-weak: var(--cobalt-dark-2);
|
||||
--surface-interactive-weak-hover: var(--cobalt-light-3);
|
||||
--surface-success-base: var(--apple-light-3);
|
||||
--surface-success-weak: var(--apple-light-2);
|
||||
--surface-success-strong: var(--apple-light-9);
|
||||
--surface-warning-base: var(--solaris-light-3);
|
||||
--surface-warning-weak: var(--solaris-light-2);
|
||||
--surface-warning-strong: var(--solaris-light-9);
|
||||
--surface-critical-base: var(--ember-dark-3);
|
||||
--surface-critical-weak: var(--ember-dark-2);
|
||||
--surface-critical-strong: var(--ember-dark-9);
|
||||
--surface-info-base: var(--lilac-light-3);
|
||||
--surface-info-weak: var(--lilac-light-2);
|
||||
--surface-info-strong: var(--lilac-light-9);
|
||||
--surface-diff-unchanged-base: var(--smoke-dark-1);
|
||||
--surface-diff-skip-base: var(--smoke-dark-alpha-1);
|
||||
--surface-diff-hidden-base: var(--blue-dark-2);
|
||||
--surface-diff-hidden-weak: var(--blue-dark-1);
|
||||
--surface-diff-hidden-weaker: var(--blue-dark-3);
|
||||
--surface-diff-hidden-strong: var(--blue-dark-5);
|
||||
--surface-diff-hidden-stronger: var(--blue-dark-11);
|
||||
--surface-diff-add-base: var(--mint-dark-3);
|
||||
--surface-diff-add-weak: var(--mint-dark-4);
|
||||
--surface-diff-add-weaker: var(--mint-dark-3);
|
||||
--surface-diff-add-strong: var(--mint-dark-5);
|
||||
--surface-diff-add-stronger: var(--mint-dark-11);
|
||||
--surface-diff-delete-base: var(--ember-dark-3);
|
||||
--surface-diff-delete-weak: var(--ember-dark-4);
|
||||
--surface-diff-delete-weaker: var(--ember-dark-3);
|
||||
--surface-diff-delete-strong: var(--ember-dark-5);
|
||||
--surface-diff-delete-stronger: var(--ember-dark-11);
|
||||
--input-base: var(--smoke-dark-2);
|
||||
--input-hover: var(--smoke-dark-2);
|
||||
--input-active: var(--cobalt-dark-1);
|
||||
--input-selected: var(--cobalt-dark-2);
|
||||
--input-focus: var(--cobalt-dark-1);
|
||||
--input-disabled: var(--smoke-dark-4);
|
||||
--text-base: var(--smoke-dark-alpha-11);
|
||||
--text-weak: var(--smoke-dark-alpha-9);
|
||||
--text-weaker: var(--smoke-dark-alpha-8);
|
||||
--text-strong: var(--smoke-dark-alpha-12);
|
||||
--text-invert-base: var(--smoke-dark-alpha-11);
|
||||
--text-invert-weak: var(--smoke-dark-alpha-9);
|
||||
--text-invert-weaker: var(--smoke-dark-alpha-8);
|
||||
--text-invert-strong: var(--smoke-dark-alpha-12);
|
||||
--text-interactive-base: var(--cobalt-dark-11);
|
||||
--text-on-brand-base: var(--smoke-dark-alpha-11);
|
||||
--text-on-interactive-base: var(--smoke-dark-12);
|
||||
--text-on-interactive-weak: var(--smoke-dark-alpha-11);
|
||||
--text-on-success-base: var(--apple-dark-9);
|
||||
--text-on-critical-base: var(--ember-dark-9);
|
||||
--text-on-critical-weak: var(--ember-dark-8);
|
||||
--text-on-critical-strong: var(--ember-dark-12);
|
||||
--text-on-warning-base: var(--smoke-dark-alpha-11);
|
||||
--text-on-info-base: var(--smoke-dark-alpha-11);
|
||||
--text-diff-add-base: var(--mint-dark-11);
|
||||
--text-diff-delete-base: var(--ember-dark-9);
|
||||
--text-diff-delete-strong: var(--ember-dark-12);
|
||||
--text-diff-add-strong: var(--mint-dark-8);
|
||||
--text-on-info-weak: var(--smoke-dark-alpha-9);
|
||||
--text-on-info-strong: var(--smoke-dark-alpha-12);
|
||||
--text-on-warning-weak: var(--smoke-dark-alpha-9);
|
||||
--text-on-warning-strong: var(--smoke-dark-alpha-12);
|
||||
--text-on-success-weak: var(--apple-dark-8);
|
||||
--text-on-success-strong: var(--apple-dark-12);
|
||||
--text-on-brand-weak: var(--smoke-dark-alpha-9);
|
||||
--text-on-brand-weaker: var(--smoke-dark-alpha-8);
|
||||
--text-on-brand-strong: var(--smoke-dark-alpha-12);
|
||||
--button-primary-base: var(--smoke-dark-12);
|
||||
--button-secondary-base: #231f1f;
|
||||
--button-secondary-hover: #2a2727;
|
||||
--border-base: var(--smoke-dark-alpha-7);
|
||||
--border-hover: var(--smoke-dark-alpha-8);
|
||||
--border-active: var(--smoke-dark-alpha-9);
|
||||
--border-selected: var(--cobalt-dark-alpha-11);
|
||||
--border-disabled: var(--smoke-dark-alpha-8);
|
||||
--border-focus: var(--smoke-dark-alpha-9);
|
||||
--border-weak-base: var(--smoke-dark-alpha-6);
|
||||
--border-strong-base: var(--smoke-dark-alpha-8);
|
||||
--border-strong-hover: var(--smoke-dark-alpha-7);
|
||||
--border-strong-active: var(--smoke-dark-alpha-8);
|
||||
--border-strong-selected: var(--cobalt-dark-alpha-6);
|
||||
--border-strong-disabled: var(--smoke-dark-alpha-6);
|
||||
--border-strong-focus: var(--smoke-dark-alpha-8);
|
||||
--border-weak-hover: var(--smoke-dark-alpha-7);
|
||||
--border-weak-active: var(--smoke-dark-alpha-8);
|
||||
--border-weak-selected: var(--cobalt-dark-alpha-6);
|
||||
--border-weak-disabled: var(--smoke-dark-alpha-6);
|
||||
--border-weak-focus: var(--smoke-dark-alpha-8);
|
||||
--border-interactive-base: var(--cobalt-light-7);
|
||||
--border-interactive-hover: var(--cobalt-light-8);
|
||||
--border-interactive-active: var(--cobalt-light-9);
|
||||
--border-interactive-selected: var(--cobalt-light-9);
|
||||
--border-interactive-disabled: var(--smoke-light-8);
|
||||
--border-interactive-focus: var(--cobalt-light-9);
|
||||
--border-success-base: var(--apple-light-6);
|
||||
--border-success-hover: var(--apple-light-7);
|
||||
--border-success-selected: var(--apple-light-9);
|
||||
--border-warning-base: var(--solaris-light-6);
|
||||
--border-warning-hover: var(--solaris-light-7);
|
||||
--border-warning-selected: var(--solaris-light-9);
|
||||
--border-critical-base: var(--ember-dark-5);
|
||||
--border-critical-hover: var(--ember-dark-7);
|
||||
--border-critical-selected: var(--ember-dark-9);
|
||||
--border-info-base: var(--lilac-light-6);
|
||||
--border-info-hover: var(--lilac-light-7);
|
||||
--border-info-selected: var(--lilac-light-9);
|
||||
--icon-base: var(--smoke-dark-9);
|
||||
--icon-hover: var(--smoke-dark-10);
|
||||
--icon-active: var(--smoke-dark-11);
|
||||
--icon-selected: var(--smoke-dark-12);
|
||||
--icon-disabled: var(--smoke-dark-7);
|
||||
--icon-focus: var(--smoke-dark-12);
|
||||
--icon-invert-base: var(--smoke-dark-1);
|
||||
--icon-weak-base: var(--smoke-dark-6);
|
||||
--icon-weak-hover: var(--smoke-light-7);
|
||||
--icon-weak-active: var(--smoke-light-8);
|
||||
--icon-weak-selected: var(--smoke-light-9);
|
||||
--icon-weak-disabled: var(--smoke-light-4);
|
||||
--icon-weak-focus: var(--smoke-light-9);
|
||||
--icon-strong-base: var(--smoke-dark-12);
|
||||
--icon-strong-hover: #f6f3f3;
|
||||
--icon-strong-active: #fcfcfc;
|
||||
--icon-strong-selected: #fdfcfc;
|
||||
--icon-strong-disabled: var(--smoke-dark-8);
|
||||
--icon-strong-focus: #fdfcfc;
|
||||
--icon-brand-base: var(--white);
|
||||
--icon-interactive-base: var(--cobalt-dark-9);
|
||||
--icon-success-base: var(--apple-dark-7);
|
||||
--icon-success-hover: var(--apple-dark-8);
|
||||
--icon-success-active: var(--apple-dark-11);
|
||||
--icon-warning-base: var(--amber-dark-7);
|
||||
--icon-warning-hover: var(--amber-dark-8);
|
||||
--icon-warning-active: var(--amber-dark-11);
|
||||
--icon-critical-base: var(--ember-dark-9);
|
||||
--icon-critical-hover: var(--ember-dark-11);
|
||||
--icon-critical-active: var(--ember-dark-12);
|
||||
--icon-info-base: var(--lilac-dark-7);
|
||||
--icon-info-hover: var(--lilac-dark-8);
|
||||
--icon-info-active: var(--lilac-dark-11);
|
||||
--icon-on-brand-base: var(--smoke-light-alpha-11);
|
||||
--icon-on-brand-hover: var(--smoke-light-alpha-12);
|
||||
--icon-on-brand-selected: var(--smoke-light-alpha-12);
|
||||
--icon-on-interactive-base: var(--smoke-dark-12);
|
||||
--icon-agent-plan-base: var(--purple-dark-9);
|
||||
--icon-agent-docs-base: var(--amber-dark-9);
|
||||
--icon-agent-ask-base: var(--cyan-dark-9);
|
||||
--icon-agent-build-base: var(--cobalt-dark-11);
|
||||
--icon-on-success-base: var(--apple-dark-alpha-9);
|
||||
--icon-on-success-hover: var(--apple-dark-alpha-10);
|
||||
--icon-on-success-selected: var(--apple-dark-alpha-11);
|
||||
--icon-on-warning-base: var(--amber-darkalpha-9);
|
||||
--icon-on-warning-hover: var(--amber-darkalpha-10);
|
||||
--icon-on-warning-selected: var(--amber-darkalpha-11);
|
||||
--icon-on-critical-base: var(--ember-dark-alpha-9);
|
||||
--icon-on-critical-hover: var(--ember-dark-alpha-10);
|
||||
--icon-on-critical-selected: var(--ember-dark-alpha-11);
|
||||
--icon-on-info-base: var(--lilac-dark-9);
|
||||
--icon-on-info-hover: var(--lilac-dark-alpha-10);
|
||||
--icon-on-info-selected: var(--lilac-dark-alpha-11);
|
||||
--icon-diff-add-base: var(--mint-dark-11);
|
||||
--icon-diff-add-hover: var(--mint-dark-10);
|
||||
--icon-diff-add-active: var(--mint-dark-11);
|
||||
--icon-diff-delete-base: var(--ember-dark-9);
|
||||
--icon-diff-delete-hover: var(--ember-dark-10);
|
||||
--icon-diff-modified-base: var(--icon-warning-base);
|
||||
--syntax-comment: var(--text-weak);
|
||||
--syntax-regexp: var(--text-base);
|
||||
--syntax-string: #00ceb9;
|
||||
--syntax-keyword: var(--text-weak);
|
||||
--syntax-primitive: #ffba92;
|
||||
--syntax-operator: var(--text-weak);
|
||||
--syntax-variable: var(--text-strong);
|
||||
--syntax-property: #ff9ae2;
|
||||
--syntax-type: #ecf58c;
|
||||
--syntax-constant: #93e9f6;
|
||||
--syntax-punctuation: var(--text-weak);
|
||||
--syntax-object: var(--text-strong);
|
||||
--syntax-success: var(--apple-dark-10);
|
||||
--syntax-warning: var(--amber-dark-10);
|
||||
--syntax-critical: var(--ember-dark-10);
|
||||
--syntax-info: #93e9f6;
|
||||
--syntax-diff-add: var(--mint-dark-11);
|
||||
--syntax-diff-delete: var(--ember-dark-11);
|
||||
--syntax-diff-unknown: #ff0000;
|
||||
--markdown-heading: #9d7cd8;
|
||||
--markdown-text: #eeeeee;
|
||||
--markdown-link: #fab283;
|
||||
--markdown-link-text: #56b6c2;
|
||||
--markdown-code: #7fd88f;
|
||||
--markdown-block-quote: #e5c07b;
|
||||
--markdown-emph: #e5c07b;
|
||||
--markdown-strong: #f5a742;
|
||||
--markdown-horizontal-rule: #808080;
|
||||
--markdown-list-item: #fab283;
|
||||
--markdown-list-enumeration: #56b6c2;
|
||||
--markdown-image: #fab283;
|
||||
--markdown-image-text: #56b6c2;
|
||||
--markdown-code-block: #eeeeee;
|
||||
--border-color: #ffffff;
|
||||
--border-weaker-base: var(--smoke-dark-alpha-3);
|
||||
--border-weaker-hover: var(--smoke-dark-alpha-4);
|
||||
--border-weaker-active: var(--smoke-dark-alpha-6);
|
||||
--border-weaker-selected: var(--cobalt-dark-alpha-3);
|
||||
--border-weaker-disabled: var(--smoke-dark-alpha-2);
|
||||
--border-weaker-focus: var(--smoke-dark-alpha-6);
|
||||
--button-ghost-hover: var(--smoke-dark-alpha-2);
|
||||
--button-ghost-hover2: var(--smoke-dark-alpha-3);
|
||||
--avatar-background-pink: #501b3f;
|
||||
--avatar-background-mint: #033a34;
|
||||
--avatar-background-orange: #5f2a06;
|
||||
--avatar-background-purple: #432155;
|
||||
--avatar-background-cyan: #0f3058;
|
||||
--avatar-background-lime: #2b3711;
|
||||
--avatar-text-pink: #e34ba9;
|
||||
--avatar-text-mint: #95f3d9;
|
||||
--avatar-text-orange: #ff802b;
|
||||
--avatar-text-purple: #9d5bd2;
|
||||
--avatar-text-cyan: #369eff;
|
||||
--avatar-text-lime: #c4f042;
|
||||
}
|
||||
}
|
||||
118
opencode/packages/ui/src/styles/utilities.css
Normal file
118
opencode/packages/ui/src/styles/utilities.css
Normal file
@@ -0,0 +1,118 @@
|
||||
:root {
|
||||
interpolate-size: allow-keywords;
|
||||
|
||||
[data-popper-positioner] {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ::selection { */
|
||||
/* background-color: color-mix(in srgb, var(--color-primary) 33%, transparent); */
|
||||
/* background-color: var(--color-primary); */
|
||||
/* color: var(--color-background); */
|
||||
/* } */
|
||||
}
|
||||
|
||||
.no-scrollbar {
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
/* Hide scrollbar for IE, Edge and Firefox */
|
||||
& {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.truncate-start {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
direction: rtl;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-12-regular {
|
||||
font-family: var(--font-family-sans);
|
||||
font-size: var(--font-size-small);
|
||||
font-style: normal;
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: var(--line-height-large); /* 166.667% */
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
}
|
||||
|
||||
.text-12-medium {
|
||||
font-family: var(--font-family-sans);
|
||||
font-size: var(--font-size-small);
|
||||
font-style: normal;
|
||||
font-weight: var(--font-weight-medium);
|
||||
line-height: var(--line-height-large); /* 166.667% */
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
}
|
||||
|
||||
.text-12-mono {
|
||||
font-family: var(--font-family-mono);
|
||||
font-feature-settings: var(--font-feature-settings-mono);
|
||||
font-size: var(--font-size-small);
|
||||
font-style: normal;
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: var(--line-height-large); /* 166.667% */
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
}
|
||||
|
||||
.text-14-regular {
|
||||
font-family: var(--font-family-sans);
|
||||
font-size: var(--font-size-base);
|
||||
font-style: normal;
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: var(--line-height-x-large); /* 171.429% */
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
}
|
||||
|
||||
.text-14-medium {
|
||||
font-family: var(--font-family-sans);
|
||||
font-size: var(--font-size-base);
|
||||
font-style: normal;
|
||||
font-weight: var(--font-weight-medium);
|
||||
line-height: var(--line-height-large); /* 171.429% */
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
}
|
||||
|
||||
.text-14-mono {
|
||||
font-family: var(--font-family-mono);
|
||||
font-feature-settings: var(--font-feature-settings-mono);
|
||||
font-size: var(--font-size-base);
|
||||
font-style: normal;
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: var(--line-height-large); /* 171.429% */
|
||||
letter-spacing: var(--letter-spacing-normal);
|
||||
}
|
||||
|
||||
.text-16-medium {
|
||||
font-family: var(--font-family-sans);
|
||||
font-size: var(--font-size-large);
|
||||
font-style: normal;
|
||||
font-weight: var(--font-weight-medium);
|
||||
line-height: var(--line-height-x-large); /* 150% */
|
||||
letter-spacing: var(--letter-spacing-tight);
|
||||
}
|
||||
|
||||
.text-20-medium {
|
||||
font-family: var(--font-family-sans);
|
||||
font-size: var(--font-size-x-large);
|
||||
font-style: normal;
|
||||
font-weight: var(--font-weight-medium);
|
||||
line-height: var(--line-height-x-large); /* 120% */
|
||||
letter-spacing: var(--letter-spacing-tightest);
|
||||
}
|
||||
Reference in New Issue
Block a user