@skeletonlabs/skeleton
Version:
This repository contains all the stylesheets for the Skeleton package.
1,537 lines (1,448 loc) • 58.5 kB
CSS
/* Note that the order of import matters. */
/* Do not change this unless prompted to. */
/* Note that the order of import matters. */
/* Do not change this unless prompted to. */
/* Base - Globals */
/* Global styles that are enabled by default. */
@layer base {
:root {
/* Color Scheme --- */
/* https://tailwindcss.com/docs/color-scheme */
color-scheme: light;
@variant dark {
color-scheme: dark;
}
/* Scrollbars --- */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color */
/* https://developer.chrome.com/docs/css-ui/scrollbar-styling */
scrollbar-color: var(--color-surface-300-700) var(--color-surface-100-900); /* thumb / track */
scrollbar-width: thin;
}
html {
/* Mobile Tap Highlight Color (WebKit only) --- */
/* IMPORTANT: this is useful for mobile accessibility. */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */
/* -webkit-tap-highlight-color: rgba(128, 128, 128, 0.5); */
-webkit-tap-highlight-color: color-mix(in oklab, var(--color-primary-500) 30%, transparent);
}
body {
/* Background */
background-color: var(--body-background-color);
@variant dark {
background-color: var(--body-background-color-dark);
}
/* Typography */
color: var(--base-font-color);
font-family: var(--base-font-family);
font-size: var(--base-font-size);
line-height: var(--base-line-height);
font-weight: var(--base-font-weight);
font-style: var(--base-font-style);
letter-spacing: var(--base-letter-spacing);
@variant dark {
color: var(--base-font-color-dark);
}
}
/* Elements --- */
/* https://tailwindcss.com/docs/upgrade-guide#buttons-use-the-default-cursor */
button:not(:disabled),
[role='button']:not(:disabled) {
cursor: pointer;
}
/* Form Placeholders --- */
.input::placeholder,
.textarea::placeholder,
.ig-input::placeholder,
.ig-textarea::placeholder {
color: var(--color-surface-700-300);
}
/* Selection --- */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/::selection */
::selection {
background-color: color-mix(in srgb, var(--color-primary-500) 50%, transparent);
}
/* States --- */
*:disabled,
.disabled {
opacity: 0.5;
& > * {
pointer-events: none;
}
}
/* Outlines and Focus --- */
/*
REMINDER: Never disabled focus and outlines
as this would be harmful to accessibility!
Source: http://www.outlinenone.com/
EXAMPLE: Set a global focus style.
Apply this in your app's global stylesheet:
:focus { @apply focus:outline-primary-50; }
*/
/* Component Focus Utility */
/* .focused {
@apply ring-[2px] ring-surface-950 dark:ring-surface-50 ring-inset;
} */
}
/* Base - Theme */
/* Configure the default @theme settings. */
/* Colors --- */
/* Themes --- */
@theme {
/* Spacing --- */
/* https://tailwindcss.com/docs/functions-and-directives#spacing-function */
--spacing: 0.25rem;
/* Typography --- */
--text-scaling: 1;
/* --- */
--base-font-color: inherit;
--base-font-color-dark: inherit;
--base-font-family: inherit;
--base-font-size: inherit;
--base-line-height: inherit;
--base-font-weight: inherit;
--base-font-style: inherit;
--base-letter-spacing: inherit;
/* --- */
--heading-font-color: inherit;
--heading-font-color-dark: inherit;
--heading-font-family: inherit;
--heading-font-weight: inherit;
--heading-font-style: inherit;
--heading-letter-spacing: inherit;
/* --- */
--anchor-font-color: inherit;
--anchor-font-color-dark: inherit;
--anchor-font-family: inherit;
--anchor-font-size: inherit;
--anchor-line-height: inherit;
--anchor-font-weight: inherit;
--anchor-font-style: inherit;
--anchor-letter-spacing: inherit;
--anchor-text-decoration: inherit;
--anchor-text-decoration-hover: underline;
--anchor-text-decoration-active: inherit;
--anchor-text-decoration-focus: inherit;
/* Radius --- */
--radius-base: 0.25rem;
--radius-container: 0.25rem;
/* Edges --- */
--default-border-width: 1px;
--default-divide-width: 1px;
--default-ring-width: 1px;
/* Animations --- */
--animate-progress-indeterminate: anim-progress-indeterminate 2s linear infinite;
--animate-ring-indeterminate: anim-ring-indeterminate 2s linear infinite;
/* Colors --- */
--color-primary-50: oklch(98.5% 0 0deg);
--color-primary-100: oklch(97% 0 0deg);
--color-primary-200: oklch(92.2% 0 0deg);
--color-primary-300: oklch(87% 0 0deg);
--color-primary-400: oklch(70.8% 0 0deg);
--color-primary-500: oklch(55.6% 0 0deg);
--color-primary-600: oklch(43.9% 0 0deg);
--color-primary-700: oklch(37.1% 0 0deg);
--color-primary-800: oklch(26.9% 0 0deg);
--color-primary-900: oklch(20.5% 0 0deg);
--color-primary-950: oklch(14.5% 0 0deg);
--color-primary-contrast-dark: var(--color-primary-950);
--color-primary-contrast-light: var(--color-primary-50);
--color-primary-contrast-50: var(--color-primary-contrast-dark);
--color-primary-contrast-100: var(--color-primary-contrast-dark);
--color-primary-contrast-200: var(--color-primary-contrast-dark);
--color-primary-contrast-300: var(--color-primary-contrast-dark);
--color-primary-contrast-400: var(--color-primary-contrast-light);
--color-primary-contrast-500: var(--color-primary-contrast-light);
--color-primary-contrast-600: var(--color-primary-contrast-light);
--color-primary-contrast-700: var(--color-primary-contrast-light);
--color-primary-contrast-800: var(--color-primary-contrast-light);
--color-primary-contrast-900: var(--color-primary-contrast-light);
--color-primary-contrast-950: var(--color-primary-contrast-light);
--color-secondary-50: oklch(98.5% 0 0deg);
--color-secondary-100: oklch(97% 0 0deg);
--color-secondary-200: oklch(92.2% 0 0deg);
--color-secondary-300: oklch(87% 0 0deg);
--color-secondary-400: oklch(70.8% 0 0deg);
--color-secondary-500: oklch(55.6% 0 0deg);
--color-secondary-600: oklch(43.9% 0 0deg);
--color-secondary-700: oklch(37.1% 0 0deg);
--color-secondary-800: oklch(26.9% 0 0deg);
--color-secondary-900: oklch(20.5% 0 0deg);
--color-secondary-950: oklch(14.5% 0 0deg);
--color-secondary-contrast-dark: var(--color-secondary-950);
--color-secondary-contrast-light: var(--color-secondary-50);
--color-secondary-contrast-50: var(--color-secondary-contrast-dark);
--color-secondary-contrast-100: var(--color-secondary-contrast-dark);
--color-secondary-contrast-200: var(--color-secondary-contrast-dark);
--color-secondary-contrast-300: var(--color-secondary-contrast-dark);
--color-secondary-contrast-400: var(--color-secondary-contrast-light);
--color-secondary-contrast-500: var(--color-secondary-contrast-light);
--color-secondary-contrast-600: var(--color-secondary-contrast-light);
--color-secondary-contrast-700: var(--color-secondary-contrast-light);
--color-secondary-contrast-800: var(--color-secondary-contrast-light);
--color-secondary-contrast-900: var(--color-secondary-contrast-light);
--color-secondary-contrast-950: var(--color-secondary-contrast-light);
--color-tertiary-50: oklch(98.5% 0 0deg);
--color-tertiary-100: oklch(97% 0 0deg);
--color-tertiary-200: oklch(92.2% 0 0deg);
--color-tertiary-300: oklch(87% 0 0deg);
--color-tertiary-400: oklch(70.8% 0 0deg);
--color-tertiary-500: oklch(55.6% 0 0deg);
--color-tertiary-600: oklch(43.9% 0 0deg);
--color-tertiary-700: oklch(37.1% 0 0deg);
--color-tertiary-800: oklch(26.9% 0 0deg);
--color-tertiary-900: oklch(20.5% 0 0deg);
--color-tertiary-950: oklch(14.5% 0 0deg);
--color-tertiary-contrast-dark: var(--color-tertiary-950);
--color-tertiary-contrast-light: var(--color-tertiary-50);
--color-tertiary-contrast-50: var(--color-tertiary-contrast-dark);
--color-tertiary-contrast-100: var(--color-tertiary-contrast-dark);
--color-tertiary-contrast-200: var(--color-tertiary-contrast-dark);
--color-tertiary-contrast-300: var(--color-tertiary-contrast-dark);
--color-tertiary-contrast-400: var(--color-tertiary-contrast-light);
--color-tertiary-contrast-500: var(--color-tertiary-contrast-light);
--color-tertiary-contrast-600: var(--color-tertiary-contrast-light);
--color-tertiary-contrast-700: var(--color-tertiary-contrast-light);
--color-tertiary-contrast-800: var(--color-tertiary-contrast-light);
--color-tertiary-contrast-900: var(--color-tertiary-contrast-light);
--color-tertiary-contrast-950: var(--color-tertiary-contrast-light);
--color-success-50: oklch(98.5% 0 0deg);
--color-success-100: oklch(97% 0 0deg);
--color-success-200: oklch(92.2% 0 0deg);
--color-success-300: oklch(87% 0 0deg);
--color-success-400: oklch(70.8% 0 0deg);
--color-success-500: oklch(55.6% 0 0deg);
--color-success-600: oklch(43.9% 0 0deg);
--color-success-700: oklch(37.1% 0 0deg);
--color-success-800: oklch(26.9% 0 0deg);
--color-success-900: oklch(20.5% 0 0deg);
--color-success-950: oklch(14.5% 0 0deg);
--color-success-contrast-dark: var(--color-success-950);
--color-success-contrast-light: var(--color-success-50);
--color-success-contrast-50: var(--color-success-contrast-dark);
--color-success-contrast-100: var(--color-success-contrast-dark);
--color-success-contrast-200: var(--color-success-contrast-dark);
--color-success-contrast-300: var(--color-success-contrast-dark);
--color-success-contrast-400: var(--color-success-contrast-light);
--color-success-contrast-500: var(--color-success-contrast-light);
--color-success-contrast-600: var(--color-success-contrast-light);
--color-success-contrast-700: var(--color-success-contrast-light);
--color-success-contrast-800: var(--color-success-contrast-light);
--color-success-contrast-900: var(--color-success-contrast-light);
--color-success-contrast-950: var(--color-success-contrast-light);
--color-warning-50: oklch(98.5% 0 0deg);
--color-warning-100: oklch(97% 0 0deg);
--color-warning-200: oklch(92.2% 0 0deg);
--color-warning-300: oklch(87% 0 0deg);
--color-warning-400: oklch(70.8% 0 0deg);
--color-warning-500: oklch(55.6% 0 0deg);
--color-warning-600: oklch(43.9% 0 0deg);
--color-warning-700: oklch(37.1% 0 0deg);
--color-warning-800: oklch(26.9% 0 0deg);
--color-warning-900: oklch(20.5% 0 0deg);
--color-warning-950: oklch(14.5% 0 0deg);
--color-warning-contrast-dark: var(--color-warning-950);
--color-warning-contrast-light: var(--color-warning-50);
--color-warning-contrast-50: var(--color-warning-contrast-dark);
--color-warning-contrast-100: var(--color-warning-contrast-dark);
--color-warning-contrast-200: var(--color-warning-contrast-dark);
--color-warning-contrast-300: var(--color-warning-contrast-dark);
--color-warning-contrast-400: var(--color-warning-contrast-light);
--color-warning-contrast-500: var(--color-warning-contrast-light);
--color-warning-contrast-600: var(--color-warning-contrast-light);
--color-warning-contrast-700: var(--color-warning-contrast-light);
--color-warning-contrast-800: var(--color-warning-contrast-light);
--color-warning-contrast-900: var(--color-warning-contrast-light);
--color-warning-contrast-950: var(--color-warning-contrast-light);
--color-error-50: oklch(98.5% 0 0deg);
--color-error-100: oklch(97% 0 0deg);
--color-error-200: oklch(92.2% 0 0deg);
--color-error-300: oklch(87% 0 0deg);
--color-error-400: oklch(70.8% 0 0deg);
--color-error-500: oklch(55.6% 0 0deg);
--color-error-600: oklch(43.9% 0 0deg);
--color-error-700: oklch(37.1% 0 0deg);
--color-error-800: oklch(26.9% 0 0deg);
--color-error-900: oklch(20.5% 0 0deg);
--color-error-950: oklch(14.5% 0 0deg);
--color-error-contrast-dark: var(--color-error-950);
--color-error-contrast-light: var(--color-error-50);
--color-error-contrast-50: var(--color-error-contrast-dark);
--color-error-contrast-100: var(--color-error-contrast-dark);
--color-error-contrast-200: var(--color-error-contrast-dark);
--color-error-contrast-300: var(--color-error-contrast-dark);
--color-error-contrast-400: var(--color-error-contrast-light);
--color-error-contrast-500: var(--color-error-contrast-light);
--color-error-contrast-600: var(--color-error-contrast-light);
--color-error-contrast-700: var(--color-error-contrast-light);
--color-error-contrast-800: var(--color-error-contrast-light);
--color-error-contrast-900: var(--color-error-contrast-light);
--color-error-contrast-950: var(--color-error-contrast-light);
--color-surface-50: oklch(98.5% 0 0deg);
--color-surface-100: oklch(97% 0 0deg);
--color-surface-200: oklch(92.2% 0 0deg);
--color-surface-300: oklch(87% 0 0deg);
--color-surface-400: oklch(70.8% 0 0deg);
--color-surface-500: oklch(55.6% 0 0deg);
--color-surface-600: oklch(43.9% 0 0deg);
--color-surface-700: oklch(37.1% 0 0deg);
--color-surface-800: oklch(26.9% 0 0deg);
--color-surface-900: oklch(20.5% 0 0deg);
--color-surface-950: oklch(14.5% 0 0deg);
--color-surface-contrast-dark: var(--color-surface-950);
--color-surface-contrast-light: var(--color-surface-50);
--color-surface-contrast-50: var(--color-surface-contrast-dark);
--color-surface-contrast-100: var(--color-surface-contrast-dark);
--color-surface-contrast-200: var(--color-surface-contrast-dark);
--color-surface-contrast-300: var(--color-surface-contrast-dark);
--color-surface-contrast-400: var(--color-surface-contrast-light);
--color-surface-contrast-500: var(--color-surface-contrast-light);
--color-surface-contrast-600: var(--color-surface-contrast-light);
--color-surface-contrast-700: var(--color-surface-contrast-light);
--color-surface-contrast-800: var(--color-surface-contrast-light);
--color-surface-contrast-900: var(--color-surface-contrast-light);
--color-surface-contrast-950: var(--color-surface-contrast-light);
}
@theme inline {
/* Backgrounds --- */
--body-background-color: var(--color-surface-50);
--body-background-color-dark: var(--color-surface-950);
/* Color Pairings --- */
/* https://github.com/tailwindlabs/tailwindcss/discussions/16292#discussioncomment-12076534 */
--color-primary-50-950: light-dark(var(--color-primary-50), var(--color-primary-950));
--color-primary-contrast-50-950: light-dark(
var(--color-primary-contrast-50),
var(--color-primary-contrast-950)
);
--color-primary-100-900: light-dark(var(--color-primary-100), var(--color-primary-900));
--color-primary-contrast-100-900: light-dark(
var(--color-primary-contrast-100),
var(--color-primary-contrast-900)
);
--color-primary-200-800: light-dark(var(--color-primary-200), var(--color-primary-800));
--color-primary-contrast-200-800: light-dark(
var(--color-primary-contrast-200),
var(--color-primary-contrast-800)
);
--color-primary-300-700: light-dark(var(--color-primary-300), var(--color-primary-700));
--color-primary-contrast-300-700: light-dark(
var(--color-primary-contrast-300),
var(--color-primary-contrast-700)
);
--color-primary-400-600: light-dark(var(--color-primary-400), var(--color-primary-600));
--color-primary-contrast-400-600: light-dark(
var(--color-primary-contrast-400),
var(--color-primary-contrast-600)
);
--color-primary-600-400: light-dark(var(--color-primary-600), var(--color-primary-400));
--color-primary-contrast-600-400: light-dark(
var(--color-primary-contrast-600),
var(--color-primary-contrast-400)
);
--color-primary-700-300: light-dark(var(--color-primary-700), var(--color-primary-300));
--color-primary-contrast-700-300: light-dark(
var(--color-primary-contrast-700),
var(--color-primary-contrast-300)
);
--color-primary-800-200: light-dark(var(--color-primary-800), var(--color-primary-200));
--color-primary-contrast-800-200: light-dark(
var(--color-primary-contrast-800),
var(--color-primary-contrast-200)
);
--color-primary-900-100: light-dark(var(--color-primary-900), var(--color-primary-100));
--color-primary-contrast-900-100: light-dark(
var(--color-primary-contrast-900),
var(--color-primary-contrast-100)
);
--color-primary-950-50: light-dark(var(--color-primary-950), var(--color-primary-50));
--color-primary-contrast-950-50: light-dark(
var(--color-primary-contrast-950),
var(--color-primary-contrast-50)
);
--color-secondary-50-950: light-dark(var(--color-secondary-50), var(--color-secondary-950));
--color-secondary-contrast-50-950: light-dark(
var(--color-secondary-contrast-50),
var(--color-secondary-contrast-950)
);
--color-secondary-100-900: light-dark(var(--color-secondary-100), var(--color-secondary-900));
--color-secondary-contrast-100-900: light-dark(
var(--color-secondary-contrast-100),
var(--color-secondary-contrast-900)
);
--color-secondary-200-800: light-dark(var(--color-secondary-200), var(--color-secondary-800));
--color-secondary-contrast-200-800: light-dark(
var(--color-secondary-contrast-200),
var(--color-secondary-contrast-800)
);
--color-secondary-300-700: light-dark(var(--color-secondary-300), var(--color-secondary-700));
--color-secondary-contrast-300-700: light-dark(
var(--color-secondary-contrast-300),
var(--color-secondary-contrast-700)
);
--color-secondary-400-600: light-dark(var(--color-secondary-400), var(--color-secondary-600));
--color-secondary-contrast-400-600: light-dark(
var(--color-secondary-contrast-400),
var(--color-secondary-contrast-600)
);
--color-secondary-600-400: light-dark(var(--color-secondary-600), var(--color-secondary-400));
--color-secondary-contrast-600-400: light-dark(
var(--color-secondary-contrast-600),
var(--color-secondary-contrast-400)
);
--color-secondary-700-300: light-dark(var(--color-secondary-700), var(--color-secondary-300));
--color-secondary-contrast-700-300: light-dark(
var(--color-secondary-contrast-700),
var(--color-secondary-contrast-300)
);
--color-secondary-800-200: light-dark(var(--color-secondary-800), var(--color-secondary-200));
--color-secondary-contrast-800-200: light-dark(
var(--color-secondary-contrast-800),
var(--color-secondary-contrast-200)
);
--color-secondary-900-100: light-dark(var(--color-secondary-900), var(--color-secondary-100));
--color-secondary-contrast-900-100: light-dark(
var(--color-secondary-contrast-900),
var(--color-secondary-contrast-100)
);
--color-secondary-950-50: light-dark(var(--color-secondary-950), var(--color-secondary-50));
--color-secondary-contrast-950-50: light-dark(
var(--color-secondary-contrast-950),
var(--color-secondary-contrast-50)
);
--color-tertiary-50-950: light-dark(var(--color-tertiary-50), var(--color-tertiary-950));
--color-tertiary-contrast-50-950: light-dark(
var(--color-tertiary-contrast-50),
var(--color-tertiary-contrast-950)
);
--color-tertiary-100-900: light-dark(var(--color-tertiary-100), var(--color-tertiary-900));
--color-tertiary-contrast-100-900: light-dark(
var(--color-tertiary-contrast-100),
var(--color-tertiary-contrast-900)
);
--color-tertiary-200-800: light-dark(var(--color-tertiary-200), var(--color-tertiary-800));
--color-tertiary-contrast-200-800: light-dark(
var(--color-tertiary-contrast-200),
var(--color-tertiary-contrast-800)
);
--color-tertiary-300-700: light-dark(var(--color-tertiary-300), var(--color-tertiary-700));
--color-tertiary-contrast-300-700: light-dark(
var(--color-tertiary-contrast-300),
var(--color-tertiary-contrast-700)
);
--color-tertiary-400-600: light-dark(var(--color-tertiary-400), var(--color-tertiary-600));
--color-tertiary-contrast-400-600: light-dark(
var(--color-tertiary-contrast-400),
var(--color-tertiary-contrast-600)
);
--color-tertiary-600-400: light-dark(var(--color-tertiary-600), var(--color-tertiary-400));
--color-tertiary-contrast-600-400: light-dark(
var(--color-tertiary-contrast-600),
var(--color-tertiary-contrast-400)
);
--color-tertiary-700-300: light-dark(var(--color-tertiary-700), var(--color-tertiary-300));
--color-tertiary-contrast-700-300: light-dark(
var(--color-tertiary-contrast-700),
var(--color-tertiary-contrast-300)
);
--color-tertiary-800-200: light-dark(var(--color-tertiary-800), var(--color-tertiary-200));
--color-tertiary-contrast-800-200: light-dark(
var(--color-tertiary-contrast-800),
var(--color-tertiary-contrast-200)
);
--color-tertiary-900-100: light-dark(var(--color-tertiary-900), var(--color-tertiary-100));
--color-tertiary-contrast-900-100: light-dark(
var(--color-tertiary-contrast-900),
var(--color-tertiary-contrast-100)
);
--color-tertiary-950-50: light-dark(var(--color-tertiary-950), var(--color-tertiary-50));
--color-tertiary-contrast-950-50: light-dark(
var(--color-tertiary-contrast-950),
var(--color-tertiary-contrast-50)
);
--color-success-50-950: light-dark(var(--color-success-50), var(--color-success-950));
--color-success-contrast-50-950: light-dark(
var(--color-success-contrast-50),
var(--color-success-contrast-950)
);
--color-success-100-900: light-dark(var(--color-success-100), var(--color-success-900));
--color-success-contrast-100-900: light-dark(
var(--color-success-contrast-100),
var(--color-success-contrast-900)
);
--color-success-200-800: light-dark(var(--color-success-200), var(--color-success-800));
--color-success-contrast-200-800: light-dark(
var(--color-success-contrast-200),
var(--color-success-contrast-800)
);
--color-success-300-700: light-dark(var(--color-success-300), var(--color-success-700));
--color-success-contrast-300-700: light-dark(
var(--color-success-contrast-300),
var(--color-success-contrast-700)
);
--color-success-400-600: light-dark(var(--color-success-400), var(--color-success-600));
--color-success-contrast-400-600: light-dark(
var(--color-success-contrast-400),
var(--color-success-contrast-600)
);
--color-success-600-400: light-dark(var(--color-success-600), var(--color-success-400));
--color-success-contrast-600-400: light-dark(
var(--color-success-contrast-600),
var(--color-success-contrast-400)
);
--color-success-700-300: light-dark(var(--color-success-700), var(--color-success-300));
--color-success-contrast-700-300: light-dark(
var(--color-success-contrast-700),
var(--color-success-contrast-300)
);
--color-success-800-200: light-dark(var(--color-success-800), var(--color-success-200));
--color-success-contrast-800-200: light-dark(
var(--color-success-contrast-800),
var(--color-success-contrast-200)
);
--color-success-900-100: light-dark(var(--color-success-900), var(--color-success-100));
--color-success-contrast-900-100: light-dark(
var(--color-success-contrast-900),
var(--color-success-contrast-100)
);
--color-success-950-50: light-dark(var(--color-success-950), var(--color-success-50));
--color-success-contrast-950-50: light-dark(
var(--color-success-contrast-950),
var(--color-success-contrast-50)
);
--color-warning-50-950: light-dark(var(--color-warning-50), var(--color-warning-950));
--color-warning-contrast-50-950: light-dark(
var(--color-warning-contrast-50),
var(--color-warning-contrast-950)
);
--color-warning-100-900: light-dark(var(--color-warning-100), var(--color-warning-900));
--color-warning-contrast-100-900: light-dark(
var(--color-warning-contrast-100),
var(--color-warning-contrast-900)
);
--color-warning-200-800: light-dark(var(--color-warning-200), var(--color-warning-800));
--color-warning-contrast-200-800: light-dark(
var(--color-warning-contrast-200),
var(--color-warning-contrast-800)
);
--color-warning-300-700: light-dark(var(--color-warning-300), var(--color-warning-700));
--color-warning-contrast-300-700: light-dark(
var(--color-warning-contrast-300),
var(--color-warning-contrast-700)
);
--color-warning-400-600: light-dark(var(--color-warning-400), var(--color-warning-600));
--color-warning-contrast-400-600: light-dark(
var(--color-warning-contrast-400),
var(--color-warning-contrast-600)
);
--color-warning-600-400: light-dark(var(--color-warning-600), var(--color-warning-400));
--color-warning-contrast-600-400: light-dark(
var(--color-warning-contrast-600),
var(--color-warning-contrast-400)
);
--color-warning-700-300: light-dark(var(--color-warning-700), var(--color-warning-300));
--color-warning-contrast-700-300: light-dark(
var(--color-warning-contrast-700),
var(--color-warning-contrast-300)
);
--color-warning-800-200: light-dark(var(--color-warning-800), var(--color-warning-200));
--color-warning-contrast-800-200: light-dark(
var(--color-warning-contrast-800),
var(--color-warning-contrast-200)
);
--color-warning-900-100: light-dark(var(--color-warning-900), var(--color-warning-100));
--color-warning-contrast-900-100: light-dark(
var(--color-warning-contrast-900),
var(--color-warning-contrast-100)
);
--color-warning-950-50: light-dark(var(--color-warning-950), var(--color-warning-50));
--color-warning-contrast-950-50: light-dark(
var(--color-warning-contrast-950),
var(--color-warning-contrast-50)
);
--color-error-50-950: light-dark(var(--color-error-50), var(--color-error-950));
--color-error-contrast-50-950: light-dark(
var(--color-error-contrast-50),
var(--color-error-contrast-950)
);
--color-error-100-900: light-dark(var(--color-error-100), var(--color-error-900));
--color-error-contrast-100-900: light-dark(
var(--color-error-contrast-100),
var(--color-error-contrast-900)
);
--color-error-200-800: light-dark(var(--color-error-200), var(--color-error-800));
--color-error-contrast-200-800: light-dark(
var(--color-error-contrast-200),
var(--color-error-contrast-800)
);
--color-error-300-700: light-dark(var(--color-error-300), var(--color-error-700));
--color-error-contrast-300-700: light-dark(
var(--color-error-contrast-300),
var(--color-error-contrast-700)
);
--color-error-400-600: light-dark(var(--color-error-400), var(--color-error-600));
--color-error-contrast-400-600: light-dark(
var(--color-error-contrast-400),
var(--color-error-contrast-600)
);
--color-error-600-400: light-dark(var(--color-error-600), var(--color-error-400));
--color-error-contrast-600-400: light-dark(
var(--color-error-contrast-600),
var(--color-error-contrast-400)
);
--color-error-700-300: light-dark(var(--color-error-700), var(--color-error-300));
--color-error-contrast-700-300: light-dark(
var(--color-error-contrast-700),
var(--color-error-contrast-300)
);
--color-error-800-200: light-dark(var(--color-error-800), var(--color-error-200));
--color-error-contrast-800-200: light-dark(
var(--color-error-contrast-800),
var(--color-error-contrast-200)
);
--color-error-900-100: light-dark(var(--color-error-900), var(--color-error-100));
--color-error-contrast-900-100: light-dark(
var(--color-error-contrast-900),
var(--color-error-contrast-100)
);
--color-error-950-50: light-dark(var(--color-error-950), var(--color-error-50));
--color-error-contrast-950-50: light-dark(
var(--color-error-contrast-950),
var(--color-error-contrast-50)
);
--color-surface-50-950: light-dark(var(--color-surface-50), var(--color-surface-950));
--color-surface-contrast-50-950: light-dark(
var(--color-surface-contrast-50),
var(--color-surface-contrast-950)
);
--color-surface-100-900: light-dark(var(--color-surface-100), var(--color-surface-900));
--color-surface-contrast-100-900: light-dark(
var(--color-surface-contrast-100),
var(--color-surface-contrast-900)
);
--color-surface-200-800: light-dark(var(--color-surface-200), var(--color-surface-800));
--color-surface-contrast-200-800: light-dark(
var(--color-surface-contrast-200),
var(--color-surface-contrast-800)
);
--color-surface-300-700: light-dark(var(--color-surface-300), var(--color-surface-700));
--color-surface-contrast-300-700: light-dark(
var(--color-surface-contrast-300),
var(--color-surface-contrast-700)
);
--color-surface-400-600: light-dark(var(--color-surface-400), var(--color-surface-600));
--color-surface-contrast-400-600: light-dark(
var(--color-surface-contrast-400),
var(--color-surface-contrast-600)
);
--color-surface-600-400: light-dark(var(--color-surface-600), var(--color-surface-400));
--color-surface-contrast-600-400: light-dark(
var(--color-surface-contrast-600),
var(--color-surface-contrast-400)
);
--color-surface-700-300: light-dark(var(--color-surface-700), var(--color-surface-300));
--color-surface-contrast-700-300: light-dark(
var(--color-surface-contrast-700),
var(--color-surface-contrast-300)
);
--color-surface-800-200: light-dark(var(--color-surface-800), var(--color-surface-200));
--color-surface-contrast-800-200: light-dark(
var(--color-surface-contrast-800),
var(--color-surface-contrast-200)
);
--color-surface-900-100: light-dark(var(--color-surface-900), var(--color-surface-100));
--color-surface-contrast-900-100: light-dark(
var(--color-surface-contrast-900),
var(--color-surface-contrast-100)
);
--color-surface-950-50: light-dark(var(--color-surface-950), var(--color-surface-50));
--color-surface-contrast-950-50: light-dark(
var(--color-surface-contrast-950),
var(--color-surface-contrast-50)
);
/* Typography --- */
--text-xs: calc(0.75rem * var(--text-scaling));
--text-xs--line-height: calc(calc(1 / 0.75) * var(--text-scaling));
--text-sm: calc(0.875rem * var(--text-scaling));
--text-sm--line-height: calc(calc(1.25 / 0.875) * var(--text-scaling));
--text-base: calc(1rem * var(--text-scaling));
--text-base--line-height: calc(calc(1.5 / 1) * var(--text-scaling));
--text-lg: calc(1.125rem * var(--text-scaling));
--text-lg--line-height: calc(calc(1.75 / 1.125) * var(--text-scaling));
--text-xl: calc(1.25rem * var(--text-scaling));
--text-xl--line-height: calc(calc(1.75 / 1.25) * var(--text-scaling));
--text-2xl: calc(1.5rem * var(--text-scaling));
--text-2xl--line-height: calc(calc(2 / 1.5) * var(--text-scaling));
--text-3xl: calc(1.875rem * var(--text-scaling));
--text-3xl--line-height: calc(calc(2.25 / 1.875) * var(--text-scaling));
--text-4xl: calc(2.25rem * var(--text-scaling));
--text-4xl--line-height: calc(calc(2.5 / 2.25) * var(--text-scaling));
--text-5xl: calc(3rem * var(--text-scaling));
--text-5xl--line-height: calc(1 * var(--text-scaling));
--text-6xl: calc(3.75rem * var(--text-scaling));
--text-6xl--line-height: calc(1 * var(--text-scaling));
--text-7xl: calc(4.5rem * var(--text-scaling));
--text-7xl--line-height: calc(1 * var(--text-scaling));
--text-8xl: calc(6rem * var(--text-scaling));
--text-8xl--line-height: calc(1 * var(--text-scaling));
--text-9xl: calc(8rem * var(--text-scaling));
--text-9xl--line-height: calc(1 * var(--text-scaling));
}
@utility body-background-color {
background-color: var(--body-background-color);
}
@utility body-background-color-dark {
background-color: var(--body-background-color-dark);
}
@utility base-font-color {
color: var(--base-font-color);
}
@utility base-font-color-dark {
color: var(--base-font-color-dark);
}
@utility base-font-family {
font-family: var(--base-font-family);
}
@utility base-font-size {
font-size: var(--base-font-size);
}
@utility base-line-height {
line-height: var(--base-line-height);
}
@utility base-font-weight {
font-weight: var(--base-font-weight);
}
@utility base-font-style {
font-style: var(--base-font-style);
}
@utility base-letter-spacing {
letter-spacing: var(--base-letter-spacing);
}
@utility heading-font-color {
color: var(--heading-font-color);
}
@utility heading-font-color-dark {
color: var(--heading-font-color-dark);
}
@utility heading-font-family {
font-family: var(--heading-font-family);
}
@utility heading-font-size {
font-size: var(--heading-font-size);
}
@utility heading-line-height {
line-height: var(--heading-line-height);
}
@utility heading-font-weight {
font-weight: var(--heading-font-weight);
}
@utility heading-font-style {
font-style: var(--heading-font-style);
}
@utility heading-letter-spacing {
letter-spacing: var(--heading-letter-spacing);
}
@utility anchor-font-color {
color: var(--anchor-font-color);
}
@utility anchor-font-color-dark {
color: var(--anchor-font-color-dark);
}
@utility anchor-font-family {
font-family: var(--anchor-font-family);
}
@utility anchor-font-size {
font-size: var(--anchor-font-size);
}
@utility anchor-line-height {
line-height: var(--anchor-line-height);
}
@utility anchor-font-weight {
font-weight: var(--anchor-font-weight);
}
@utility anchor-font-style {
font-style: var(--anchor-font-style);
}
@utility anchor-letter-spacing {
letter-spacing: var(--anchor-letter-spacing);
}
@utility anchor-text-decoration {
text-decoration: var(--anchor-text-decoration);
}
@utility anchor-text-decoration-active {
text-decoration: var(--anchor-text-decoration-active);
}
@utility anchor-text-decoration-focus {
text-decoration: var(--anchor-text-decoration-focus);
}
@utility anchor-text-decoration-hover {
text-decoration: var(--anchor-text-decoration-hover);
}
/* Components: Badges */
@utility badge {
border-radius: var(--radius-base);
/* Icon Spacing */
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: --spacing(2);
/* Typography */
text-decoration-line: none;
white-space: nowrap;
/* Size */
font-size: var(--text-xs);
line-height: var(--text-xs--line-height);
padding-block: --spacing(1);
padding-inline: --spacing(3);
}
@utility badge-icon {
box-sizing: content-box;
border-radius: 100%;
/* Center Icons */
display: inline-flex;
justify-content: center;
align-items: center;
/* Typography */
text-decoration-line: none;
white-space: nowrap;
/* Size */
font-size: var(--text-xs);
width: var(--text-xs);
height: var(--text-xs);
padding: --spacing(1.5);
}
/* Components: Buttons */
@utility btn {
border-radius: var(--radius-base);
/* Icon Spacing */
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: --spacing(2);
/* Typography */
text-decoration-line: none;
white-space: nowrap;
/* Size */
font-size: var(--text-base);
line-height: var(--text-base--line-height);
padding-block: --spacing(1);
padding-inline: --spacing(4);
/* Transitions */
transition-property: all;
transition-timing-function: var(--default-transition-timing-function);
transition-duration: var(--default-transition-duration);
@variant hover {
filter: brightness(125%);
@variant dark {
filter: brightness(75%);
}
}
}
@utility btn-icon {
box-sizing: content-box;
border-radius: var(--radius-base);
/* Center Icons */
display: inline-flex;
justify-content: center;
align-items: center;
/* Typography */
text-decoration-line: none;
white-space: nowrap;
/* Size */
font-size: var(--text-base);
width: var(--text-base);
height: var(--text-base);
padding: --spacing(2);
@variant hover {
filter: brightness(125%);
@variant dark {
filter: brightness(75%);
}
}
}
/* Sizes --- */
/* Button */
@utility btn-sm {
font-size: var(--text-xs);
line-height: var(--text-xs--line-height);
padding-block: --spacing(1);
padding-inline: --spacing(3);
}
@utility btn-base {
font-size: var(--text-base);
line-height: var(--text-base--line-height);
padding-block: --spacing(1);
padding-inline: --spacing(4);
}
@utility btn-lg {
font-size: var(--text-xl);
line-height: var(--text-xl--line-height);
padding-block: --spacing(2);
padding-inline: --spacing(5);
}
/* Button Icon */
@utility btn-icon-sm {
font-size: var(--text-xs);
width: var(--text-xs);
height: var(--text-xs);
padding: --spacing(1.5);
}
@utility btn-icon-base {
font-size: var(--text-base);
width: var(--text-base);
height: var(--text-base);
padding: --spacing(2);
}
@utility btn-icon-lg {
font-size: var(--text-xl);
width: var(--text-xl);
height: var(--text-xl);
padding: --spacing(3);
}
/* Group --- */
@utility btn-group {
border-radius: var(--radius-container);
display: inline-flex;
align-items: center;
gap: --spacing(2);
padding: --spacing(2);
overflow: hidden;
}
/* Components: Cards */
@utility card {
border-radius: var(--radius-container);
&a {
/* Transitions (all) */
transition-property: all;
transition-timing-function: var(--default-transition-timing-function);
transition-duration: var(--default-transition-duration);
@variant hover {
filter: brightness(95%);
@variant dark {
filter: brightness(110%);
}
}
}
}
@utility card-hover {
/* Transitions (all) */
transition-property: all;
transition-timing-function: var(--default-transition-timing-function);
transition-duration: var(--default-transition-duration);
@variant hover {
filter: brightness(95%);
@variant dark {
filter: brightness(110%);
}
}
}
/* Components: Chips */
@utility chip {
border-radius: var(--radius-base);
/* Icon Spacing */
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: --spacing(2);
/* Typography */
text-decoration-line: none;
white-space: nowrap;
/* Size */
font-size: var(--text-xs);
line-height: var(--text-xs--line-height);
padding-block: --spacing(1);
padding-inline: --spacing(3);
/* Transitions */
transition-property: all;
transition-timing-function: var(--default-transition-timing-function);
transition-duration: var(--default-transition-duration);
@variant hover {
filter: brightness(125%);
@variant dark {
filter: brightness(75%);
}
}
}
@utility chip-icon {
box-sizing: content-box;
border-radius: var(--radius-base);
/* Center Icons */
display: inline-flex;
justify-content: center;
align-items: center;
/* Typography */
text-decoration-line: none;
white-space: nowrap;
/* Size */
font-size: var(--text-xs);
width: var(--text-xs);
height: var(--text-xs);
padding: --spacing(1.5);
@variant hover {
filter: brightness(125%);
@variant dark {
filter: brightness(75%);
}
}
}
/* Components: Dividers */
/* Horizontal Rule */
@utility hr {
border-color: var(--color-surface-200-800);
border-top-width: 1px;
display: block;
width: 100%;
}
/* Vertical Rule */
@utility vr {
border-color: var(--color-surface-200-800);
border-left-width: 1px;
display: inline-block;
height: 100%;
}
/* Components: Placeholders */
@utility placeholder {
background-color: var(--color-surface-200-800);
border-radius: var(--radius-base);
min-height: --spacing(4);
}
@utility placeholder-circle {
aspect-ratio: 1 / 1;
background-color: var(--color-surface-200-800);
border-radius: 100%;
min-height: --spacing(5);
}
/* Components: Tables */
@utility table-wrap {
width: 100%;
overflow: auto;
}
@utility table {
/* Table --- */
font-size: var(--text-sm);
line-height: var(--text-sm--line-height);
position: relative;
width: 100%;
/* Head --- */
& thead {
color: var(--color-surface-700-300);
border-bottom-width: 1px;
border-color: var(--color-surface-200-800);
}
& th {
text-align: left;
font-weight: 400;
}
/* Body --- */
& tbody {
& > :not(:last-child) {
border-color: var(--color-surface-200-800);
}
& > :not(:last-child) {
border-top-width: 0px;
border-bottom-width: 1px;
}
}
/* Foot --- */
& tfoot {
border-top-width: 1px;
border-color: var(--color-surface-200-800);
background-color: var(--color-surface-100-900);
}
/* Cells */
& th {
padding: --spacing(2);
}
& td {
padding: --spacing(2);
}
/* Caption */
& caption {
color: var(--color-surface-600-400);
font-size: var(--text-xs);
line-height: var(--text-xs--line-height);
}
}
/* Components: Typography */
@utility h1 {
color: var(--heading-font-color);
font-family: var(--heading-font-family);
font-weight: var(--heading-font-weight);
font-style: var(--heading-font-style);
letter-spacing: var(--heading-letter-spacing);
font-size: var(--text-4xl);
line-height: var(--text-4xl--line-height);
@variant md {
font-size: var(--text-5xl);
line-height: var(--text-5xl--line-height);
}
@variant dark {
color: var(--heading-font-color-dark);
}
}
@utility h2 {
color: var(--heading-font-color);
font-family: var(--heading-font-family);
font-weight: var(--heading-font-weight);
font-style: var(--heading-font-style);
letter-spacing: var(--heading-letter-spacing);
font-size: var(--text-3xl);
line-height: var(--text-3xl--line-height);
@variant md {
font-size: var(--text-4xl);
line-height: var(--text-4xl--line-height);
}
@variant dark {
color: var(--heading-font-color-dark);
}
}
@utility h3 {
color: var(--heading-font-color);
font-family: var(--heading-font-family);
font-weight: var(--heading-font-weight);
font-style: var(--heading-font-style);
letter-spacing: var(--heading-letter-spacing);
font-size: var(--text-2xl);
line-height: var(--text-2xl--line-height);
@variant md {
font-size: var(--text-3xl);
line-height: var(--text-3xl--line-height);
}
@variant dark {
color: var(--heading-font-color-dark);
}
}
@utility h4 {
color: var(--heading-font-color);
font-family: var(--heading-font-family);
font-weight: var(--heading-font-weight);
font-style: var(--heading-font-style);
letter-spacing: var(--heading-letter-spacing);
font-size: var(--text-xl);
line-height: var(--text-xl--line-height);
@variant md {
font-size: var(--text-2xl);
line-height: var(--text-2xl--line-height);
}
@variant dark {
color: var(--heading-font-color-dark);
}
}
@utility h5 {
color: var(--heading-font-color);
font-family: var(--heading-font-family);
font-weight: var(--heading-font-weight);
font-style: var(--heading-font-style);
letter-spacing: var(--heading-letter-spacing);
font-size: var(--text-lg);
line-height: var(--text-lg--line-height);
@variant md {
font-size: var(--text-xl);
line-height: var(--text-xl--line-height);
}
@variant dark {
color: var(--heading-font-color-dark);
}
}
@utility h6 {
color: var(--heading-font-color);
font-family: var(--heading-font-family);
font-weight: var(--heading-font-weight);
font-style: var(--heading-font-style);
letter-spacing: var(--heading-letter-spacing);
font-size: var(--text-base);
line-height: var(--text-base--line-height);
@variant md {
font-size: var(--text-lg);
line-height: var(--text-lg--line-height);
}
@variant dark {
color: var(--heading-font-color-dark);
}
}
@utility anchor {
color: var(--anchor-font-color);
font-family: var(--anchor-font-family);
font-size: var(--anchor-font-size);
line-height: var(--anchor-line-height);
font-weight: var(--anchor-font-weight);
font-style: var(--anchor-font-style);
letter-spacing: var(--anchor-letter-spacing);
text-decoration: var(--anchor-text-decoration);
@variant hover {
text-decoration: var(--anchor-text-decoration-hover);
}
@variant active {
text-decoration: var(--anchor-text-decoration-active);
}
@variant focus {
text-decoration: var(--anchor-text-decoration-focus);
}
@variant dark {
color: var(--anchor-font-color-dark);
}
}
@utility blockquote {
border-left-width: 3px;
border-left-color: var(--color-primary-500);
padding-left: --spacing(4);
font-style: italic;
}
@utility kbd {
background-color: var(--color-surface-300-700);
border-width: 1px;
border-color: var(--color-surface-600-400);
border-radius: var(--radius-base);
color: var(--color-surface-contrast-500);
font-family: var(--font-mono);
font-size: var(--text-sm);
white-space: nowrap;
overflow-x: auto;
padding-inline: --spacing(1.5);
padding-block: --spacing(0.25);
}
@utility pre {
background-color: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(var(--blur-sm));
border-radius: var(--radius-container);
color: var(--color-white);
font-size: var(--text-xs);
white-space: pre-wrap;
padding: --spacing(4);
overflow-x: auto;
}
@utility code {
&:not(pre &, .ec-line &) {
background-color: var(--color-primary-100-900);
border-radius: var(--radius-base);
color: var(--color-primary-contrast-50-950);
font-family: var(--font-mono);
font-size: var(--text-xs);
white-space: nowrap;
padding-inline: --spacing(1.5);
padding-block: --spacing(0.75);
overflow-x: auto;
}
}
/* Insertions / Deletions --- */
/* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins */
/* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del */
@utility ins {
background-color: var(--color-success-500);
color: var(--color-success-contrast-500);
font-family: var(--font-mono);
position: relative;
display: block;
padding: --spacing(0.5);
padding-left: --spacing(5);
text-decoration: none;
&::before {
position: absolute;
left: --spacing(1);
font-family: var(--font-mono);
}
&::before {
content: '+';
}
}
@utility del {
background-color: var(--color-error-500);
color: var(--color-error-contrast-500);
font-family: var(--font-mono);
position: relative;
display: block;
padding: --spacing(0.5);
padding-left: --spacing(5);
text-decoration: none;
&::before {
position: absolute;
left: --spacing(1);
font-family: var(--font-mono);
}
&::before {
content: '−';
}
}
@utility mark {
color: var(--color-tertiary-contrast-500);
background-color: var(--color-tertiary-500);
border-radius: var(--radius-sm);
padding-inline: --spacing(1);
}
/* Forms */
/* Components: Forms (Core) */
@utility fieldset {
display: block;
width: 100%;
}
@utility legend {
display: block;
width: 100%;
}
@utility label {
display: block;
width: 100%;
& > * + * {
margin-top: --spacing(1);
}
}
@utility label-text {
display: block;
font-size: var(--text-xs);
line-height: var(--text-xs--line-height);
font-weight: var(--font-weight-medium);
text-decoration-line: none;
}
/* Components: Forms > Input Group */
@utility input-group {
border-radius: var(--radius-base);
display: grid;
align-items: stretch;
overflow: hidden;
/* Edges */
outline-color: transparent;
border-width: 0;
--tw-ring-inset: inset;
--tw-ring-color: var(--color-surface-200-800);
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 var(--default-ring-width) var(--tw-ring-color, currentColor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
/* Dividers */
& > * + * {
border-left-width: 1px !important;
border-color: var(--color-surface-200-800);
}
}
/* Children: Cell --- */
@utility ig-cell {
font-size: var(--text-sm);
display: flex;
justify-content: center;
align-items: center;
padding-inline: --spacing(4);
}
/* Children: Form Elements --- */
/* We recreate a subset of form element styles here */
/* These are purpose-built to work in the group */
@utility ig-input {
background-color: transparent;
display: block;
width: 100%;
/* Size */
font-size: var(--text-base);
line-height: var(--text-base--line-height);
padding-block: --spacing(1);
padding-inline: --spacing(3);
/* Edges */
outline-color: transparent;
border-width: 0;
--tw-ring-inset: inset;
@variant active {
--tw-ring-color: var(--color-primary-500);
}
@variant focus {
--tw-ring-color: var(--color-primary-500);
}
@variant focus-within {
--tw-ring-color: var(--color-primary-500);
}
}
@utility ig-select {
background-color: transparent;
display: block;
width: 100%;
/* Size */
font-size: var(--text-base);
line-height: var(--text-base--line-height);
padding-block: --spacing(1);
/* Edges */
outline-color: transparent;
border-width: 0;
--tw-ring-inset: inset;
@variant active {
--tw-ring-color: var(--color-primary-500);
}
@variant focus {
--tw-ring-color: var(--color-primary-500);
}
@variant focus-within {
--tw-ring-color: var(--color-primary-500);
}
/* Option --- */
& option {
background-color: var(--color-surface-50-950);
color: var(--color-surface-950-50);
border-radius: var(--radius-base);
font-size: var(--text-base);
line-height: --spacing(9);
height: --spacing(9);
padding: --spacing(2);
}
}
@utility ig-btn {
/* Icon Spacing */
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: --spacing(2);
/* Typography */
text-decoration-line: none;
white-space: nowrap;
/* Size */
font-size: var(--text-base);
line-height: var(--text-base--line-height);
padding-block: --spacing(1);
padding-inline: --spacing(4);
/* Transitions */
transition-property: all;
transition-timing-function: var(--default-transition-timing-function);
transition-duration: var(--default-transition-duration);
@variant hover {
filter: brightness(125%);
@variant dark {
filter: brightness(75%);
}
}
}
/* Components: Forms > Input */
@utility input {
background-color: transparent;
border-radius: var(--radius-base);
display: block;
width: 100%;
/* Size */
font-size: var(--text-base);
line-height: var(--text-base--line-height);
padding-block: --spacing(1);
padding-inline: --spacing(3);
/* Edges */
outline-color: transparent;
border-width: 0;
--tw-ring-inset: inset;
--tw-ring-color: var(--color-surface-200-800);
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 var(--default-ring-width) var(--tw-ring-color, currentColor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@variant active {
--tw-ring-color: var(--color-primary-500);
}
@variant focus {
--tw-ring-color: var(--color-primary-500);
}
@variant focus-within {
--tw-ring-color: var(--color-primary-500);
}
/* File Input --- */
&[type='file']::file-selector-button {
cursor: pointer;
border-radius: var(--radius-base);
background-color: var(--color-surface-950-50);
color: var(--color-surface-50-950);
transform: translateY(--spacing(-0.5));
margin-right: --spacing(2);
text-transform: capitalize;
/* Size */
font-size: var(--text-xs);
height: var(--text-xs--line-height);
padding-block: --spacing(0);
padding-inline: --s