rename web/ to admin/, along with the web-named build and cli identifiers
This commit is contained in:
@@ -0,0 +1,226 @@
|
||||
/**
|
||||
* The shared style vocabulary (milestone 23, ruling 3; replaces the Tailwind
|
||||
* class constants of milestone 18, ruling 10).
|
||||
*
|
||||
* Every interactive element must carry `focusRing` or `insetFocusRing`; that
|
||||
* is the milestone-9 accessibility floor. Compose at the call site with
|
||||
* `stylex.props(styles.button, extra)` instead of re-spelling a variant.
|
||||
*/
|
||||
|
||||
import * as stylex from "@stylexjs/stylex";
|
||||
import { colors } from "./tokens.stylex";
|
||||
|
||||
const FOCUS = ":focus-visible";
|
||||
const DISABLED = ":disabled";
|
||||
|
||||
/** The half-fade loop a placeholder runs while its data is in flight. */
|
||||
const pulseFrames = stylex.keyframes({
|
||||
"50%": { opacity: 0.5 },
|
||||
});
|
||||
|
||||
export const styles = stylex.create({
|
||||
/** The ring drawn outside the element. */
|
||||
focusRing: {
|
||||
outlineWidth: { default: null, [FOCUS]: 2 },
|
||||
outlineStyle: { default: null, [FOCUS]: "solid" },
|
||||
outlineColor: { default: null, [FOCUS]: colors.focus },
|
||||
outlineOffset: { default: null, [FOCUS]: 2 },
|
||||
},
|
||||
/** The ring drawn inside the element, for controls flush against a panel edge. */
|
||||
insetFocusRing: {
|
||||
outlineWidth: { default: null, [FOCUS]: 2 },
|
||||
outlineStyle: { default: null, [FOCUS]: "solid" },
|
||||
outlineColor: { default: null, [FOCUS]: colors.focus },
|
||||
outlineOffset: { default: null, [FOCUS]: -2 },
|
||||
},
|
||||
|
||||
input: {
|
||||
marginTop: "0.25rem",
|
||||
width: "100%",
|
||||
borderRadius: "0.25rem",
|
||||
borderWidth: 1,
|
||||
borderStyle: "solid",
|
||||
borderColor: colors.borderStrong,
|
||||
backgroundColor: colors.surfaceRaised,
|
||||
color: colors.text,
|
||||
paddingInline: "0.75rem",
|
||||
paddingBlock: "0.5rem",
|
||||
},
|
||||
smallInput: {
|
||||
borderRadius: "0.25rem",
|
||||
borderWidth: 1,
|
||||
borderStyle: "solid",
|
||||
borderColor: colors.borderStrong,
|
||||
backgroundColor: colors.surfaceRaised,
|
||||
color: colors.text,
|
||||
paddingInline: "0.5rem",
|
||||
paddingBlock: "0.375rem",
|
||||
fontSize: "0.875rem",
|
||||
lineHeight: "1.25rem",
|
||||
},
|
||||
|
||||
button: {
|
||||
borderRadius: "0.25rem",
|
||||
borderWidth: 1,
|
||||
borderStyle: "solid",
|
||||
borderColor: colors.borderStrong,
|
||||
paddingInline: "0.75rem",
|
||||
paddingBlock: "0.375rem",
|
||||
fontSize: "0.875rem",
|
||||
lineHeight: "1.25rem",
|
||||
},
|
||||
smallButton: {
|
||||
borderRadius: "0.25rem",
|
||||
borderWidth: 1,
|
||||
borderStyle: "solid",
|
||||
borderColor: colors.borderStrong,
|
||||
paddingInline: "0.5rem",
|
||||
paddingBlock: "0.25rem",
|
||||
fontSize: "0.875rem",
|
||||
lineHeight: "1.25rem",
|
||||
},
|
||||
largeButton: {
|
||||
borderRadius: "0.25rem",
|
||||
borderWidth: 1,
|
||||
borderStyle: "solid",
|
||||
borderColor: colors.borderStrong,
|
||||
paddingInline: "0.75rem",
|
||||
paddingBlock: "0.5rem",
|
||||
fontWeight: 500,
|
||||
},
|
||||
|
||||
primaryButton: {
|
||||
borderRadius: "0.25rem",
|
||||
borderStyle: "none",
|
||||
backgroundColor: colors.primary,
|
||||
color: colors.primaryText,
|
||||
paddingInline: "0.75rem",
|
||||
paddingBlock: "0.375rem",
|
||||
fontSize: "0.875rem",
|
||||
lineHeight: "1.25rem",
|
||||
fontWeight: 500,
|
||||
opacity: { default: 1, [DISABLED]: 0.5 },
|
||||
},
|
||||
largePrimaryButton: {
|
||||
borderRadius: "0.25rem",
|
||||
borderStyle: "none",
|
||||
backgroundColor: colors.primary,
|
||||
color: colors.primaryText,
|
||||
paddingInline: "0.75rem",
|
||||
paddingBlock: "0.5rem",
|
||||
fontWeight: 500,
|
||||
opacity: { default: 1, [DISABLED]: 0.5 },
|
||||
},
|
||||
|
||||
rowButton: {
|
||||
borderRadius: "0.25rem",
|
||||
borderStyle: "none",
|
||||
backgroundColor: "transparent",
|
||||
paddingInline: "0.5rem",
|
||||
paddingBlock: "0.25rem",
|
||||
fontSize: "0.875rem",
|
||||
lineHeight: "1.25rem",
|
||||
color: colors.primaryOnSurface,
|
||||
},
|
||||
linkButton: {
|
||||
borderStyle: "none",
|
||||
backgroundColor: "transparent",
|
||||
padding: 0,
|
||||
fontSize: "0.875rem",
|
||||
lineHeight: "1.25rem",
|
||||
fontWeight: 500,
|
||||
color: colors.primaryOnSurface,
|
||||
},
|
||||
dangerLinkButton: {
|
||||
borderStyle: "none",
|
||||
backgroundColor: "transparent",
|
||||
padding: 0,
|
||||
fontSize: "0.875rem",
|
||||
lineHeight: "1.25rem",
|
||||
fontWeight: 500,
|
||||
color: colors.danger,
|
||||
opacity: { default: 1, [DISABLED]: 0.5 },
|
||||
},
|
||||
retryButton: {
|
||||
marginTop: "0.75rem",
|
||||
borderRadius: "0.25rem",
|
||||
borderWidth: 1,
|
||||
borderStyle: "solid",
|
||||
borderColor: colors.dangerBorder,
|
||||
backgroundColor: "transparent",
|
||||
paddingInline: "0.75rem",
|
||||
paddingBlock: "0.375rem",
|
||||
fontSize: "0.875rem",
|
||||
lineHeight: "1.25rem",
|
||||
fontWeight: 500,
|
||||
color: colors.dangerText,
|
||||
},
|
||||
|
||||
/** Marks an element as waiting on data. Carries no colour of its own. */
|
||||
pulse: {
|
||||
animationName: pulseFrames,
|
||||
animationDuration: "2s",
|
||||
animationTimingFunction: "cubic-bezier(0.4, 0, 0.6, 1)",
|
||||
animationIterationCount: "infinite",
|
||||
},
|
||||
/** Digits of equal width, so a column of counts does not jitter as it updates. */
|
||||
tabularNums: {
|
||||
fontVariantNumeric: "tabular-nums",
|
||||
},
|
||||
/** For a value the operator reads character by character: a domain, an IP, a URL. */
|
||||
mono: {
|
||||
fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
|
||||
},
|
||||
/** Visible to a screen reader only; the element keeps its place in the a11y tree. */
|
||||
srOnly: {
|
||||
position: "absolute",
|
||||
width: 1,
|
||||
height: 1,
|
||||
padding: 0,
|
||||
margin: -1,
|
||||
overflow: "hidden",
|
||||
clipPath: "inset(50%)",
|
||||
whiteSpace: "nowrap",
|
||||
borderWidth: 0,
|
||||
},
|
||||
|
||||
th: {
|
||||
borderBottomWidth: 1,
|
||||
borderBottomStyle: "solid",
|
||||
borderBottomColor: colors.borderStrong,
|
||||
paddingInline: "0.75rem",
|
||||
paddingBlock: "0.5rem",
|
||||
textAlign: "left",
|
||||
fontWeight: 500,
|
||||
},
|
||||
td: {
|
||||
borderBottomWidth: 1,
|
||||
borderBottomStyle: "solid",
|
||||
borderBottomColor: colors.border,
|
||||
paddingInline: "0.75rem",
|
||||
paddingBlock: "0.5rem",
|
||||
},
|
||||
tableWrap: {
|
||||
marginTop: "1rem",
|
||||
overflowX: "auto",
|
||||
},
|
||||
/**
|
||||
* Not a faithful port: `space-y-3` set sibling margins on a block container,
|
||||
* this is a flex formatting context. StyleX has no way to write the `> * + *`
|
||||
* selector that `space-y` compiles to, so the rhythm can only come from
|
||||
* `gap`. Child sizing and margin behaviour differ from the Tailwind original;
|
||||
* both call sites are plain vertical form stacks, where they do not.
|
||||
*/
|
||||
formCard: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "0.75rem",
|
||||
marginTop: "1rem",
|
||||
maxWidth: "32rem",
|
||||
borderRadius: "0.25rem",
|
||||
borderWidth: 1,
|
||||
borderStyle: "solid",
|
||||
borderColor: colors.border,
|
||||
padding: "1rem",
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user