@nxgt/material 3.6.0 → 3.7.0

package/dist/components/ui/widgets/drawing/drawing.css

@@ -0,0 +1,459 @@
+/* Drawing: the colours and focus ring of `@nxgt/material/draw`. Imported by
+ * components.css, so styles.css carries it. The renderer writes no `style`
+ * attribute (strict CSP): a role (`primary-container`...) is a class,
+ * `nxgt-draw-f-<role>` for a fill, `-s-` for a stroke, `-c-` for a gradient
+ * stop, mapped here to the theme's tokens (ROLE_VARS in @nxgt/material-core/draw).
+ * An app tone (`data-tone`) reads the --nxgt-tone variables of tones/channel.css.
+ * Written from ROLE_VARS (one rule per token and kind, kept in one file so the
+ * list reads as a table): drawing-css.test.ts fails when a token has no rule. */
+.nxgt-draw-f-surface {
+	fill: var(--background);
+}
+.nxgt-draw-f-on-surface {
+	fill: var(--foreground);
+}
+.nxgt-draw-f-surface-container {
+	fill: var(--card);
+}
+.nxgt-draw-f-on-surface-variant {
+	fill: var(--muted-foreground);
+}
+.nxgt-draw-f-outline {
+	fill: var(--muted-foreground);
+}
+.nxgt-draw-f-outline-variant {
+	fill: var(--border);
+}
+.nxgt-draw-f-primary {
+	fill: var(--primary);
+}
+.nxgt-draw-f-on-primary {
+	fill: var(--primary-foreground);
+}
+.nxgt-draw-f-primary-container {
+	fill: var(--primary-container);
+}
+.nxgt-draw-f-primary-text {
+	fill: var(--primary-text);
+}
+.nxgt-draw-f-secondary {
+	fill: var(--secondary);
+}
+.nxgt-draw-f-on-secondary {
+	fill: var(--secondary-foreground);
+}
+.nxgt-draw-f-secondary-container {
+	fill: var(--secondary-container);
+}
+.nxgt-draw-f-secondary-text {
+	fill: var(--secondary-text);
+}
+.nxgt-draw-f-tertiary {
+	fill: var(--tertiary);
+}
+.nxgt-draw-f-on-tertiary {
+	fill: var(--tertiary-foreground);
+}
+.nxgt-draw-f-tertiary-container {
+	fill: var(--tertiary-container);
+}
+.nxgt-draw-f-tertiary-text {
+	fill: var(--tertiary-text);
+}
+.nxgt-draw-f-error {
+	fill: var(--error);
+}
+.nxgt-draw-f-on-error {
+	fill: var(--error-foreground);
+}
+.nxgt-draw-f-error-container {
+	fill: var(--error-container);
+}
+.nxgt-draw-f-error-text {
+	fill: var(--error-text);
+}
+.nxgt-draw-f-success {
+	fill: var(--success);
+}
+.nxgt-draw-f-on-success {
+	fill: var(--success-foreground);
+}
+.nxgt-draw-f-success-container {
+	fill: var(--success-container);
+}
+.nxgt-draw-f-success-text {
+	fill: var(--success-text);
+}
+.nxgt-draw-f-info {
+	fill: var(--info);
+}
+.nxgt-draw-f-on-info {
+	fill: var(--info-foreground);
+}
+.nxgt-draw-f-info-container {
+	fill: var(--info-container);
+}
+.nxgt-draw-f-info-text {
+	fill: var(--info-text);
+}
+.nxgt-draw-f-warning {
+	fill: var(--warning);
+}
+.nxgt-draw-f-on-warning {
+	fill: var(--warning-foreground);
+}
+.nxgt-draw-f-warning-container {
+	fill: var(--warning-container);
+}
+.nxgt-draw-f-warning-text {
+	fill: var(--warning-text);
+}
+.nxgt-draw-f-neutral {
+	fill: var(--neutral);
+}
+.nxgt-draw-f-on-neutral {
+	fill: var(--neutral-foreground);
+}
+.nxgt-draw-f-neutral-container {
+	fill: var(--neutral-container);
+}
+.nxgt-draw-f-neutral-text {
+	fill: var(--neutral-text);
+}
+.nxgt-draw-f-on-primary-container {
+	fill: var(--primary-text);
+}
+.nxgt-draw-f-on-secondary-container {
+	fill: var(--secondary-text);
+}
+.nxgt-draw-f-on-tertiary-container {
+	fill: var(--tertiary-text);
+}
+.nxgt-draw-f-on-error-container {
+	fill: var(--error-text);
+}
+.nxgt-draw-f-tone {
+	fill: var(--nxgt-tone);
+}
+.nxgt-draw-f-tone-text {
+	fill: var(--nxgt-tone-text);
+}
+.nxgt-draw-f-tone-on {
+	fill: var(--nxgt-tone-on);
+}
+.nxgt-draw-f-tone-container {
+	fill: var(--nxgt-tone-container);
+}
+.nxgt-draw-s-surface {
+	stroke: var(--background);
+}
+.nxgt-draw-s-on-surface {
+	stroke: var(--foreground);
+}
+.nxgt-draw-s-surface-container {
+	stroke: var(--card);
+}
+.nxgt-draw-s-on-surface-variant {
+	stroke: var(--muted-foreground);
+}
+.nxgt-draw-s-outline {
+	stroke: var(--muted-foreground);
+}
+.nxgt-draw-s-outline-variant {
+	stroke: var(--border);
+}
+.nxgt-draw-s-primary {
+	stroke: var(--primary);
+}
+.nxgt-draw-s-on-primary {
+	stroke: var(--primary-foreground);
+}
+.nxgt-draw-s-primary-container {
+	stroke: var(--primary-container);
+}
+.nxgt-draw-s-primary-text {
+	stroke: var(--primary-text);
+}
+.nxgt-draw-s-secondary {
+	stroke: var(--secondary);
+}
+.nxgt-draw-s-on-secondary {
+	stroke: var(--secondary-foreground);
+}
+.nxgt-draw-s-secondary-container {
+	stroke: var(--secondary-container);
+}
+.nxgt-draw-s-secondary-text {
+	stroke: var(--secondary-text);
+}
+.nxgt-draw-s-tertiary {
+	stroke: var(--tertiary);
+}
+.nxgt-draw-s-on-tertiary {
+	stroke: var(--tertiary-foreground);
+}
+.nxgt-draw-s-tertiary-container {
+	stroke: var(--tertiary-container);
+}
+.nxgt-draw-s-tertiary-text {
+	stroke: var(--tertiary-text);
+}
+.nxgt-draw-s-error {
+	stroke: var(--error);
+}
+.nxgt-draw-s-on-error {
+	stroke: var(--error-foreground);
+}
+.nxgt-draw-s-error-container {
+	stroke: var(--error-container);
+}
+.nxgt-draw-s-error-text {
+	stroke: var(--error-text);
+}
+.nxgt-draw-s-success {
+	stroke: var(--success);
+}
+.nxgt-draw-s-on-success {
+	stroke: var(--success-foreground);
+}
+.nxgt-draw-s-success-container {
+	stroke: var(--success-container);
+}
+.nxgt-draw-s-success-text {
+	stroke: var(--success-text);
+}
+.nxgt-draw-s-info {
+	stroke: var(--info);
+}
+.nxgt-draw-s-on-info {
+	stroke: var(--info-foreground);
+}
+.nxgt-draw-s-info-container {
+	stroke: var(--info-container);
+}
+.nxgt-draw-s-info-text {
+	stroke: var(--info-text);
+}
+.nxgt-draw-s-warning {
+	stroke: var(--warning);
+}
+.nxgt-draw-s-on-warning {
+	stroke: var(--warning-foreground);
+}
+.nxgt-draw-s-warning-container {
+	stroke: var(--warning-container);
+}
+.nxgt-draw-s-warning-text {
+	stroke: var(--warning-text);
+}
+.nxgt-draw-s-neutral {
+	stroke: var(--neutral);
+}
+.nxgt-draw-s-on-neutral {
+	stroke: var(--neutral-foreground);
+}
+.nxgt-draw-s-neutral-container {
+	stroke: var(--neutral-container);
+}
+.nxgt-draw-s-neutral-text {
+	stroke: var(--neutral-text);
+}
+.nxgt-draw-s-on-primary-container {
+	stroke: var(--primary-text);
+}
+.nxgt-draw-s-on-secondary-container {
+	stroke: var(--secondary-text);
+}
+.nxgt-draw-s-on-tertiary-container {
+	stroke: var(--tertiary-text);
+}
+.nxgt-draw-s-on-error-container {
+	stroke: var(--error-text);
+}
+.nxgt-draw-s-tone {
+	stroke: var(--nxgt-tone);
+}
+.nxgt-draw-s-tone-text {
+	stroke: var(--nxgt-tone-text);
+}
+.nxgt-draw-s-tone-on {
+	stroke: var(--nxgt-tone-on);
+}
+.nxgt-draw-s-tone-container {
+	stroke: var(--nxgt-tone-container);
+}
+.nxgt-draw-c-surface {
+	stop-color: var(--background);
+}
+.nxgt-draw-c-on-surface {
+	stop-color: var(--foreground);
+}
+.nxgt-draw-c-surface-container {
+	stop-color: var(--card);
+}
+.nxgt-draw-c-on-surface-variant {
+	stop-color: var(--muted-foreground);
+}
+.nxgt-draw-c-outline {
+	stop-color: var(--muted-foreground);
+}
+.nxgt-draw-c-outline-variant {
+	stop-color: var(--border);
+}
+.nxgt-draw-c-primary {
+	stop-color: var(--primary);
+}
+.nxgt-draw-c-on-primary {
+	stop-color: var(--primary-foreground);
+}
+.nxgt-draw-c-primary-container {
+	stop-color: var(--primary-container);
+}
+.nxgt-draw-c-primary-text {
+	stop-color: var(--primary-text);
+}
+.nxgt-draw-c-secondary {
+	stop-color: var(--secondary);
+}
+.nxgt-draw-c-on-secondary {
+	stop-color: var(--secondary-foreground);
+}
+.nxgt-draw-c-secondary-container {
+	stop-color: var(--secondary-container);
+}
+.nxgt-draw-c-secondary-text {
+	stop-color: var(--secondary-text);
+}
+.nxgt-draw-c-tertiary {
+	stop-color: var(--tertiary);
+}
+.nxgt-draw-c-on-tertiary {
+	stop-color: var(--tertiary-foreground);
+}
+.nxgt-draw-c-tertiary-container {
+	stop-color: var(--tertiary-container);
+}
+.nxgt-draw-c-tertiary-text {
+	stop-color: var(--tertiary-text);
+}
+.nxgt-draw-c-error {
+	stop-color: var(--error);
+}
+.nxgt-draw-c-on-error {
+	stop-color: var(--error-foreground);
+}
+.nxgt-draw-c-error-container {
+	stop-color: var(--error-container);
+}
+.nxgt-draw-c-error-text {
+	stop-color: var(--error-text);
+}
+.nxgt-draw-c-success {
+	stop-color: var(--success);
+}
+.nxgt-draw-c-on-success {
+	stop-color: var(--success-foreground);
+}
+.nxgt-draw-c-success-container {
+	stop-color: var(--success-container);
+}
+.nxgt-draw-c-success-text {
+	stop-color: var(--success-text);
+}
+.nxgt-draw-c-info {
+	stop-color: var(--info);
+}
+.nxgt-draw-c-on-info {
+	stop-color: var(--info-foreground);
+}
+.nxgt-draw-c-info-container {
+	stop-color: var(--info-container);
+}
+.nxgt-draw-c-info-text {
+	stop-color: var(--info-text);
+}
+.nxgt-draw-c-warning {
+	stop-color: var(--warning);
+}
+.nxgt-draw-c-on-warning {
+	stop-color: var(--warning-foreground);
+}
+.nxgt-draw-c-warning-container {
+	stop-color: var(--warning-container);
+}
+.nxgt-draw-c-warning-text {
+	stop-color: var(--warning-text);
+}
+.nxgt-draw-c-neutral {
+	stop-color: var(--neutral);
+}
+.nxgt-draw-c-on-neutral {
+	stop-color: var(--neutral-foreground);
+}
+.nxgt-draw-c-neutral-container {
+	stop-color: var(--neutral-container);
+}
+.nxgt-draw-c-neutral-text {
+	stop-color: var(--neutral-text);
+}
+.nxgt-draw-c-on-primary-container {
+	stop-color: var(--primary-text);
+}
+.nxgt-draw-c-on-secondary-container {
+	stop-color: var(--secondary-text);
+}
+.nxgt-draw-c-on-tertiary-container {
+	stop-color: var(--tertiary-text);
+}
+.nxgt-draw-c-on-error-container {
+	stop-color: var(--error-text);
+}
+.nxgt-draw-c-tone {
+	stop-color: var(--nxgt-tone);
+}
+.nxgt-draw-c-tone-text {
+	stop-color: var(--nxgt-tone-text);
+}
+.nxgt-draw-c-tone-on {
+	stop-color: var(--nxgt-tone-on);
+}
+.nxgt-draw-c-tone-container {
+	stop-color: var(--nxgt-tone-container);
+}
+
+/* The focus ring: a second, unfilled copy of the node's outline, drawn after
+ * it and shown while the node has the keyboard focus. */
+.nxgt-draw-i:focus {
+	outline: none;
+}
+.nxgt-draw-ig:focus-visible {
+	outline: 2px solid var(--ring);
+	outline-offset: 2px;
+}
+.nxgt-draw-ring {
+	fill: none;
+	stroke: var(--ring);
+	stroke-width: 2;
+	stroke-linejoin: round;
+	vector-effect: non-scaling-stroke;
+	pointer-events: none;
+	visibility: hidden;
+}
+.nxgt-draw-i:focus-visible .nxgt-draw-ring {
+	visibility: visible;
+}
+@media (forced-colors: active) {
+	.nxgt-draw-ring {
+		stroke: Highlight;
+	}
+}
+[data-slot="drawing"] {
+	max-width: 100%;
+	height: auto;
+}
+.nxgt-draw-i {
+	cursor: default;
+}
+[role="button"].nxgt-draw-i {
+	cursor: pointer;
+}