@veracity/vui-poc 0.1.0

package/src/styles.css

@@ -0,0 +1,323 @@
+@import "tailwindcss";
+
+@import "./default.css" layer(theme);
+@import "./color-light.css";
+@import "./color-dark.css";
+@import "./color-primitives.css";
+
+.vui-button:focus-visible,
+.vui-button[data-focus-visible],
+.vui-button.vui-force-focus {
+	outline: 3px solid var(--vui-utility-focus);
+	outline-offset: 0;
+}
+
+.vui-icon-button:focus-visible,
+.vui-icon-button[data-focus-visible],
+.vui-icon-button.vui-force-focus {
+	outline: 3px solid var(--vui-utility-focus);
+	outline-offset: 0;
+}
+
+.vui-button[data-active] {
+	cursor: default;
+}
+
+.vui-notification,
+.vui-banner-notification {
+	--vui-notification-accent: var(--vui-feedback-info-solid);
+	--vui-notification-bg: var(--vui-feedback-info-subtle);
+	/* Defaults match `data-size="md"`. Overridden below for `sm`. */
+	--vui-notification-title-font-size: 1rem; /* 16px */
+	--vui-notification-body-font-size: 1rem; /* 16px */
+	background-color: var(--vui-notification-bg);
+	color: var(--vui-notification-accent);
+}
+
+.vui-notification[data-size="sm"],
+.vui-banner-notification[data-size="sm"] {
+	--vui-notification-title-font-size: 0.875rem; /* 14px */
+	--vui-notification-body-font-size: 0.875rem; /* 14px */
+}
+
+.vui-notification .vui-notification-title,
+.vui-banner-notification .vui-notification-title {
+	font-size: var(--vui-notification-title-font-size);
+}
+
+.vui-notification .vui-notification-body,
+.vui-banner-notification .vui-notification-body {
+	font-size: var(--vui-notification-body-font-size);
+}
+
+.vui-notification {
+	border-color: var(--vui-notification-accent);
+}
+
+.vui-notification .vui-notification-icon,
+.vui-banner-notification .vui-notification-icon {
+	color: var(--vui-notification-accent);
+}
+
+.vui-notification .vui-notification-title,
+.vui-banner-notification .vui-notification-title,
+.vui-notification .vui-notification-body,
+.vui-banner-notification .vui-notification-body {
+	color: var(--vui-notification-accent);
+}
+
+/* Dismiss button inherits the notification's accent color via currentColor
+ * so its tertiary styling tints with the surrounding intent instead of
+ * using the IconButton's own intent color. */
+.vui-notification .vui-notification-dismiss,
+.vui-banner-notification .vui-notification-dismiss {
+	color: currentColor;
+}
+
+/* Override tertiary hover/press backgrounds to use the notification's own
+ * accent at 20% opacity, matching the upstream VUI behaviour. */
+.vui-notification .vui-notification-dismiss[data-hovered],
+.vui-banner-notification .vui-notification-dismiss[data-hovered] {
+	background-color: color-mix(in srgb, var(--vui-notification-accent) 20%, transparent);
+}
+
+.vui-notification .vui-notification-dismiss[data-pressed],
+.vui-banner-notification .vui-notification-dismiss[data-pressed] {
+	background-color: color-mix(in srgb, var(--vui-notification-accent) 30%, transparent);
+}
+
+.vui-notification[data-intent="info"],
+.vui-banner-notification[data-intent="info"] {
+	--vui-notification-accent: var(--vui-feedback-info-solid);
+	--vui-notification-bg: var(--vui-feedback-info-subtle);
+}
+
+.vui-notification[data-intent="success"],
+.vui-banner-notification[data-intent="success"] {
+	--vui-notification-accent: var(--vui-feedback-success-solid);
+	--vui-notification-bg: var(--vui-feedback-success-subtle);
+}
+
+.vui-notification[data-intent="warning"],
+.vui-banner-notification[data-intent="warning"] {
+	--vui-notification-accent: var(--vui-feedback-warning-solid);
+	--vui-notification-bg: var(--vui-feedback-warning-subtle);
+}
+
+.vui-notification[data-intent="danger"],
+.vui-banner-notification[data-intent="danger"] {
+	--vui-notification-accent: var(--vui-feedback-danger-solid);
+	--vui-notification-bg: var(--vui-feedback-danger-subtle);
+}
+
+/* Animated swipe underline for links inside VUI components (matches
+ * uitest). Limited to component scopes so it never affects MDX docs prose
+ * or Storybook chrome. Add `.vui-link` to opt in elsewhere; add
+ * `.vui-link-bare` to opt out within a scope.
+ *
+ * Links are underlined by default (background-size: 100% 1px) so they are
+ * always distinguishable from surrounding text. On hover/focus the
+ * underline re-draws itself in from left to right (linkSwipe animation). */
+@keyframes vui-link-swipe {
+	from {
+		background-size: 0 1px;
+	}
+	to {
+		background-size: 100% 1px;
+	}
+}
+
+:where(.vui-notification, .vui-banner-notification) a:not(.vui-link-bare),
+a.vui-link {
+	color: var(--vui-notification-accent);
+	text-decoration: none;
+	background: linear-gradient(to right, currentColor, currentColor) 0 100% / 100% 1px no-repeat;
+	padding-bottom: 2px;
+}
+
+:where(.vui-notification, .vui-banner-notification)
+	a:not(.vui-link-bare):is(:hover, :focus-visible),
+a.vui-link:is(:hover, :focus-visible) {
+	animation: vui-link-swipe 0.5s ease forwards;
+}
+
+a.vui-link-bare {
+	background: none;
+	padding-bottom: 0;
+}
+
+/* Indeterminate spin used by `SpinnerIcon` and any element opting in via the
+ * `vui-spin` utility class. Honors `prefers-reduced-motion` below. */
+@keyframes vui-spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+.vui-spin {
+	animation: vui-spin 1s linear infinite;
+	transform-origin: center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	:where(.vui-notification, .vui-banner-notification)
+		a:not(.vui-link-bare):is(:hover, :focus-visible),
+	a.vui-link:is(:hover, :focus-visible) {
+		animation: none;
+	}
+
+	.vui-spin {
+		animation: none;
+	}
+}
+
+.vui-text-field {
+	--vui-text-field-border: var(--vui-control-border-default);
+	--vui-text-field-focus: var(--vui-utility-focus);
+	--vui-text-field-message: var(--vui-control-helper);
+	--vui-text-field-placeholder: var(--vui-control-placeholder);
+	--vui-text-field-text: var(--vui-control-label);
+	color: var(--vui-text-field-text);
+}
+
+.vui-text-field[data-intent="success"] {
+	--vui-text-field-border: var(--vui-feedback-success-solid);
+	--vui-text-field-focus: var(--vui-feedback-success-solid);
+	--vui-text-field-message: var(--vui-feedback-success-solid);
+}
+
+.vui-text-field[data-intent="danger"],
+.vui-text-field[data-invalid] {
+	--vui-text-field-border: var(--vui-feedback-danger-solid);
+	--vui-text-field-focus: var(--vui-feedback-danger-solid);
+	--vui-text-field-message: var(--vui-feedback-danger-solid);
+}
+
+.vui-text-field[data-size="sm"] {
+	--vui-text-field-height: 24px;
+	--vui-text-field-input-size: 0.875rem;
+	--vui-text-field-label-size: 0.875rem;
+	--vui-text-field-message-size: 0.875rem;
+}
+
+.vui-text-field[data-size="md"] {
+	--vui-text-field-height: 32px;
+	--vui-text-field-input-size: 1rem;
+	--vui-text-field-label-size: 1rem;
+	--vui-text-field-message-size: 0.875rem;
+}
+
+.vui-text-field[data-size="lg"] {
+	--vui-text-field-height: 40px;
+	--vui-text-field-input-size: 1rem;
+	--vui-text-field-label-size: 1rem;
+	--vui-text-field-message-size: 0.875rem;
+}
+
+.vui-text-field[data-size="xl"] {
+	--vui-text-field-height: 48px;
+	--vui-text-field-input-size: 1.125rem;
+	--vui-text-field-label-size: 1rem;
+	--vui-text-field-message-size: 1rem;
+}
+
+.vui-text-field-label {
+	color: var(--vui-text-field-text);
+	font-size: var(--vui-text-field-label-size);
+	font-weight: 700;
+	line-height: 1.35;
+}
+
+.vui-text-field-input {
+	height: var(--vui-text-field-height);
+	border-color: var(--vui-text-field-border);
+	color: var(--vui-text-field-text);
+	font-size: var(--vui-text-field-input-size);
+	line-height: 1.35;
+	transition-duration: 0s;
+}
+
+.vui-text-field-input::placeholder {
+	color: var(--vui-text-field-placeholder);
+	opacity: 1;
+}
+
+.vui-text-field-input:focus-visible,
+.vui-text-field-input[data-focus-visible],
+.vui-text-field-input.vui-force-focus {
+	border-color: transparent;
+	outline: 3px solid var(--vui-text-field-focus);
+	outline-offset: 0;
+}
+
+.vui-text-field[data-readonly] .vui-text-field-input,
+.vui-text-field-input[readonly] {
+	border-color: var(--vui-control-border-default);
+	background-color: var(--vui-background-subtle);
+}
+
+.vui-text-field[data-readonly] .vui-text-field-input:focus-visible,
+.vui-text-field[data-readonly] .vui-text-field-input[data-focus-visible],
+.vui-text-field[data-readonly] .vui-text-field-input.vui-force-focus,
+.vui-text-field-input[readonly]:focus-visible,
+.vui-text-field-input[readonly][data-focus-visible],
+.vui-text-field-input[readonly].vui-force-focus {
+	border-color: var(--vui-control-border-default);
+	outline-color: transparent;
+}
+
+.vui-text-field[data-disabled] .vui-text-field-input,
+.vui-text-field-input[data-disabled],
+.vui-text-field-input:disabled {
+	border-color: var(--vui-control-background-disabled);
+	background-color: var(--vui-control-background-disabled);
+	cursor: not-allowed;
+	opacity: 0.5;
+}
+
+.vui-text-field[data-disabled] .vui-text-field-input::placeholder,
+.vui-text-field-input[data-disabled]::placeholder,
+.vui-text-field-input:disabled::placeholder {
+	color: var(--vui-control-placeholder);
+}
+
+.vui-text-field-input:-webkit-autofill {
+	box-shadow: 0 0 0 1000px white inset;
+	-webkit-text-fill-color: var(--vui-text-field-text);
+	caret-color: var(--vui-text-field-text);
+}
+
+.vui-text-field-footer {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: baseline;
+	justify-content: space-between;
+	gap: 4px 12px;
+	padding-top: 2px;
+}
+
+.vui-text-field-message {
+	min-width: 0;
+}
+
+.vui-text-field-description,
+.vui-text-field-error,
+.vui-text-field-counter {
+	font-size: var(--vui-text-field-message-size);
+	line-height: 1.25;
+}
+
+.vui-text-field-description,
+.vui-text-field-counter {
+	color: var(--vui-control-helper);
+}
+
+.vui-text-field-error,
+.vui-text-field-counter--danger {
+	color: var(--vui-feedback-danger-solid);
+}
+
+.vui-text-field-counter {
+	margin-left: auto;
+	white-space: nowrap;
+}