{"version":3,"file":"tone.module.mjs","names":[],"sources":["../../../../package/common/styles/tone.module.pcss"],"sourcesContent":["/* --tone comes from a colour class below, or inline (tone.ts) for any other colour. */\n.tone {\n  /* White wherever it reaches 3:1 (relative luminance below 0.3, as Mantine), else black at 7:1 or\n     more. Not WCAG 2's own crossover at 0.179, which puts black on mid-tone blues where white reads\n     far better. */\n  --tone-is-dark: clamp(0, (0.3 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * infinity, 1);\n  --tone-auto-contrast: color(from var(--tone) srgb-linear var(--tone-is-dark) var(--tone-is-dark) var(--tone-is-dark));\n  --tone-contrast: var(--tone-auto-contrast);\n\n  /* A third of the way to the text colour, so it reads (dark red on a dark theme), with the lost\n     saturation put back (x1.5) so a light theme is not muddy. Borders, dots and icons keep the\n     pure colour. */\n  --tone-text: oklch(from color-mix(in oklab, var(--tone) 67%, var(--text-color, currentcolor)) l calc(c * 1.5) h);\n  --tone-light: color-mix(in srgb, var(--tone) 22%, transparent);\n  --tone-fill: var(--tone);\n  --tone-outline: var(--tone);\n  --tone-gradient: none;\n}\n\n/* After .tone, whose defaults these override. Not the theme's solid -lighter pastels for\n   --tone-light: Light looked like two styles depending on the colour. */\n.primary {\n  --tone: var(--primary-color);\n  --tone-contrast: var(--text-on-primary, var(--tone-auto-contrast));\n  --tone-gradient: var(--primary-gradient, none);\n}\n\n/* currentcolor, so it takes the colour of what it sits on, such as a close button on an Alert. Not\n   --background-accent for the fill: in a light theme it stood out less than the tint. */\n.neutral {\n  --tone: currentcolor;\n  --tone-contrast: currentcolor;\n  --tone-text: currentcolor;\n  --tone-fill: color-mix(in srgb, currentcolor 20%, transparent);\n  --tone-light: color-mix(in srgb, currentcolor 8%, transparent);\n  --tone-outline: var(--border-color);\n}\n\n.success {\n  --tone: var(--success-color);\n}\n\n.info {\n  --tone: var(--info-color);\n}\n\n.warn {\n  --tone: var(--warn-color);\n}\n\n.error {\n  --tone: var(--error-color);\n  --tone-contrast: var(--text-on-delete, var(--tone-auto-contrast));\n}\n\n/* Browsers in the support floor without relative colour syntax (Chrome 119, Firefox 128). Tests\n   the formula itself, so a browser that parses `from` but not the rest falls back too. */\n@supports not\n((color: color(from red srgb-linear clamp(0, (0.3 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * infinity, 1) 0 0)) and\n  (color: oklch(from red l calc(c * 1.5) h))) {\n  .tone {\n    --tone-auto-contrast: var(--text-on-primary);\n    --tone-text: color-mix(in oklab, var(--tone) 67%, var(--text-color, currentcolor));\n  }\n}\n"],"mappings":""}