mirror of
https://github.com/goauthentik/authentik.git
synced 2026-08-31 03:01:38 -07:00
Continuing to push the limits.
This commit is contained in:
Ken Sternberg
@@ -12,7 +12,7 @@
|
||||
--ak-c-progress--m-sm__measure--font-size: var(--ak-global--font-size--sm);
|
||||
--ak-c-progress--m-success--m-inside__measure--Color: var(--ak-global--color--surface);
|
||||
--ak-c-progress--m-success__bar--BackgroundColor: var(--ak-global--color--success);
|
||||
--ak-c-progress--m-warning--m-inside__measure--Color: var(--ak-global--color--dark-100);
|
||||
--ak-c-progress--m-warning--m-inside__measure--Color: var(--ak-global--color--text--on-light-fill);
|
||||
--ak-c-progress--m-warning__bar--BackgroundColor: var(--ak-global--color--warning);
|
||||
--ak-c-progress--m-xs__bar--Height: min(2px, calc(var(--ak-global--space--md) / 8));
|
||||
--ak-c-progress__bar--BackgroundColor: var(--ak-global--color--surface);
|
||||
|
||||
@@ -3,61 +3,52 @@
|
||||
*/
|
||||
|
||||
:root {
|
||||
--pf-c-toggle-group__button--PaddingTop: var(--ak-global--spacer--sm);
|
||||
--pf-c-toggle-group__button--PaddingRight: var(--ak-global--spacer--md);
|
||||
--pf-c-toggle-group__button--PaddingBottom: var(--ak-global--spacer--sm);
|
||||
--pf-c-toggle-group__button--PaddingLeft: var(--ak-global--spacer--md);
|
||||
--pf-c-toggle-group__button--PaddingTop: var(--ak-global--space--sm);
|
||||
--pf-c-toggle-group__button--PaddingRight: var(--ak-global--space--md);
|
||||
--pf-c-toggle-group__button--PaddingBottom: var(--ak-global--space--sm);
|
||||
--pf-c-toggle-group__button--PaddingLeft: var(--ak-global--space--md);
|
||||
--pf-c-toggle-group__button--font-size: var(--ak-global--font-size--sm);
|
||||
--pf-c-toggle-group__button--line-height: calc(
|
||||
var(--ak-global--font-size--md) * var(--ak-global--line-height--md)
|
||||
);
|
||||
--pf-c-toggle-group__button--Color: var(--ak-global--color--primary);
|
||||
--pf-c-toggle-group__button--BackgroundColor: var(--ak-global--background-color--primary);
|
||||
--pf-c-toggle-group__button--Color: var(--ak-global--color--text);
|
||||
--pf-c-toggle-group__button--BackgroundColor: var(--ak-global--color--surface);
|
||||
--pf-c-toggle-group__button--ZIndex: auto;
|
||||
--pf-c-toggle-group__button--hover--BackgroundColor: var(--ak-global--BackgroundColor--200);
|
||||
--pf-c-toggle-group__button--hover--ZIndex: var(--ak-global--ZIndex--xs);
|
||||
--pf-c-toggle-group__button--hover--before--BorderColor: var(--ak-global--BorderColor--200);
|
||||
--pf-c-toggle-group__button--hover--BackgroundColor: var(--ak-global--color--surface--inset);
|
||||
--pf-c-toggle-group__button--hover--ZIndex: var(--ak-global--z-index--xs);
|
||||
--pf-c-toggle-group__button--hover--before--BorderColor: var(--ak-global--color--border--strong);
|
||||
--pf-c-toggle-group__button--focus--BackgroundColor: var(--ak-global--color--secondary);
|
||||
--pf-c-toggle-group__button--focus--ZIndex: var(--ak-global--ZIndex--xs);
|
||||
--pf-c-toggle-group__button--focus--ZIndex: var(--ak-global--z-index--xs);
|
||||
--pf-c-toggle-group__button--focus--before--BorderColor: var(
|
||||
--ak-global--color--border--strong
|
||||
);
|
||||
--pf-c-toggle-group__button--disabled--BackgroundColor: var(--ak-global--color--disabled);
|
||||
--pf-c-toggle-group__button--disabled--Color: var(--ak-global--color--disabled);
|
||||
--pf-c-toggle-group__button--disabled--BackgroundColor: var(--ak-global--color--disabled--fill);
|
||||
--pf-c-toggle-group__button--disabled--Color: var(--ak-global--color--disabled-text);
|
||||
--pf-c-toggle-group__button--before--BorderWidth: var(--ak-global--border-width--sm);
|
||||
--pf-c-toggle-group__button--before--BorderColor: var(--ak-global--color--border);
|
||||
--pf-c-toggle-group__item--item--MarginLeft: calc(-1 * var(--ak-global--border-width--sm));
|
||||
--pf-c-toggle-group__item--first-child__button--BorderTopLeftRadius: var(
|
||||
--ak-global--border-radius--sm
|
||||
--ak-global--radius--sm
|
||||
);
|
||||
--pf-c-toggle-group__item--first-child__button--BorderBottomLeftRadius: var(
|
||||
--ak-global--border-radius--sm
|
||||
--ak-global--radius--sm
|
||||
);
|
||||
--pf-c-toggle-group__item--last-child__button--BorderTopRightRadius: var(
|
||||
--ak-global--border-radius--sm
|
||||
--ak-global--radius--sm
|
||||
);
|
||||
--pf-c-toggle-group__item--last-child__button--BorderBottomRightRadius: var(
|
||||
--ak-global--border-radius--sm
|
||||
--ak-global--radius--sm
|
||||
);
|
||||
--pf-c-toggle-group__icon--text--MarginLeft: var(--ak-global--spacer--sm);
|
||||
--pf-c-toggle-group__button--m-selected--BackgroundColor: var(--ak-global--palette--blue-50);
|
||||
--pf-c-toggle-group__icon--text--MarginLeft: var(--ak-global--space--sm);
|
||||
--pf-c-toggle-group__button--m-selected--BackgroundColor: var(--ak-global--color--selected--hint);
|
||||
--pf-c-toggle-group__button--m-selected--before--BorderColor: var(
|
||||
--ak-global--primary-color--100
|
||||
--ak-global--color--selected
|
||||
);
|
||||
--pf-c-toggle-group__button--m-selected--ZIndex: var(--ak-global--ZIndex--xs);
|
||||
--pf-c-toggle-group__button--m-selected--ZIndex: var(--ak-global--z-index--xs);
|
||||
--pf-c-toggle-group--m-compact__button--PaddingTop: 0;
|
||||
--pf-c-toggle-group--m-compact__button--PaddingRight: var(--ak-global--spacer--sm);
|
||||
--pf-c-toggle-group--m-compact__button--PaddingRight: var(--ak-global--space--sm);
|
||||
--pf-c-toggle-group--m-compact__button--PaddingBottom: 0;
|
||||
--pf-c-toggle-group--m-compact__button--PaddingLeft: var(--ak-global--spacer--sm);
|
||||
--pf-c-toggle-group--m-compact__button--PaddingLeft: var(--ak-global--space--sm);
|
||||
--pf-c-toggle-group--m-compact__button--font-size: var(--ak-global--font-size--xs);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
--pf-c-toggle-group__button--hover--BackgroundColor: var(--ak-global--palette--black-700);
|
||||
--pf-c-toggle-group__button--focus--BackgroundColor: var(--ak-global--palette--black-700);
|
||||
--pf-c-toggle-group__button--disabled--BackgroundColor: var(--ak-global--palette--black-600);
|
||||
--pf-c-toggle-group__button--disabled--Color: var(--ak-global--palette--black-100);
|
||||
--pf-c-toggle-group__button--Color: var(--ak-dark-foreground);
|
||||
--pf-c-toggle-group__button--BackgroundColor: var(--ak-dark-background-light);
|
||||
--pf-c-toggle-group__button--m-selected--BackgroundColor: var(--ak-global--primary-color--100);
|
||||
}
|
||||
|
||||
@@ -54,7 +54,7 @@ export const Default = () => {
|
||||
return container(
|
||||
html`<ak-toggle-group @ak-toggle=${displayChange}>
|
||||
${testOptions.map(([key, label]) => html`<option value="${key}">${label}</option>`)}
|
||||
</ak-toggle-group>`,
|
||||
</ak-toggle-group>`
|
||||
);
|
||||
};
|
||||
|
||||
@@ -66,6 +66,6 @@ export const Compact = () => {
|
||||
return container(
|
||||
html`<ak-toggle-group compact @ak-toggle=${displayChange}>
|
||||
${testOptions.map(([key, label]) => html`<option value="${key}">${label}</option>`)}
|
||||
</ak-toggle-group>`,
|
||||
</ak-toggle-group>`
|
||||
);
|
||||
};
|
||||
|
||||
@@ -58,7 +58,7 @@ export class ToggleGroup extends LitElement {
|
||||
subtree: true,
|
||||
childList: true,
|
||||
attributes: true,
|
||||
attributeFilter: ["value", "disabled"],
|
||||
attributeFilter: ["value", "disabled", "selected"],
|
||||
characterData: true, // Watch for label changes, too.
|
||||
});
|
||||
}
|
||||
@@ -79,7 +79,7 @@ export class ToggleGroup extends LitElement {
|
||||
option.getAttribute("value") ?? "",
|
||||
option.textContent ?? "",
|
||||
{ disabled: option.hasAttribute("disabled") },
|
||||
],
|
||||
]
|
||||
);
|
||||
}
|
||||
|
||||
@@ -106,7 +106,7 @@ export class ToggleGroup extends LitElement {
|
||||
>
|
||||
<span part="label">${label}</span>
|
||||
</button>
|
||||
</div> `,
|
||||
</div> `
|
||||
)}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
@@ -203,11 +203,17 @@ const COLOR_GROUPS = [
|
||||
"--ak-global--color--surface",
|
||||
"--ak-global--color--surface--raised",
|
||||
"--ak-global--color--surface--muted",
|
||||
"--ak-global--color--surface--inset",
|
||||
"--ak-global--color--surface--nested",
|
||||
],
|
||||
against: "--ak-global--color--text",
|
||||
threshold: 4.5,
|
||||
ringed: true,
|
||||
},
|
||||
{
|
||||
title: "Selection",
|
||||
tokens: ["--ak-global--color--selected"]
|
||||
},
|
||||
{
|
||||
title: "Border",
|
||||
tokens: ["--ak-global--color--border", "--ak-global--color--border--strong"],
|
||||
@@ -755,7 +761,6 @@ function renderOverview() {
|
||||
const categories = new Set(
|
||||
TOKENS.map((t) => t.name.replace(/^--ak-global--/, "").split("--")[0]),
|
||||
);
|
||||
console.log("C:", categories);
|
||||
document.getElementById("stats").replaceChildren(
|
||||
...[
|
||||
[TOKENS.length, "tokens in :root"],
|
||||
|
||||
@@ -22,29 +22,52 @@ import { oklchTransform, useColorDesignTokens, type VPPair } from "./color-libs.
|
||||
|
||||
// prettier-ignore
|
||||
export const colors = useColorDesignTokens(instance, {
|
||||
"accent": "#fd4b2d",
|
||||
"primary": "#0066cc",
|
||||
"primary.hover": "#004080",
|
||||
"accent": "#fd4b2d",
|
||||
"primary": "#0066cc",
|
||||
"primary.hover": "#004080",
|
||||
|
||||
"text": "#151515",
|
||||
"text.muted": "#6a6e73",
|
||||
"selected": ref("color.primary"),
|
||||
"selected.tint": "#bee1f4", // Fill when at item in selected,
|
||||
"selected.hover": "#2b9af3", // When a selected item is hovered,
|
||||
"selected.hint": "#73bcf7", // Hover indicator for cards, usually on one side or the bottom
|
||||
|
||||
"link": ref("color.primary"),
|
||||
"link.hover": ref("color.primary.hover"),
|
||||
"link.visited": "#40199a",
|
||||
"text": "#151515",
|
||||
"text.muted": "#6a6e73",
|
||||
"text.on-fill": "#ffffff", // Text on a filled or dark surface
|
||||
"text.on-fill.muted": "#f0f0f0", // Muted text on a filled or dark surface
|
||||
"text.on-fill.subtle": "#d2d2d2", // Faintest text on a filled surface
|
||||
// FKA "Color--dark--100"
|
||||
"text.on-light-fill": "#151515", // Text on a light fill (like a yellow warning chip)
|
||||
"text.placeholder": "#6a6e73",
|
||||
|
||||
"surface": "#ffffff",
|
||||
"surface.raised": "#fafafa",
|
||||
"surface.muted": "#f0f0f0",
|
||||
"link": ref("color.primary"),
|
||||
"link.hover": ref("color.primary.hover"),
|
||||
"link.visited": "#40199a",
|
||||
|
||||
"border": "#8a8d90",
|
||||
"border.strong": "#d2d2d2",
|
||||
"border.subtle": "#f0f0f0",
|
||||
"surface": "#ffffff", // What most stuff is drawn on, the main background
|
||||
"surface.raised": "#fafafa",
|
||||
"surface.muted": "#f0f0f0",
|
||||
// BackgroundColor--200
|
||||
"surface.inset": ref("color.surface.muted"),
|
||||
// I want this to be a "lighter tint of selected.hint," but I can't figure out
|
||||
// how to do that with Styleframe.
|
||||
"surface.nested": "#faf9ff",
|
||||
|
||||
// background color for expanded rows; using this to keep a consistent look
|
||||
// with "selected card" and "selected navigation item."
|
||||
|
||||
"info": "#2b9af3",
|
||||
"success": "#3e8635",
|
||||
"warning": "#f0ab00",
|
||||
"danger": "#c9190b",
|
||||
"border": "#d2d2d2", // default divider
|
||||
"border.strong": "#8a8d90", // mostly underline for input fields
|
||||
"border.subtle": "#f0f0f0", // field edges for inputs
|
||||
|
||||
"disabled.text": "#6a6e73",
|
||||
"disabled.fill": "#d2d2d2",
|
||||
"disabled.fill.inset": "#f0f0f0",
|
||||
|
||||
"info": "#2b9af3",
|
||||
"success": "#3e8635",
|
||||
"warning": "#f0ab00",
|
||||
"danger": "#c9190b",
|
||||
});
|
||||
|
||||
// Dark theme overrides. Surface values are pinned near PatternFly 4's
|
||||
@@ -55,23 +78,31 @@ theme("dark", (ctx) => {
|
||||
|
||||
// prettier-ignore
|
||||
const darkColors: VPPair[] = [
|
||||
[c.colorText, "#e0e0e0"],
|
||||
[c.colorTextMuted, "#aaabac"],
|
||||
[c.colorText, "#e0e0e0"],
|
||||
[c.colorTextMuted, "#aaabac"],
|
||||
[c.colorTextOnLightFill, "#e0e0e0"],
|
||||
[c.colorTextPlaceholder, "#aaabac"],
|
||||
|
||||
[c.colorLink, "#20a9f8"],
|
||||
[c.colorLinkHover, "#73bcf7"],
|
||||
[c.colorLinkVisited, "#a18fff"],
|
||||
[c.colorSurfaceNested, "#22262a"],
|
||||
|
||||
[c.colorSurface, "#121212"],
|
||||
[c.colorSurfaceMuted, "#090909"],
|
||||
[c.colorSurfaceRaised, "#1c1c1c"],
|
||||
[c.colorLink, "#20a9f8"],
|
||||
[c.colorLinkHover, "#73bcf7"],
|
||||
[c.colorLinkVisited, "#a18fff"],
|
||||
|
||||
[c.colorBorder, "#444548"],
|
||||
[c.colorBorderStrong, "#57585a"],
|
||||
[c.colorBorderSubtle, "#aaabac"],
|
||||
[c.colorSurface, "#121212"],
|
||||
[c.colorSurfaceRaised, "#1c1c1c"],
|
||||
[c.colorSurfaceMuted, "#090909"],
|
||||
|
||||
[c.colorInfo, "#73bcf7"],
|
||||
[c.colorSuccess, "#5ba352"],
|
||||
[c.colorDisabledText, "#57585a"],
|
||||
[c.colorDisabledFill, "#444548"],
|
||||
[c.colorDisabledFillInset, "#aaabac"],
|
||||
|
||||
[c.colorBorder, "#444548"],
|
||||
[c.colorBorderStrong, "#57585a"],
|
||||
[c.colorBorderSubtle, "#aaabac"],
|
||||
|
||||
[c.colorInfo, "#73bcf7"],
|
||||
[c.colorSuccess, "#5ba352"],
|
||||
];
|
||||
|
||||
darkColors.forEach(([v, p]) => ctx.variable(v, oklchTransform(p)));
|
||||
|
||||
Reference in New Issue
Block a user