CommunityRule/community-rule
2
0 Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Match the 3 Nov color ramps and size-based strokes, and replace leftover palette hex with tokens.

Browse Source 
Drop Cookies Settings from the footer, link the Home features that already have pages, and give leftover routes their own descriptions.
This commit is contained in:
adilallo committed 2026-11-05 15:37:55 -07:00
1 parent 8d07e00667
commit ca928e306b
32 files changed
+276 -213
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/components/controls/Checkbox/Checkbox.container.tsx
+4 -4
View File
@@ -56,7 +56,7 @@ const CheckboxContainer = memo<CheckboxProps>(
// Default state: tertiary border, with hover and focus states via CSS
// Hover changes border to brand primary color
// Focus removes border and shows shadow (double ring: 2px white inner, 4px dark outer)
return `${baseBox} bg-[var(--color-surface-default-primary)] border border-solid border-[var(--color-border-default-control)] hover:border-[var(--color-border-default-brand-primary,#fdfaa8)] focus:border-transparent focus:shadow-[var(--shadow-focus-invert)] focus:outline-none`;
return `${baseBox} bg-[var(--color-surface-default-primary)] border border-solid border-[var(--color-border-default-control)] hover:border-[var(--color-border-default-brand-primary)] focus:border-transparent focus:shadow-[var(--shadow-focus-invert)] focus:outline-none`;
}
// Inverse mode styles per Figma
@@ -64,7 +64,7 @@ const CheckboxContainer = memo<CheckboxProps>(
// Inverse: transparent background, white border
// Hover changes border to brand primary color
// Focus shows shadow (2px dark inner, 4px white outer) - note: reversed from standard
return `${baseBox} bg-transparent border border-solid border-[var(--color-border-invert-primary,white)] hover:border-[var(--color-border-default-brand-primary,#fdfaa8)] focus:shadow-[var(--shadow-focus-default)] focus:outline-none`;
return `${baseBox} bg-transparent border border-solid border-[var(--color-border-invert-primary)] hover:border-[var(--color-border-default-brand-primary)] focus:shadow-[var(--shadow-focus-default)] focus:outline-none`;
}
return baseBox;
@@ -75,8 +75,8 @@ const CheckboxContainer = memo<CheckboxProps>(
// Checkmark color per Figma
const checkGlyphColor = checked
? isStandard
? "var(--color-content-default-brand-primary, #fefcc9)" // Light yellow/cream for standard mode
: "var(--color-content-invert-primary, #000000)" // Black for inverse mode
? "var(--color-content-default-brand-primary)"
: "var(--color-content-invert-primary)"
: "transparent";
// Label color
app/components/controls/Chip/Chip.view.tsx
+11 -11
View File
@@ -8,7 +8,7 @@ function chipSurfaceStyle(
palette: ChipViewProps["palette"],
size: ChipViewProps["size"],
): CSSProperties {
const borderWidth = size === "s" ? "1.25px" : "2px";
const borderWidth = size === "s" ? "1.25px" : "1.5px";
const reset: CSSProperties = {
appearance: "none",
WebkitAppearance: "none",
@@ -64,14 +64,14 @@ function chipSurfaceStyle(
}
if (state === "selected") {
return paint(
"var(--color-surface-invert-brand-primary, #fefcc9)",
"var(--color-content-invert-primary, #000)",
"var(--color-border-default-brand-primary, #fdfaa8)",
"var(--color-surface-invert-brand-primary)",
"var(--color-content-invert-primary)",
"var(--color-border-default-brand-primary)",
);
}
return paint(
"transparent",
"var(--color-content-default-brand-primary, #fefcc9)",
"var(--color-content-default-brand-primary)",
"var(--color-border-default-control)",
);
}
@@ -185,7 +185,7 @@ function ChipView({
{onCheck && (
<button
type="button"
className="flex items-center justify-center p-[var(--space-150)] rounded-full hover:bg-[var(--color-surface-default-semi-opaque,rgba(0,0,0,0.1))] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
className="flex items-center justify-center p-[var(--space-150)] rounded-full hover:bg-[var(--color-surface-default-semi-opaque)] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
aria-label={confirmAriaLabel}
disabled={!inputValue || !inputValue.trim()}
onClick={(event) => {
@@ -202,7 +202,7 @@ function ChipView({
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="text-[var(--color-content-default-brand-primary,#fefcc9)]"
className="text-[var(--color-content-default-brand-primary)]"
>
<path
d="M10 3L4.5 8.5L2 6"
@@ -224,7 +224,7 @@ function ChipView({
onChange={(e) => onInputChange?.(e.target.value)}
onKeyDown={onInputKeyDown}
placeholder={typeToAddPlaceholder}
className="bg-transparent border-none outline-none flex-1 min-w-0 font-normal text-[color:var(--color-content-default-tertiary,#b4b4b4)] placeholder:text-[color:var(--color-content-default-tertiary,#b4b4b4)]"
className="bg-transparent border-none outline-none flex-1 min-w-0 font-normal text-[color:var(--color-content-default-tertiary)] placeholder:text-[color:var(--color-content-default-tertiary)]"
style={{
fontSize: isSmall
? "var(--sizing-300)"
@@ -240,7 +240,7 @@ function ChipView({
{onClose && (
<button
type="button"
className="flex items-center justify-center p-[var(--space-150)] rounded-full hover:bg-[var(--color-surface-default-semi-opaque,rgba(0,0,0,0.1))] transition-colors"
className="flex items-center justify-center p-[var(--space-150)] rounded-full hover:bg-[var(--color-surface-default-semi-opaque)] transition-colors"
aria-label={closeAriaLabel}
onClick={(event) => {
event.stopPropagation();
@@ -253,7 +253,7 @@ function ChipView({
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="text-[var(--color-content-default-brand-primary,#fefcc9)]"
className="text-[var(--color-content-default-brand-primary)]"
>
<path
d="M9 3L3 9M3 3L9 9"
@@ -309,7 +309,7 @@ function ChipView({
{onRemove && !isDisabled && (
<button
type="button"
className="ml-[var(--space-050)] p-[var(--space-050)] rounded-full hover:bg-[var(--color-surface-default-semi-opaque,rgba(0,0,0,0.05))]"
className="ml-[var(--space-050)] p-[var(--space-050)] rounded-full hover:bg-[var(--color-surface-default-semi-opaque)]"
aria-label={`Remove ${label}`}
onClick={(event) => {
event.stopPropagation();
app/components/controls/MultiSelect/MultiSelect.view.tsx
+6 -6
View File
@@ -59,7 +59,7 @@ function MultiSelectView({
{!formHeader || !label ? (
countCaption.length > 0 ? (
<p className="w-full text-x-small-paragraph text-[color:var(--color-content-default-tertiary,#b4b4b4)]">
<p className="w-full text-x-small-paragraph text-[color:var(--color-content-default-tertiary)]">
{countCaption}
</p>
) : null
@@ -133,7 +133,7 @@ function MultiSelectView({
className={
!addButtonText
? // Circular button with border (Rule style)
`${atLimit ? "cursor-not-allowed opacity-60" : "cursor-pointer hover:opacity-80"} bg-[var(--color-surface-default-transparent,rgba(0,0,0,0))] border-[1.25px] ${isInverse ? "border-[var(--color-border-default-primary,#141414)]" : "border-[var(--color-border-default-control)]"} border-solid flex items-center justify-center ${isSmall ? "size-[30px]" : "size-[40px]"} rounded-[var(--radius-full)] shrink-0 transition-opacity`
`${atLimit ? "cursor-not-allowed opacity-60" : "cursor-pointer hover:opacity-80"} bg-[var(--color-surface-default-transparent)] border-[1.25px] ${isInverse ? "border-[var(--color-border-default-primary)]" : "border-[var(--color-border-default-control)]"} border-solid flex items-center justify-center ${isSmall ? "size-[30px]" : "size-[40px]"} rounded-[var(--radius-full)] shrink-0 transition-opacity`
: // Text add control (default palette: white label + brand “+”; inverse: inverse primary for both)
`${atLimit ? "cursor-not-allowed opacity-60" : "cursor-pointer hover:opacity-80"} flex items-center justify-center overflow-hidden rounded-[var(--radius-full)] shrink-0 transition-opacity ${
isSmall
@@ -151,8 +151,8 @@ function MultiSelectView({
xmlns="http://www.w3.org/2000/svg"
className={`shrink-0 ${
!addButtonText && isInverse
? "text-[var(--color-content-invert-primary,black)]"
: "text-[var(--color-content-default-brand-primary,#fefcc9)]"
? "text-[var(--color-content-invert-primary)]"
: "text-[var(--color-content-default-brand-primary)]"
}`}
>
<path
@@ -167,8 +167,8 @@ function MultiSelectView({
<span
className={`font-medium ${isSmall ? "text-[length:var(--sizing-300)] leading-[14px]" : "text-medium-label"} ${
isInverse
? "text-[color:var(--color-content-invert-primary,black)]"
: "text-[color:var(--color-content-default-primary,white)]"
? "text-[color:var(--color-content-invert-primary)]"
: "text-[color:var(--color-content-default-primary)]"
}`}
>
{addButtonText}
app/components/controls/RadioButton/RadioButton.container.tsx
+8 -8
View File
@@ -53,15 +53,15 @@ const RadioButtonContainer = ({
// Focus shows shadow (double ring: 2px white inner, 4px dark outer)
// When checked, border is brand primary (but changes to invert tertiary on focus)
const defaultBorder = checked
? "border-[var(--color-border-default-brand-primary,#fdfaa8)]"
? "border-[var(--color-border-default-brand-primary)]"
: "border-[var(--color-border-default-control)]";
// When focused and checked, border should be invert tertiary (#2d2d2d) per Figma
const focusBorder = checked
? "focus:border-[var(--color-content-invert-tertiary,#2d2d2d)]"
? "focus:border-[var(--color-content-invert-tertiary)]"
: "focus:border-[var(--color-border-default-control)]";
return `${baseBox} bg-[var(--color-surface-default-primary)] border border-solid ${defaultBorder} hover:border-[var(--color-border-default-brand-primary,#fdfaa8)] ${focusBorder} focus:shadow-[var(--shadow-focus-invert)] focus:outline-none`;
return `${baseBox} bg-[var(--color-surface-default-primary)] border border-solid ${defaultBorder} hover:border-[var(--color-border-default-brand-primary)] ${focusBorder} focus:shadow-[var(--shadow-focus-invert)] focus:outline-none`;
}
// Inverse mode styles
@@ -71,17 +71,17 @@ const RadioButtonContainer = ({
// Focus shows shadow (double ring: 2px dark inner, 4px white outer)
// When checked, border is brand primary (but changes to white on focus)
const defaultBorder = checked
? "border-[var(--color-border-default-brand-primary,#fdfaa8)]"
: "border-[var(--color-border-invert-primary,white)]";
? "border-[var(--color-border-default-brand-primary)]"
: "border-[var(--color-border-invert-primary)]";
// Hover border: inverse brand primary for both selected and unselected per Figma
const hoverBorder =
"hover:border-[var(--color-border-invert-brand-primary,#6c6701)]";
"hover:border-[var(--color-border-invert-brand-primary)]";
// Focus border: when focused and checked, border should be white per Figma
const focusBorder = checked
? "focus:border-[var(--color-border-invert-primary,white)]"
: "focus:border-[var(--color-border-invert-primary,white)]";
? "focus:border-[var(--color-border-invert-primary)]"
: "focus:border-[var(--color-border-invert-primary)]";
return `${baseBox} bg-transparent border border-solid ${defaultBorder} ${hoverBorder} ${focusBorder} focus:shadow-[var(--shadow-focus-default)] focus:outline-none`;
}
app/components/controls/RadioButton/RadioButton.view.tsx
+2 -2
View File
@@ -39,9 +39,9 @@ export function RadioButtonView({
<div
className={`w-[16px] h-[16px] rounded-full transition-all duration-200 ${
checked && mode === "standard"
? "bg-[var(--color-content-default-brand-primary,#fefcc9)] group-hover:!bg-[var(--color-surface-default-brand-primary)]"
? "bg-[var(--color-content-default-brand-primary)] group-hover:!bg-[var(--color-surface-default-brand-primary)]"
: checked && mode === "inverse"
? "bg-[var(--color-content-default-primary,#000000)]"
? "bg-[var(--color-content-default-primary)]"
: "bg-transparent"
}`}
/>
app/components/controls/RadioGroup/RadioGroup.view.tsx
+2 -2
View File
@@ -52,8 +52,8 @@ export function RadioGroupView({
<span
className={`text-small-paragraph ${
mode === "inverse"
? "text-[var(--color-content-invert-secondary,#1f1f1f)]"
: "text-[var(--color-content-default-secondary,#b4b4b4)]"
? "text-[var(--color-content-invert-secondary)]"
: "text-[var(--color-content-default-secondary)]"
}`}
>
{option.subtext}
app/components/controls/SelectInput/SelectInput.view.tsx
+4 -4
View File
@@ -109,7 +109,7 @@ export function SelectInputView({
.replace(/\s+/g, " ");
if (disabled) {
return `${baseClasses} bg-[var(--color-surface-default-secondary)] text-[var(--color-content-invert-tertiary,#2d2d2d)] border-[var(--color-border-default-primary)] cursor-not-allowed opacity-40`;
return `${baseClasses} bg-[var(--color-surface-default-secondary)] text-[var(--color-content-invert-tertiary)] border-[var(--color-border-default-primary)] cursor-not-allowed opacity-40`;
}
if (error) {
@@ -135,7 +135,7 @@ export function SelectInputView({
// Text color based on filled state
const textColorClass = isFilled
? "text-[var(--color-content-default-primary)]"
: "text-[var(--color-content-default-tertiary,#b4b4b4)]";
: "text-[var(--color-content-default-tertiary)]";
// Chevron icon
const chevronClasses = `w-5 h-5 text-[var(--color-content-default-primary)] transition-transform duration-200 ${
@@ -151,7 +151,7 @@ export function SelectInputView({
{label}
</label>
{asterisk && (
<span className="text-[var(--color-content-default-negative-primary,#ea4845)] text-xx-small-label">
<span className="text-[var(--color-content-default-negative-primary)] text-xx-small-label">
*
</span>
)}
@@ -167,7 +167,7 @@ export function SelectInputView({
)}
</div>
{textOptional && (
<span className="text-[var(--color-content-default-tertiary,#b4b4b4)] text-xx-small-paragraph">
<span className="text-[var(--color-content-default-tertiary)] text-xx-small-paragraph">
Optional text
</span>
)}
app/components/controls/TextInput/TextInput.container.tsx
+3 -3
View File
@@ -102,7 +102,7 @@ const TextInputContainer = forwardRef<HTMLInputElement, TextInputProps>(
if (disabled) {
return {
input:
"bg-[var(--color-surface-default-secondary)] text-[var(--color-content-invert-tertiary,#2d2d2d)] border border-solid border-[var(--color-border-default-primary)] cursor-not-allowed",
"bg-[var(--color-surface-default-secondary)] text-[var(--color-content-invert-tertiary)] border border-solid border-[var(--color-border-default-primary)] cursor-not-allowed",
label: "text-[var(--color-content-default-secondary)]",
inputWrapper: "relative",
focusRing: "",
@@ -171,7 +171,7 @@ const TextInputContainer = forwardRef<HTMLInputElement, TextInputProps>(
const inputClasses = `
w-full transition-all duration-200 ease-in-out
focus:outline-none focus:ring-0
placeholder:text-[var(--color-content-default-tertiary,#b4b4b4)]
placeholder:text-[var(--color-content-default-tertiary)]
${sizeStyles.input}
${stateStyles.input}
${className}
@@ -180,7 +180,7 @@ const TextInputContainer = forwardRef<HTMLInputElement, TextInputProps>(
// Text color for filled text (placeholder color is handled above)
const textColorClass = isFilled
? "text-[var(--color-content-default-primary)]"
: "text-[var(--color-content-default-tertiary,#b4b4b4)]";
: "text-[var(--color-content-default-tertiary)]";
// Form field handlers with disabled state handling
const { handleChange, handleBlur } = useFormField<HTMLInputElement>(
app/components/controls/Upload/Upload.view.tsx
+9 -9
View File
@@ -20,22 +20,22 @@ function UploadView({
// Button styles based on active state
const buttonBgClass = isActive
? "bg-[var(--color-surface-invert-primary,white)]"
: "bg-[var(--color-surface-default-secondary,#141414)]";
? "bg-[var(--color-surface-invert-primary)]"
: "bg-[var(--color-surface-default-secondary)]";
const buttonTextColor = isActive
? "text-[color:var(--color-content-invert-primary,black)]"
: "text-[color:var(--color-content-invert-tertiary,#2d2d2d)]";
? "text-[color:var(--color-content-invert-primary)]"
: "text-[color:var(--color-content-invert-tertiary)]";
// Description text color based on active state
const descriptionTextColor = isActive
? "text-[color:var(--color-content-default-primary,white)]"
: "text-[color:var(--color-content-default-tertiary,#b4b4b4)]";
? "text-[color:var(--color-content-default-primary)]"
: "text-[color:var(--color-content-default-tertiary)]";
// Icon color based on active state
const iconColor = isActive
? "text-[color:var(--color-content-invert-primary,black)]"
: "text-[color:var(--color-content-invert-tertiary,#2d2d2d)]";
? "text-[color:var(--color-content-invert-primary)]"
: "text-[color:var(--color-content-invert-tertiary)]";
return (
<div
@@ -55,7 +55,7 @@ function UploadView({
{/* Upload container — max width per create-flow spec */}
<div
className={`bg-[var(--color-surface-default-secondary,#141414)] mx-auto flex w-full max-w-[474px] shrink-0 items-center justify-center gap-[24px] rounded-[var(--radius-200)] px-[var(--space-600)] py-[var(--space-1200)] ${
className={`bg-[var(--color-surface-default-secondary)] mx-auto flex w-full max-w-[474px] shrink-0 items-center justify-center gap-[24px] rounded-[var(--radius-200)] px-[var(--space-600)] py-[var(--space-1200)] ${
state === "error"
? "border border-[var(--color-border-default-utility-negative)]"
: ""