refactor(ui): Colors#3874

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
joe-bell merged 9 commits into from
Aug 13, 2024
Merged

refactor(ui): Colors #3874

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
09a0119
wip
joe-bell Aug 1, 2024
5458e49
wip
joe-bell Aug 6, 2024
48b27a6
field, alert, hint
joe-bell Aug 7, 2024
3a6b6a6
wip
joe-bell Aug 7, 2024
f918206
fix secondary and connection buttons
joe-bell Aug 9, 2024
fefe4c9
add empty changeset
joe-bell Aug 12, 2024
1d2c296
change default focus styles, finish button
joe-bell Aug 12, 2024
78c43c2
input styling
joe-bell Aug 12, 2024
c1cc470
Merge branch 'main' into joe-bell/SDKI-500
joe-bell Aug 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .changeset/good-peaches-dress.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
---
---
2 changes: 1 addition & 1 deletion packages/ui/src/common/password-field.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -55,7 +55,7 @@ export function PasswordField({
<button
type='button'
className={cx(
'text-icon-sm text-gray-11 start-auto m-[0.1875rem] inline-flex aspect-square h-6 items-center justify-center rounded-sm p-0 outline-none disabled:cursor-not-allowed disabled:opacity-50',
'text-icon-sm text-gray-10 start-auto m-[0.1875rem] inline-flex aspect-square h-6 items-center justify-center rounded-sm p-0 outline-none disabled:cursor-not-allowed disabled:opacity-50',
'hover:enabled:text-gray-12 hover:enabled:bg-gray-3',
'focus-visible:rounded-[calc(var(--cl-radius)*0.5)] focus-visible:ring',
)}
Expand Down
31 changes: 16 additions & 15 deletions packages/ui/src/common/phone-number-field.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -166,29 +166,30 @@ export const PhoneNumberField = React.forwardRef(function PhoneNumberField(
<div
ref={containerRef}
className={cx(
'[--phone-number-field-border-width:1px]',
'[--phone-number-field-py:calc(theme(spacing[1.5])-var(--phone-number-field-border-width))]',
'[--phone-number-field-px:calc(theme(spacing.3)-var(--phone-number-field-border-width))]',
'border-[length:--phone-number-field-border-width] border-[--cl-phone-number-field-border] bg-clip-padding',
// Note:
// - To create the overlapping border/shadow effect"
// - `ring` – "focus ring"
// - `ring-offset` - border
'[--phone-number-field-py:theme(spacing[1.5])]',
'[--phone-number-field-px:theme(spacing.3)]',
'ring ring-transparent ring-offset-1 ring-offset-[--cl-phone-number-field-border]',
'text-gray-12 relative flex min-w-0 rounded-md bg-white text-base outline-none',
'shadow-[0px_1px_1px_0px_theme(colors.gray.a3)]',
'has-[[data-field-input][disabled]]:cursor-not-allowed has-[[data-field-input][disabled]]:opacity-50',
// hover
'hover:has-[[data-field-input]:enabled]:border-[--cl-phone-number-field-border-active]',
'hover:has-[[data-field-input]:enabled]:ring-offset-[--cl-phone-number-field-border-active]',
// focus
'has-[[data-field-input]:focus-visible]:border-[--cl-phone-number-field-border-active]',
'has-[[data-field-input]:focus-visible]:ring-[0.1875rem]',
'has-[[data-field-input]:focus-visible]:ring-[--cl-phone-number-field-ring]',
'has-[[data-field-input]:focus-visible]:ring-offset-[--cl-phone-number-field-border-active]',
'has-[[data-field-input]:focus-visible]:ring-[--cl-phone-number-field-ring,theme(ringColor.DEFAULT)]',
// intent
{
idle: [
'[--cl-phone-number-field-border:theme(colors.gray.a6)]',
'[--cl-phone-number-field-border-active:theme(colors.gray.a8)]',
'[--cl-phone-number-field-ring:theme(colors.gray.a3)]',
'[--cl-phone-number-field-border:theme(colors.gray.a4)]',
'[--cl-phone-number-field-border-active:theme(colors.gray.a7)]',
],
info: [
'[--cl-phone-number-field-border:theme(colors.gray.a8)]',
'[--cl-phone-number-field-border-active:theme(colors.gray.a8)]',
'[--cl-phone-number-field-ring:theme(colors.gray.a3)]',
'[--cl-phone-number-field-border:theme(colors.gray.a7)]',
'[--cl-phone-number-field-border-active:theme(colors.gray.a7)]',
],
error: [
'[--cl-phone-number-field-border:theme(colors.danger.DEFAULT)]',
Expand All@@ -215,7 +216,7 @@ export const PhoneNumberField = React.forwardRef(function PhoneNumberField(
className='hover:enabled:bg-gray-2 focus-visible:bg-gray-2 flex items-center gap-x-1 rounded-l-md px-2 py-1 text-base outline-none'
>
<span className='min-w-6 uppercase'>{selectedCountry.iso}</span>
<Icon.ChevronUpDown className='text-gray-11 size-4' />
<Icon.ChevronUpDown className='text-gray-9 size-4' />
</Button>
<Popover
isOpen={isOpen}
Expand Down
6 changes: 3 additions & 3 deletions packages/ui/src/primitives/alert.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -16,14 +16,14 @@ export const Alert = React.forwardRef<
className={cx(
'leading-small rounded-md border px-4 py-3 text-base',
{
warning: 'text-warning bg-warning/10 border-warning/20',
error: 'text-danger bg-danger/10 border-danger/20',
warning: 'text-warning bg-warning/[0.06] border-warning/[0.12]',
error: 'text-danger bg-danger/[0.06] border-danger/[0.12]',
}[intent],
className,
)}
>
<div className='flex gap-x-2'>
<span className='mt-0.5 shrink-0 *:size-4'>
<span className='mt-px shrink-0 *:size-4'>
{
{
error: <Icon.ExclamationOctagonSm />,
Expand Down
28 changes: 16 additions & 12 deletions packages/ui/src/primitives/button.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -4,34 +4,38 @@ import * as React from 'react';

import { Spinner } from './spinner';

// Note:
// - To create the overlapping border/shadow effect"
// - `ring` – "focus ring"
// - `ring-offset` - border
const button = cva({
base: [
'[--button-border-width:1px]',
'[--button-icon-size:calc(var(--cl-font-size)*1.24)]', // 16px
'appearance-none relative isolate select-none',
'text-base font-medium',
'px-[calc(theme(spacing.3)-var(--button-border-width))] py-[calc(theme(spacing[1.5])-var(--button-border-width))]',
'px-3 py-1.5',
'min-h-[1.875rem]',
'inline-flex w-full items-center justify-center gap-3',
'border-[length:--button-border-width] rounded-md bg-clip-padding',
'outline-none focus-visible:ring',
'ring ring-offset-1 rounded-md',
'[&:not(:focus-visible)]:ring-transparent',
'outline-none',
'*:min-w-0',
],
variants: {
intent: {
primary: [
'[--button-icon-color:currentColor]',
'[--button-icon-opacity:0.6]',
'text-accent-contrast bg-accent-9 border-accent-9 shadow-[0_1px_1px_0_theme(colors.white/.07)_inset]',
'before:absolute before:inset-0 before:rounded-[calc(theme(borderRadius.md)-1px)] before:shadow-[0_1px_1px_0_theme(colors.white/.07)_inset]',
'after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:rounded-[calc(theme(borderRadius.md)-1px)] after:bg-gradient-to-b after:from-white/10 after:to-transparent',
'focus-visible:ring-accent-a7',
'text-accent-contrast bg-accent-9 ring-offset-accent-9',
'shadow-[0px_1px_1px_0px_theme(colors.white/.07)_inset,0px_2px_3px_0px_theme(colors.gray.a7),0px_1px_1px_0px_theme(colors.gray.a9)]',
'before:absolute before:inset-0 before:rounded-[inherit] before:shadow-[0_1px_1px_0_theme(colors.white/.07)_inset]',
'after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:rounded-[inherit] after:bg-gradient-to-b after:from-white/10 after:to-transparent',
],
secondary: [
'[--button-icon-color:theme(colors.gray.12)]',
'[--button-icon-opacity:1]',
'text-gray-12 border-gray-a6 bg-gray-surface shadow-sm shadow-gray-a3',
'focus-visible:border-gray-a8 focus-visible:ring-accent-a3',
'text-gray-12 bg-gray-surface ring-offset-gray-a4',
'shadow-[0px_1px_0px_0px_theme(colors.gray.a2),0px_2px_3px_-1px_theme(colors.gray.a3)]',
],
// Note:
// This currently looks the same as `secondary`, but we've intentfully
Expand All@@ -40,8 +44,8 @@ const button = cva({
connection: [
'[--button-icon-color:theme(colors.gray.12)]',
'[--button-icon-opacity:1]',
'text-gray-12 border-gray-a6 bg-gray-surface shadow-sm shadow-gray-a3',
'focus-visible:border-gray-a8 focus-visible:ring-accent-a3',
'text-gray-12 bg-gray-surface ring-offset-gray-a4',
'shadow-[0px_1px_0px_0px_theme(colors.gray.a2),0px_2px_3px_-1px_theme(colors.gray.a3)]',
],
},
busy: {
Expand Down
10 changes: 6 additions & 4 deletions packages/ui/src/primitives/card.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -15,7 +15,8 @@ export const Root = React.forwardRef(function CardRoot(
className={cx(
'[--card-body-padding:theme(spacing.10)]',
'[--card-content-rounded-b:theme(borderRadius.lg)]',
'bg-gray-2 border-gray-a6 shadow-gray-a5 relative w-96 overflow-hidden rounded-xl border bg-clip-padding shadow-xl',
'bg-gray-2 ring-gray-a3 relative w-96 overflow-hidden rounded-xl ring-1',
'shadow-[0px_5px_15px_0px_theme(colors.gray.a4),0px_15px_35px_-5px_theme(colors.gray.a4)]',
className,
)}
>
Expand All@@ -34,7 +35,8 @@ export const Content = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTM
data-card-content=''
{...props}
className={cx(
'bg-gray-surface shadow-gray-a3 border-gray-a6 relative -m-px flex flex-col gap-8 rounded-[inherit] rounded-b-[--card-content-rounded-b] border p-[--card-body-padding] shadow-sm',
'bg-gray-surface relative flex flex-col gap-8 rounded-b-[--card-content-rounded-b] rounded-t-none p-[--card-body-padding]',
'ring-gray-a3 shadow-[0px_0px_2px_0px_theme(colors.gray.a4),0px_1px_2px_0px_theme(colors.gray.a3)] ring-1',
className,
)}
>
Expand DownExpand Up@@ -177,7 +179,7 @@ export const Banner = React.forwardRef(function CardBanner(
'pointer-events-none absolute inset-0 w-full',
// manually nudge the radius by `1px` for a snug fit
'rounded-b-[calc(var(--card-content-rounded-b)-1px)]',
'[background-image:repeating-linear-gradient(-45deg,theme(colors.orange.50),theme(colors.orange.50)_6px,theme(colors.orange.100/0.75)_6px,theme(colors.orange.100/0.75)_12px)]',
'[background-image:repeating-linear-gradient(-45deg,theme(colors.orange.100/0.4),theme(colors.orange.100/0.4)_6px,theme(colors.orange.100/0.75)_6px,theme(colors.orange.100/0.75)_12px)]',
'[mask-image:linear-gradient(to_top,black,transparent_128px)]',
)}
/>
Expand DownExpand Up@@ -263,7 +265,7 @@ export const FooterAction = React.forwardRef<HTMLDivElement, React.HTMLAttribute
ref={forwardedRef}
data-card-footer-action=''
{...props}
className={cx('border-gray-a6 border-b px-6 py-4 last-of-type:border-b-transparent', className)}
className={cx('border-gray-a3 border-b px-6 py-4 last-of-type:border-b-transparent', className)}
>
{children}
</div>
Expand Down
32 changes: 17 additions & 15 deletions packages/ui/src/primitives/field.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -16,10 +16,9 @@ export const Root = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
ref={forwardedRef}
{...props}
className={cx(
'[--field-input-border-width:1px]',
'[--field-input-height:1.875rem]',
'[--field-input-px:calc(theme(spacing.3)-var(--field-input-border-width))]',
'[--field-input-py:calc(theme(spacing[1.5])-var(--field-input-border-width))]',
'[--field-input-px:theme(spacing.3)]',
'[--field-input-py:theme(spacing[1.5])]',
'[--field-input-group-end-size:--field-input-height]',
'has-[[data-field-checkbox]]:[--cl-field-label-cursor:pointer]',
'has-[[data-field-input][disabled]]:[--cl-field-label-opacity:0.5]',
Expand DownExpand Up@@ -87,7 +86,7 @@ export const Hint = React.forwardRef(function FieldHint(
data-field-hint=''
ref={forwardedRef}
{...props}
className={cx('text-gray-10 text-sm font-medium', className)}
className={cx('text-gray-9 text-sm font-medium', className)}
>
{children}
</LabelEnd>
Expand DownExpand Up@@ -141,6 +140,10 @@ export const InputGroupEnd = React.forwardRef(function FieldInputGroupEnd(
);
});

// Note:
// - To create the overlapping border/shadow effect"
// - `ring` – "focus ring"
// - `ring-offset` - border
export const Input = React.forwardRef(function FieldInput(
{
asChild,
Expand DownExpand Up@@ -169,8 +172,8 @@ export const Input = React.forwardRef(function FieldInput(
// If an `InputGroup` exists, use the `pe` value, or fallback to the
// standard input `px` value
'pe-[var(--field-input-group-pe,var(--field-input-px))]',
'border-[length:--field-input-border-width] bg-clip-padding',
'text-gray-12 relative flex min-w-0 rounded-md bg-white text-base outline-none',
'text-gray-12 relative flex min-w-0 items-center rounded-md bg-white text-base outline-none ring ring-offset-1',
'shadow-[0px_1px_1px_0px_theme(colors.gray.a3)]',
'disabled:cursor-not-allowed disabled:opacity-50',
// variant
{
Expand All@@ -180,21 +183,20 @@ export const Input = React.forwardRef(function FieldInput(
// state
{
native:
'border-[--cl-field-input-border] focus-visible:border-[--cl-field-input-border-active] focus-visible:ring-[0.1875rem] focus-visible:ring-[--cl-field-input-ring] hover:enabled:border-[--cl-field-input-border-active]',
hover: 'border-[--cl-field-input-border-active]',
'focus-visible': 'border-[--cl-field-input-border-active] ring-[0.1875rem] ring-[--cl-field-input-ring]',
'ring-offset-[--cl-field-input-border] focus-visible:ring focus-visible:ring-[--cl-field-input-ring,theme(ringColor.DEFAULT)] focus-visible:ring-offset-[--cl-field-input-border-active] hover:enabled:ring-offset-[--cl-field-input-border-active] [&:not(:focus-visible)]:ring-transparent',
hover: 'ring-transparent ring-offset-[--cl-field-input-border-active]',
'focus-visible':
'ring-[--cl-field-input-ring,theme(ringColor.DEFAULT)] ring-offset-[--cl-field-input-border-active]',
}[state],
// intent
{
idle: [
'[--cl-field-input-border:theme(colors.gray.a6)]',
'[--cl-field-input-border-active:theme(colors.gray.a8)]',
'[--cl-field-input-ring:theme(colors.gray.a3)]',
'[--cl-field-input-border:theme(colors.gray.a4)]',
'[--cl-field-input-border-active:theme(colors.gray.a7)]',
],
info: [
'[--cl-field-input-border:theme(colors.gray.a8)]',
'[--cl-field-input-border-active:theme(colors.gray.a8)]',
'[--cl-field-input-ring:theme(colors.gray.a3)]',
'[--cl-field-input-border:theme(colors.gray.a7)]',
'[--cl-field-input-border-active:theme(colors.gray.a7)]',
],
error: [
'[--cl-field-input-border:theme(colors.danger.DEFAULT)]',
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/primitives/separator.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -8,7 +8,7 @@ export const Separator = React.forwardRef<HTMLParagraphElement, React.HTMLAttrib
ref={forwardedRef}
{...props}
className={cx(
'before:bg-gray-a6 after:bg-gray-a6 text-gray-a11 flex items-center gap-x-4 text-base before:h-px before:flex-1 after:h-px after:flex-1',
'before:bg-gray-a4 after:bg-gray-a4 text-gray-a11 flex items-center gap-x-4 text-base before:h-px before:flex-1 after:h-px after:flex-1',
className,
)}
>
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/src/tailwind.config.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -98,10 +98,10 @@ const config = {
},
},
ringWidth: {
DEFAULT: '0.125rem',
DEFAULT: '0.1875rem',
},
ringColor: {
DEFAULT: 'var(--cl-accent-a9)',
DEFAULT: 'var(--cl-gray-a4)',
},
animation: {
spin: 'cl-spin linear infinite',
Expand Down
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
refactor(ui): Colors#3874

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

joe-bell
merged 9 commits into

from

Aug 13, 2024
 Merged


refactor(ui): Colors
#3874
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


9 commits


Select commit
Hold shift + click to select a range
09a0119

wip


joe-bell Aug 1, 2024
5458e49

wip


joe-bell Aug 6, 2024
48b27a6

field, alert, hint


joe-bell Aug 7, 2024
3a6b6a6

wip


joe-bell Aug 7, 2024
f918206

fix secondary and connection buttons


joe-bell Aug 9, 2024
fefe4c9

add empty changeset


joe-bell Aug 12, 2024
1d2c296

change default focus styles, finish button


joe-bell Aug 12, 2024
78c43c2

input styling


joe-bell Aug 12, 2024
c1cc470

Merge branch 'main' into joe-bell/SDKI-500


joe-bell Aug 13, 2024

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 2 additions & 0 deletions
.changeset/good-peaches-dress.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
---
---

2 changes: 1 addition & 1 deletion
packages/ui/src/common/password-field.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -55,7 +55,7 @@ export function PasswordField({
 <button
 type='button'
 className={cx(
 'text-icon-sm text-gray-11 start-auto m-[0.1875rem] inline-flex aspect-square h-6 items-center justify-center rounded-sm p-0 outline-none disabled:cursor-not-allowed disabled:opacity-50',
 'text-icon-sm text-gray-10 start-auto m-[0.1875rem] inline-flex aspect-square h-6 items-center justify-center rounded-sm p-0 outline-none disabled:cursor-not-allowed disabled:opacity-50',
 'hover:enabled:text-gray-12 hover:enabled:bg-gray-3',
 'focus-visible:rounded-[calc(var(--cl-radius)*0.5)] focus-visible:ring',
 )}
Expand Down

31 changes: 16 additions & 15 deletions
packages/ui/src/common/phone-number-field.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -166,29 +166,30 @@ export const PhoneNumberField = React.forwardRef(function PhoneNumberField(
 <div
 ref={containerRef}
 className={cx(
 '[--phone-number-field-border-width:1px]',
 '[--phone-number-field-py:calc(theme(spacing[1.5])-var(--phone-number-field-border-width))]',
 '[--phone-number-field-px:calc(theme(spacing.3)-var(--phone-number-field-border-width))]',
 'border-[length:--phone-number-field-border-width] border-[--cl-phone-number-field-border] bg-clip-padding',
 // Note:
 // - To create the overlapping border/shadow effect"
 // - `ring` – "focus ring"
 // - `ring-offset` - border
 '[--phone-number-field-py:theme(spacing[1.5])]',
 '[--phone-number-field-px:theme(spacing.3)]',
 'ring ring-transparent ring-offset-1 ring-offset-[--cl-phone-number-field-border]',
 'text-gray-12 relative flex min-w-0 rounded-md bg-white text-base outline-none',
 'shadow-[0px_1px_1px_0px_theme(colors.gray.a3)]',
 'has-[[data-field-input][disabled]]:cursor-not-allowed has-[[data-field-input][disabled]]:opacity-50',
 // hover
 'hover:has-[[data-field-input]:enabled]:border-[--cl-phone-number-field-border-active]',
 'hover:has-[[data-field-input]:enabled]:ring-offset-[--cl-phone-number-field-border-active]',
 // focus
 'has-[[data-field-input]:focus-visible]:border-[--cl-phone-number-field-border-active]',
 'has-[[data-field-input]:focus-visible]:ring-[0.1875rem]',
 'has-[[data-field-input]:focus-visible]:ring-[--cl-phone-number-field-ring]',
 'has-[[data-field-input]:focus-visible]:ring-offset-[--cl-phone-number-field-border-active]',
 'has-[[data-field-input]:focus-visible]:ring-[--cl-phone-number-field-ring,theme(ringColor.DEFAULT)]',
 // intent
 {
 idle: [
 '[--cl-phone-number-field-border:theme(colors.gray.a6)]',
 '[--cl-phone-number-field-border-active:theme(colors.gray.a8)]',
 '[--cl-phone-number-field-ring:theme(colors.gray.a3)]',
 '[--cl-phone-number-field-border:theme(colors.gray.a4)]',
 '[--cl-phone-number-field-border-active:theme(colors.gray.a7)]',
 ],
 info: [
 '[--cl-phone-number-field-border:theme(colors.gray.a8)]',
 '[--cl-phone-number-field-border-active:theme(colors.gray.a8)]',
 '[--cl-phone-number-field-ring:theme(colors.gray.a3)]',
 '[--cl-phone-number-field-border:theme(colors.gray.a7)]',
 '[--cl-phone-number-field-border-active:theme(colors.gray.a7)]',
 ],
 error: [
 '[--cl-phone-number-field-border:theme(colors.danger.DEFAULT)]',
Expand All@@ -215,7 +216,7 @@ export const PhoneNumberField = React.forwardRef(function PhoneNumberField(
 className='hover:enabled:bg-gray-2 focus-visible:bg-gray-2 flex items-center gap-x-1 rounded-l-md px-2 py-1 text-base outline-none'
 >
 <span className='min-w-6 uppercase'>{selectedCountry.iso}</span>
 <Icon.ChevronUpDown className='text-gray-11 size-4' />
 <Icon.ChevronUpDown className='text-gray-9 size-4' />
 </Button>
 <Popover
 isOpen={isOpen}
Expand Down

6 changes: 3 additions & 3 deletions
packages/ui/src/primitives/alert.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,14 +16,14 @@ export const Alert = React.forwardRef<
 className={cx(
 'leading-small rounded-md border px-4 py-3 text-base',
 {
 warning: 'text-warning bg-warning/10 border-warning/20',
 error: 'text-danger bg-danger/10 border-danger/20',
 warning: 'text-warning bg-warning/[0.06] border-warning/[0.12]',
 error: 'text-danger bg-danger/[0.06] border-danger/[0.12]',
 }[intent],
 className,
 )}
 >
 <div className='flex gap-x-2'>
 <span className='mt-0.5 shrink-0 *:size-4'>
 <span className='mt-px shrink-0 *:size-4'>
 {
 {
 error: <Icon.ExclamationOctagonSm />,
Expand Down

28 changes: 16 additions & 12 deletions
packages/ui/src/primitives/button.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,34 +4,38 @@ import * as React from 'react';

import { Spinner } from './spinner';

// Note:
// - To create the overlapping border/shadow effect"
// - `ring` – "focus ring"
// - `ring-offset` - border
const button = cva({
 base: [
 '[--button-border-width:1px]',
 '[--button-icon-size:calc(var(--cl-font-size)*1.24)]', // 16px
 'appearance-none relative isolate select-none',
 'text-base font-medium',
 'px-[calc(theme(spacing.3)-var(--button-border-width))] py-[calc(theme(spacing[1.5])-var(--button-border-width))]',
 'px-3 py-1.5',
 'min-h-[1.875rem]',
 'inline-flex w-full items-center justify-center gap-3',
 'border-[length:--button-border-width] rounded-md bg-clip-padding',
 'outline-none focus-visible:ring',
 'ring ring-offset-1 rounded-md',
 '[&:not(:focus-visible)]:ring-transparent',
 'outline-none',
 '*:min-w-0',
 ],
 variants: {
 intent: {
 primary: [
 '[--button-icon-color:currentColor]',
 '[--button-icon-opacity:0.6]',
 'text-accent-contrast bg-accent-9 border-accent-9 shadow-[0_1px_1px_0_theme(colors.white/.07)_inset]',
 'before:absolute before:inset-0 before:rounded-[calc(theme(borderRadius.md)-1px)] before:shadow-[0_1px_1px_0_theme(colors.white/.07)_inset]',
 'after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:rounded-[calc(theme(borderRadius.md)-1px)] after:bg-gradient-to-b after:from-white/10 after:to-transparent',
 'focus-visible:ring-accent-a7',
 'text-accent-contrast bg-accent-9 ring-offset-accent-9',
 'shadow-[0px_1px_1px_0px_theme(colors.white/.07)_inset,0px_2px_3px_0px_theme(colors.gray.a7),0px_1px_1px_0px_theme(colors.gray.a9)]',
 'before:absolute before:inset-0 before:rounded-[inherit] before:shadow-[0_1px_1px_0_theme(colors.white/.07)_inset]',
 'after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:rounded-[inherit] after:bg-gradient-to-b after:from-white/10 after:to-transparent',
 ],
 secondary: [
 '[--button-icon-color:theme(colors.gray.12)]',
 '[--button-icon-opacity:1]',
 'text-gray-12 border-gray-a6 bg-gray-surface shadow-sm shadow-gray-a3',
 'focus-visible:border-gray-a8 focus-visible:ring-accent-a3',
 'text-gray-12 bg-gray-surface ring-offset-gray-a4',
 'shadow-[0px_1px_0px_0px_theme(colors.gray.a2),0px_2px_3px_-1px_theme(colors.gray.a3)]',
 ],
 // Note:
 // This currently looks the same as `secondary`, but we've intentfully
Expand All@@ -40,8 +44,8 @@ const button = cva({
 connection: [
 '[--button-icon-color:theme(colors.gray.12)]',
 '[--button-icon-opacity:1]',
 'text-gray-12 border-gray-a6 bg-gray-surface shadow-sm shadow-gray-a3',
 'focus-visible:border-gray-a8 focus-visible:ring-accent-a3',
 'text-gray-12 bg-gray-surface ring-offset-gray-a4',
 'shadow-[0px_1px_0px_0px_theme(colors.gray.a2),0px_2px_3px_-1px_theme(colors.gray.a3)]',
 ],
 },
 busy: {
Expand Down

10 changes: 6 additions & 4 deletions
packages/ui/src/primitives/card.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,7 +15,8 @@ export const Root = React.forwardRef(function CardRoot(
 className={cx(
 '[--card-body-padding:theme(spacing.10)]',
 '[--card-content-rounded-b:theme(borderRadius.lg)]',
 'bg-gray-2 border-gray-a6 shadow-gray-a5 relative w-96 overflow-hidden rounded-xl border bg-clip-padding shadow-xl',
 'bg-gray-2 ring-gray-a3 relative w-96 overflow-hidden rounded-xl ring-1',
 'shadow-[0px_5px_15px_0px_theme(colors.gray.a4),0px_15px_35px_-5px_theme(colors.gray.a4)]',
 className,
 )}
 >
Expand All@@ -34,7 +35,8 @@ export const Content = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTM
 data-card-content=''
 {...props}
 className={cx(
 'bg-gray-surface shadow-gray-a3 border-gray-a6 relative -m-px flex flex-col gap-8 rounded-[inherit] rounded-b-[--card-content-rounded-b] border p-[--card-body-padding] shadow-sm',
 'bg-gray-surface relative flex flex-col gap-8 rounded-b-[--card-content-rounded-b] rounded-t-none p-[--card-body-padding]',
 'ring-gray-a3 shadow-[0px_0px_2px_0px_theme(colors.gray.a4),0px_1px_2px_0px_theme(colors.gray.a3)] ring-1',
 className,
 )}
 >
Expand DownExpand Up@@ -177,7 +179,7 @@ export const Banner = React.forwardRef(function CardBanner(
 'pointer-events-none absolute inset-0 w-full',
 // manually nudge the radius by `1px` for a snug fit
 'rounded-b-[calc(var(--card-content-rounded-b)-1px)]',
 '[background-image:repeating-linear-gradient(-45deg,theme(colors.orange.50),theme(colors.orange.50)_6px,theme(colors.orange.100/0.75)_6px,theme(colors.orange.100/0.75)_12px)]',
 '[background-image:repeating-linear-gradient(-45deg,theme(colors.orange.100/0.4),theme(colors.orange.100/0.4)_6px,theme(colors.orange.100/0.75)_6px,theme(colors.orange.100/0.75)_12px)]',
 '[mask-image:linear-gradient(to_top,black,transparent_128px)]',
 )}
 />
Expand DownExpand Up@@ -263,7 +265,7 @@ export const FooterAction = React.forwardRef<HTMLDivElement, React.HTMLAttribute
 ref={forwardedRef}
 data-card-footer-action=''
 {...props}
 className={cx('border-gray-a6 border-b px-6 py-4 last-of-type:border-b-transparent', className)}
 className={cx('border-gray-a3 border-b px-6 py-4 last-of-type:border-b-transparent', className)}
 >
 {children}
 </div>
Expand Down

32 changes: 17 additions & 15 deletions
packages/ui/src/primitives/field.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,10 +16,9 @@ export const Root = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
 ref={forwardedRef}
 {...props}
 className={cx(
 '[--field-input-border-width:1px]',
 '[--field-input-height:1.875rem]',
 '[--field-input-px:calc(theme(spacing.3)-var(--field-input-border-width))]',
 '[--field-input-py:calc(theme(spacing[1.5])-var(--field-input-border-width))]',
 '[--field-input-px:theme(spacing.3)]',
 '[--field-input-py:theme(spacing[1.5])]',
 '[--field-input-group-end-size:--field-input-height]',
 'has-[[data-field-checkbox]]:[--cl-field-label-cursor:pointer]',
 'has-[[data-field-input][disabled]]:[--cl-field-label-opacity:0.5]',
Expand DownExpand Up@@ -87,7 +86,7 @@ export const Hint = React.forwardRef(function FieldHint(
 data-field-hint=''
 ref={forwardedRef}
 {...props}
 className={cx('text-gray-10 text-sm font-medium', className)}
 className={cx('text-gray-9 text-sm font-medium', className)}
 >
 {children}
 </LabelEnd>
Expand DownExpand Up@@ -141,6 +140,10 @@ export const InputGroupEnd = React.forwardRef(function FieldInputGroupEnd(
 );
});

// Note:
// - To create the overlapping border/shadow effect"
// - `ring` – "focus ring"
// - `ring-offset` - border
export const Input = React.forwardRef(function FieldInput(
 {
 asChild,
Expand DownExpand Up@@ -169,8 +172,8 @@ export const Input = React.forwardRef(function FieldInput(
 // If an `InputGroup` exists, use the `pe` value, or fallback to the
 // standard input `px` value
 'pe-[var(--field-input-group-pe,var(--field-input-px))]',
 'border-[length:--field-input-border-width] bg-clip-padding',
 'text-gray-12 relative flex min-w-0 rounded-md bg-white text-base outline-none',
 'text-gray-12 relative flex min-w-0 items-center rounded-md bg-white text-base outline-none ring ring-offset-1',
 'shadow-[0px_1px_1px_0px_theme(colors.gray.a3)]',
 'disabled:cursor-not-allowed disabled:opacity-50',
 // variant
 {
Expand All@@ -180,21 +183,20 @@ export const Input = React.forwardRef(function FieldInput(
 // state
 {
 native:
 'border-[--cl-field-input-border] focus-visible:border-[--cl-field-input-border-active] focus-visible:ring-[0.1875rem] focus-visible:ring-[--cl-field-input-ring] hover:enabled:border-[--cl-field-input-border-active]',
 hover: 'border-[--cl-field-input-border-active]',
 'focus-visible': 'border-[--cl-field-input-border-active] ring-[0.1875rem] ring-[--cl-field-input-ring]',
 'ring-offset-[--cl-field-input-border] focus-visible:ring focus-visible:ring-[--cl-field-input-ring,theme(ringColor.DEFAULT)] focus-visible:ring-offset-[--cl-field-input-border-active] hover:enabled:ring-offset-[--cl-field-input-border-active] [&:not(:focus-visible)]:ring-transparent',
 hover: 'ring-transparent ring-offset-[--cl-field-input-border-active]',
 'focus-visible':
 'ring-[--cl-field-input-ring,theme(ringColor.DEFAULT)] ring-offset-[--cl-field-input-border-active]',
 }[state],
 // intent
 {
 idle: [
 '[--cl-field-input-border:theme(colors.gray.a6)]',
 '[--cl-field-input-border-active:theme(colors.gray.a8)]',
 '[--cl-field-input-ring:theme(colors.gray.a3)]',
 '[--cl-field-input-border:theme(colors.gray.a4)]',
 '[--cl-field-input-border-active:theme(colors.gray.a7)]',
 ],
 info: [
 '[--cl-field-input-border:theme(colors.gray.a8)]',
 '[--cl-field-input-border-active:theme(colors.gray.a8)]',
 '[--cl-field-input-ring:theme(colors.gray.a3)]',
 '[--cl-field-input-border:theme(colors.gray.a7)]',
 '[--cl-field-input-border-active:theme(colors.gray.a7)]',
 ],
 error: [
 '[--cl-field-input-border:theme(colors.danger.DEFAULT)]',
Expand Down

2 changes: 1 addition & 1 deletion
packages/ui/src/primitives/separator.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -8,7 +8,7 @@ export const Separator = React.forwardRef<HTMLParagraphElement, React.HTMLAttrib
 ref={forwardedRef}
 {...props}
 className={cx(
 'before:bg-gray-a6 after:bg-gray-a6 text-gray-a11 flex items-center gap-x-4 text-base before:h-px before:flex-1 after:h-px after:flex-1',
 'before:bg-gray-a4 after:bg-gray-a4 text-gray-a11 flex items-center gap-x-4 text-base before:h-px before:flex-1 after:h-px after:flex-1',
 className,
 )}
 >
Expand Down

4 changes: 2 additions & 2 deletions
packages/ui/src/tailwind.config.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -98,10 +98,10 @@ const config = {
 },
 },
 ringWidth: {
 DEFAULT: '0.125rem',
 DEFAULT: '0.1875rem',
 },
 ringColor: {
 DEFAULT: 'var(--cl-accent-a9)',
 DEFAULT: 'var(--cl-gray-a4)',
 },
 animation: {
 spin: 'cl-spin linear infinite',
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
refactor(ui): Colors#3874

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

joe-bell
merged 9 commits into

from

Aug 13, 2024
 Merged


refactor(ui): Colors
#3874
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


9 commits


Select commit
Hold shift + click to select a range
09a0119

wip


joe-bell Aug 1, 2024
5458e49

wip


joe-bell Aug 6, 2024
48b27a6

field, alert, hint


joe-bell Aug 7, 2024
3a6b6a6

wip


joe-bell Aug 7, 2024
f918206

fix secondary and connection buttons


joe-bell Aug 9, 2024
fefe4c9

add empty changeset


joe-bell Aug 12, 2024
1d2c296

change default focus styles, finish button


joe-bell Aug 12, 2024
78c43c2

input styling


joe-bell Aug 12, 2024
c1cc470

Merge branch 'main' into joe-bell/SDKI-500


joe-bell Aug 13, 2024

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 2 additions & 0 deletions
.changeset/good-peaches-dress.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
---
---

2 changes: 1 addition & 1 deletion
packages/ui/src/common/password-field.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -55,7 +55,7 @@ export function PasswordField({
 <button
 type='button'
 className={cx(
 'text-icon-sm text-gray-11 start-auto m-[0.1875rem] inline-flex aspect-square h-6 items-center justify-center rounded-sm p-0 outline-none disabled:cursor-not-allowed disabled:opacity-50',
 'text-icon-sm text-gray-10 start-auto m-[0.1875rem] inline-flex aspect-square h-6 items-center justify-center rounded-sm p-0 outline-none disabled:cursor-not-allowed disabled:opacity-50',
 'hover:enabled:text-gray-12 hover:enabled:bg-gray-3',
 'focus-visible:rounded-[calc(var(--cl-radius)*0.5)] focus-visible:ring',
 )}
Expand Down

31 changes: 16 additions & 15 deletions
packages/ui/src/common/phone-number-field.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -166,29 +166,30 @@ export const PhoneNumberField = React.forwardRef(function PhoneNumberField(
 <div
 ref={containerRef}
 className={cx(
 '[--phone-number-field-border-width:1px]',
 '[--phone-number-field-py:calc(theme(spacing[1.5])-var(--phone-number-field-border-width))]',
 '[--phone-number-field-px:calc(theme(spacing.3)-var(--phone-number-field-border-width))]',
 'border-[length:--phone-number-field-border-width] border-[--cl-phone-number-field-border] bg-clip-padding',
 // Note:
 // - To create the overlapping border/shadow effect"
 // - `ring` – "focus ring"
 // - `ring-offset` - border
 '[--phone-number-field-py:theme(spacing[1.5])]',
 '[--phone-number-field-px:theme(spacing.3)]',
 'ring ring-transparent ring-offset-1 ring-offset-[--cl-phone-number-field-border]',
 'text-gray-12 relative flex min-w-0 rounded-md bg-white text-base outline-none',
 'shadow-[0px_1px_1px_0px_theme(colors.gray.a3)]',
 'has-[[data-field-input][disabled]]:cursor-not-allowed has-[[data-field-input][disabled]]:opacity-50',
 // hover
 'hover:has-[[data-field-input]:enabled]:border-[--cl-phone-number-field-border-active]',
 'hover:has-[[data-field-input]:enabled]:ring-offset-[--cl-phone-number-field-border-active]',
 // focus
 'has-[[data-field-input]:focus-visible]:border-[--cl-phone-number-field-border-active]',
 'has-[[data-field-input]:focus-visible]:ring-[0.1875rem]',
 'has-[[data-field-input]:focus-visible]:ring-[--cl-phone-number-field-ring]',
 'has-[[data-field-input]:focus-visible]:ring-offset-[--cl-phone-number-field-border-active]',
 'has-[[data-field-input]:focus-visible]:ring-[--cl-phone-number-field-ring,theme(ringColor.DEFAULT)]',
 // intent
 {
 idle: [
 '[--cl-phone-number-field-border:theme(colors.gray.a6)]',
 '[--cl-phone-number-field-border-active:theme(colors.gray.a8)]',
 '[--cl-phone-number-field-ring:theme(colors.gray.a3)]',
 '[--cl-phone-number-field-border:theme(colors.gray.a4)]',
 '[--cl-phone-number-field-border-active:theme(colors.gray.a7)]',
 ],
 info: [
 '[--cl-phone-number-field-border:theme(colors.gray.a8)]',
 '[--cl-phone-number-field-border-active:theme(colors.gray.a8)]',
 '[--cl-phone-number-field-ring:theme(colors.gray.a3)]',
 '[--cl-phone-number-field-border:theme(colors.gray.a7)]',
 '[--cl-phone-number-field-border-active:theme(colors.gray.a7)]',
 ],
 error: [
 '[--cl-phone-number-field-border:theme(colors.danger.DEFAULT)]',
Expand All@@ -215,7 +216,7 @@ export const PhoneNumberField = React.forwardRef(function PhoneNumberField(
 className='hover:enabled:bg-gray-2 focus-visible:bg-gray-2 flex items-center gap-x-1 rounded-l-md px-2 py-1 text-base outline-none'
 >
 <span className='min-w-6 uppercase'>{selectedCountry.iso}</span>
 <Icon.ChevronUpDown className='text-gray-11 size-4' />
 <Icon.ChevronUpDown className='text-gray-9 size-4' />
 </Button>
 <Popover
 isOpen={isOpen}
Expand Down

6 changes: 3 additions & 3 deletions
packages/ui/src/primitives/alert.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,14 +16,14 @@ export const Alert = React.forwardRef<
 className={cx(
 'leading-small rounded-md border px-4 py-3 text-base',
 {
 warning: 'text-warning bg-warning/10 border-warning/20',
 error: 'text-danger bg-danger/10 border-danger/20',
 warning: 'text-warning bg-warning/[0.06] border-warning/[0.12]',
 error: 'text-danger bg-danger/[0.06] border-danger/[0.12]',
 }[intent],
 className,
 )}
 >
 <div className='flex gap-x-2'>
 <span className='mt-0.5 shrink-0 *:size-4'>
 <span className='mt-px shrink-0 *:size-4'>
 {
 {
 error: <Icon.ExclamationOctagonSm />,
Expand Down

28 changes: 16 additions & 12 deletions
packages/ui/src/primitives/button.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,34 +4,38 @@ import * as React from 'react';

import { Spinner } from './spinner';

// Note:
// - To create the overlapping border/shadow effect"
// - `ring` – "focus ring"
// - `ring-offset` - border
const button = cva({
 base: [
 '[--button-border-width:1px]',
 '[--button-icon-size:calc(var(--cl-font-size)*1.24)]', // 16px
 'appearance-none relative isolate select-none',
 'text-base font-medium',
 'px-[calc(theme(spacing.3)-var(--button-border-width))] py-[calc(theme(spacing[1.5])-var(--button-border-width))]',
 'px-3 py-1.5',
 'min-h-[1.875rem]',
 'inline-flex w-full items-center justify-center gap-3',
 'border-[length:--button-border-width] rounded-md bg-clip-padding',
 'outline-none focus-visible:ring',
 'ring ring-offset-1 rounded-md',
 '[&:not(:focus-visible)]:ring-transparent',
 'outline-none',
 '*:min-w-0',
 ],
 variants: {
 intent: {
 primary: [
 '[--button-icon-color:currentColor]',
 '[--button-icon-opacity:0.6]',
 'text-accent-contrast bg-accent-9 border-accent-9 shadow-[0_1px_1px_0_theme(colors.white/.07)_inset]',
 'before:absolute before:inset-0 before:rounded-[calc(theme(borderRadius.md)-1px)] before:shadow-[0_1px_1px_0_theme(colors.white/.07)_inset]',
 'after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:rounded-[calc(theme(borderRadius.md)-1px)] after:bg-gradient-to-b after:from-white/10 after:to-transparent',
 'focus-visible:ring-accent-a7',
 'text-accent-contrast bg-accent-9 ring-offset-accent-9',
 'shadow-[0px_1px_1px_0px_theme(colors.white/.07)_inset,0px_2px_3px_0px_theme(colors.gray.a7),0px_1px_1px_0px_theme(colors.gray.a9)]',
 'before:absolute before:inset-0 before:rounded-[inherit] before:shadow-[0_1px_1px_0_theme(colors.white/.07)_inset]',
 'after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:rounded-[inherit] after:bg-gradient-to-b after:from-white/10 after:to-transparent',
 ],
 secondary: [
 '[--button-icon-color:theme(colors.gray.12)]',
 '[--button-icon-opacity:1]',
 'text-gray-12 border-gray-a6 bg-gray-surface shadow-sm shadow-gray-a3',
 'focus-visible:border-gray-a8 focus-visible:ring-accent-a3',
 'text-gray-12 bg-gray-surface ring-offset-gray-a4',
 'shadow-[0px_1px_0px_0px_theme(colors.gray.a2),0px_2px_3px_-1px_theme(colors.gray.a3)]',
 ],
 // Note:
 // This currently looks the same as `secondary`, but we've intentfully
Expand All@@ -40,8 +44,8 @@ const button = cva({
 connection: [
 '[--button-icon-color:theme(colors.gray.12)]',
 '[--button-icon-opacity:1]',
 'text-gray-12 border-gray-a6 bg-gray-surface shadow-sm shadow-gray-a3',
 'focus-visible:border-gray-a8 focus-visible:ring-accent-a3',
 'text-gray-12 bg-gray-surface ring-offset-gray-a4',
 'shadow-[0px_1px_0px_0px_theme(colors.gray.a2),0px_2px_3px_-1px_theme(colors.gray.a3)]',
 ],
 },
 busy: {
Expand Down

10 changes: 6 additions & 4 deletions
packages/ui/src/primitives/card.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,7 +15,8 @@ export const Root = React.forwardRef(function CardRoot(
 className={cx(
 '[--card-body-padding:theme(spacing.10)]',
 '[--card-content-rounded-b:theme(borderRadius.lg)]',
 'bg-gray-2 border-gray-a6 shadow-gray-a5 relative w-96 overflow-hidden rounded-xl border bg-clip-padding shadow-xl',
 'bg-gray-2 ring-gray-a3 relative w-96 overflow-hidden rounded-xl ring-1',
 'shadow-[0px_5px_15px_0px_theme(colors.gray.a4),0px_15px_35px_-5px_theme(colors.gray.a4)]',
 className,
 )}
 >
Expand All@@ -34,7 +35,8 @@ export const Content = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTM
 data-card-content=''
 {...props}
 className={cx(
 'bg-gray-surface shadow-gray-a3 border-gray-a6 relative -m-px flex flex-col gap-8 rounded-[inherit] rounded-b-[--card-content-rounded-b] border p-[--card-body-padding] shadow-sm',
 'bg-gray-surface relative flex flex-col gap-8 rounded-b-[--card-content-rounded-b] rounded-t-none p-[--card-body-padding]',
 'ring-gray-a3 shadow-[0px_0px_2px_0px_theme(colors.gray.a4),0px_1px_2px_0px_theme(colors.gray.a3)] ring-1',
 className,
 )}
 >
Expand DownExpand Up@@ -177,7 +179,7 @@ export const Banner = React.forwardRef(function CardBanner(
 'pointer-events-none absolute inset-0 w-full',
 // manually nudge the radius by `1px` for a snug fit
 'rounded-b-[calc(var(--card-content-rounded-b)-1px)]',
 '[background-image:repeating-linear-gradient(-45deg,theme(colors.orange.50),theme(colors.orange.50)_6px,theme(colors.orange.100/0.75)_6px,theme(colors.orange.100/0.75)_12px)]',
 '[background-image:repeating-linear-gradient(-45deg,theme(colors.orange.100/0.4),theme(colors.orange.100/0.4)_6px,theme(colors.orange.100/0.75)_6px,theme(colors.orange.100/0.75)_12px)]',
 '[mask-image:linear-gradient(to_top,black,transparent_128px)]',
 )}
 />
Expand DownExpand Up@@ -263,7 +265,7 @@ export const FooterAction = React.forwardRef<HTMLDivElement, React.HTMLAttribute
 ref={forwardedRef}
 data-card-footer-action=''
 {...props}
 className={cx('border-gray-a6 border-b px-6 py-4 last-of-type:border-b-transparent', className)}
 className={cx('border-gray-a3 border-b px-6 py-4 last-of-type:border-b-transparent', className)}
 >
 {children}
 </div>
Expand Down

32 changes: 17 additions & 15 deletions
packages/ui/src/primitives/field.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,10 +16,9 @@ export const Root = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
 ref={forwardedRef}
 {...props}
 className={cx(
 '[--field-input-border-width:1px]',
 '[--field-input-height:1.875rem]',
 '[--field-input-px:calc(theme(spacing.3)-var(--field-input-border-width))]',
 '[--field-input-py:calc(theme(spacing[1.5])-var(--field-input-border-width))]',
 '[--field-input-px:theme(spacing.3)]',
 '[--field-input-py:theme(spacing[1.5])]',
 '[--field-input-group-end-size:--field-input-height]',
 'has-[[data-field-checkbox]]:[--cl-field-label-cursor:pointer]',
 'has-[[data-field-input][disabled]]:[--cl-field-label-opacity:0.5]',
Expand DownExpand Up@@ -87,7 +86,7 @@ export const Hint = React.forwardRef(function FieldHint(
 data-field-hint=''
 ref={forwardedRef}
 {...props}
 className={cx('text-gray-10 text-sm font-medium', className)}
 className={cx('text-gray-9 text-sm font-medium', className)}
 >
 {children}
 </LabelEnd>
Expand DownExpand Up@@ -141,6 +140,10 @@ export const InputGroupEnd = React.forwardRef(function FieldInputGroupEnd(
 );
});

// Note:
// - To create the overlapping border/shadow effect"
// - `ring` – "focus ring"
// - `ring-offset` - border
export const Input = React.forwardRef(function FieldInput(
 {
 asChild,
Expand DownExpand Up@@ -169,8 +172,8 @@ export const Input = React.forwardRef(function FieldInput(
 // If an `InputGroup` exists, use the `pe` value, or fallback to the
 // standard input `px` value
 'pe-[var(--field-input-group-pe,var(--field-input-px))]',
 'border-[length:--field-input-border-width] bg-clip-padding',
 'text-gray-12 relative flex min-w-0 rounded-md bg-white text-base outline-none',
 'text-gray-12 relative flex min-w-0 items-center rounded-md bg-white text-base outline-none ring ring-offset-1',
 'shadow-[0px_1px_1px_0px_theme(colors.gray.a3)]',
 'disabled:cursor-not-allowed disabled:opacity-50',
 // variant
 {
Expand All@@ -180,21 +183,20 @@ export const Input = React.forwardRef(function FieldInput(
 // state
 {
 native:
 'border-[--cl-field-input-border] focus-visible:border-[--cl-field-input-border-active] focus-visible:ring-[0.1875rem] focus-visible:ring-[--cl-field-input-ring] hover:enabled:border-[--cl-field-input-border-active]',
 hover: 'border-[--cl-field-input-border-active]',
 'focus-visible': 'border-[--cl-field-input-border-active] ring-[0.1875rem] ring-[--cl-field-input-ring]',
 'ring-offset-[--cl-field-input-border] focus-visible:ring focus-visible:ring-[--cl-field-input-ring,theme(ringColor.DEFAULT)] focus-visible:ring-offset-[--cl-field-input-border-active] hover:enabled:ring-offset-[--cl-field-input-border-active] [&:not(:focus-visible)]:ring-transparent',
 hover: 'ring-transparent ring-offset-[--cl-field-input-border-active]',
 'focus-visible':
 'ring-[--cl-field-input-ring,theme(ringColor.DEFAULT)] ring-offset-[--cl-field-input-border-active]',
 }[state],
 // intent
 {
 idle: [
 '[--cl-field-input-border:theme(colors.gray.a6)]',
 '[--cl-field-input-border-active:theme(colors.gray.a8)]',
 '[--cl-field-input-ring:theme(colors.gray.a3)]',
 '[--cl-field-input-border:theme(colors.gray.a4)]',
 '[--cl-field-input-border-active:theme(colors.gray.a7)]',
 ],
 info: [
 '[--cl-field-input-border:theme(colors.gray.a8)]',
 '[--cl-field-input-border-active:theme(colors.gray.a8)]',
 '[--cl-field-input-ring:theme(colors.gray.a3)]',
 '[--cl-field-input-border:theme(colors.gray.a7)]',
 '[--cl-field-input-border-active:theme(colors.gray.a7)]',
 ],
 error: [
 '[--cl-field-input-border:theme(colors.danger.DEFAULT)]',
Expand Down

2 changes: 1 addition & 1 deletion
packages/ui/src/primitives/separator.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -8,7 +8,7 @@ export const Separator = React.forwardRef<HTMLParagraphElement, React.HTMLAttrib
 ref={forwardedRef}
 {...props}
 className={cx(
 'before:bg-gray-a6 after:bg-gray-a6 text-gray-a11 flex items-center gap-x-4 text-base before:h-px before:flex-1 after:h-px after:flex-1',
 'before:bg-gray-a4 after:bg-gray-a4 text-gray-a11 flex items-center gap-x-4 text-base before:h-px before:flex-1 after:h-px after:flex-1',
 className,
 )}
 >
Expand Down

4 changes: 2 additions & 2 deletions
packages/ui/src/tailwind.config.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -98,10 +98,10 @@ const config = {
 },
 },
 ringWidth: {
 DEFAULT: '0.125rem',
 DEFAULT: '0.1875rem',
 },
 ringColor: {
 DEFAULT: 'var(--cl-accent-a9)',
 DEFAULT: 'var(--cl-gray-a4)',
 },
 animation: {
 spin: 'cl-spin linear infinite',
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
refactor(ui): Colors#3874

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

joe-bell
merged 9 commits into

from

Aug 13, 2024
 Merged


refactor(ui): Colors
#3874
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


9 commits


Select commit
Hold shift + click to select a range
09a0119

wip


joe-bell Aug 1, 2024
5458e49

wip


joe-bell Aug 6, 2024
48b27a6

field, alert, hint


joe-bell Aug 7, 2024
3a6b6a6

wip


joe-bell Aug 7, 2024
f918206

fix secondary and connection buttons


joe-bell Aug 9, 2024
fefe4c9

add empty changeset


joe-bell Aug 12, 2024
1d2c296

change default focus styles, finish button


joe-bell Aug 12, 2024
78c43c2

input styling


joe-bell Aug 12, 2024
c1cc470

Merge branch 'main' into joe-bell/SDKI-500


joe-bell Aug 13, 2024

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 2 additions & 0 deletions
.changeset/good-peaches-dress.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
---
---

2 changes: 1 addition & 1 deletion
packages/ui/src/common/password-field.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -55,7 +55,7 @@ export function PasswordField({
 <button
 type='button'
 className={cx(
 'text-icon-sm text-gray-11 start-auto m-[0.1875rem] inline-flex aspect-square h-6 items-center justify-center rounded-sm p-0 outline-none disabled:cursor-not-allowed disabled:opacity-50',
 'text-icon-sm text-gray-10 start-auto m-[0.1875rem] inline-flex aspect-square h-6 items-center justify-center rounded-sm p-0 outline-none disabled:cursor-not-allowed disabled:opacity-50',
 'hover:enabled:text-gray-12 hover:enabled:bg-gray-3',
 'focus-visible:rounded-[calc(var(--cl-radius)*0.5)] focus-visible:ring',
 )}
Expand Down

31 changes: 16 additions & 15 deletions
packages/ui/src/common/phone-number-field.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -166,29 +166,30 @@ export const PhoneNumberField = React.forwardRef(function PhoneNumberField(
 <div
 ref={containerRef}
 className={cx(
 '[--phone-number-field-border-width:1px]',
 '[--phone-number-field-py:calc(theme(spacing[1.5])-var(--phone-number-field-border-width))]',
 '[--phone-number-field-px:calc(theme(spacing.3)-var(--phone-number-field-border-width))]',
 'border-[length:--phone-number-field-border-width] border-[--cl-phone-number-field-border] bg-clip-padding',
 // Note:
 // - To create the overlapping border/shadow effect"
 // - `ring` – "focus ring"
 // - `ring-offset` - border
 '[--phone-number-field-py:theme(spacing[1.5])]',
 '[--phone-number-field-px:theme(spacing.3)]',
 'ring ring-transparent ring-offset-1 ring-offset-[--cl-phone-number-field-border]',
 'text-gray-12 relative flex min-w-0 rounded-md bg-white text-base outline-none',
 'shadow-[0px_1px_1px_0px_theme(colors.gray.a3)]',
 'has-[[data-field-input][disabled]]:cursor-not-allowed has-[[data-field-input][disabled]]:opacity-50',
 // hover
 'hover:has-[[data-field-input]:enabled]:border-[--cl-phone-number-field-border-active]',
 'hover:has-[[data-field-input]:enabled]:ring-offset-[--cl-phone-number-field-border-active]',
 // focus
 'has-[[data-field-input]:focus-visible]:border-[--cl-phone-number-field-border-active]',
 'has-[[data-field-input]:focus-visible]:ring-[0.1875rem]',
 'has-[[data-field-input]:focus-visible]:ring-[--cl-phone-number-field-ring]',
 'has-[[data-field-input]:focus-visible]:ring-offset-[--cl-phone-number-field-border-active]',
 'has-[[data-field-input]:focus-visible]:ring-[--cl-phone-number-field-ring,theme(ringColor.DEFAULT)]',
 // intent
 {
 idle: [
 '[--cl-phone-number-field-border:theme(colors.gray.a6)]',
 '[--cl-phone-number-field-border-active:theme(colors.gray.a8)]',
 '[--cl-phone-number-field-ring:theme(colors.gray.a3)]',
 '[--cl-phone-number-field-border:theme(colors.gray.a4)]',
 '[--cl-phone-number-field-border-active:theme(colors.gray.a7)]',
 ],
 info: [
 '[--cl-phone-number-field-border:theme(colors.gray.a8)]',
 '[--cl-phone-number-field-border-active:theme(colors.gray.a8)]',
 '[--cl-phone-number-field-ring:theme(colors.gray.a3)]',
 '[--cl-phone-number-field-border:theme(colors.gray.a7)]',
 '[--cl-phone-number-field-border-active:theme(colors.gray.a7)]',
 ],
 error: [
 '[--cl-phone-number-field-border:theme(colors.danger.DEFAULT)]',
Expand All@@ -215,7 +216,7 @@ export const PhoneNumberField = React.forwardRef(function PhoneNumberField(
 className='hover:enabled:bg-gray-2 focus-visible:bg-gray-2 flex items-center gap-x-1 rounded-l-md px-2 py-1 text-base outline-none'
 >
 <span className='min-w-6 uppercase'>{selectedCountry.iso}</span>
 <Icon.ChevronUpDown className='text-gray-11 size-4' />
 <Icon.ChevronUpDown className='text-gray-9 size-4' />
 </Button>
 <Popover
 isOpen={isOpen}
Expand Down

6 changes: 3 additions & 3 deletions
packages/ui/src/primitives/alert.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,14 +16,14 @@ export const Alert = React.forwardRef<
 className={cx(
 'leading-small rounded-md border px-4 py-3 text-base',
 {
 warning: 'text-warning bg-warning/10 border-warning/20',
 error: 'text-danger bg-danger/10 border-danger/20',
 warning: 'text-warning bg-warning/[0.06] border-warning/[0.12]',
 error: 'text-danger bg-danger/[0.06] border-danger/[0.12]',
 }[intent],
 className,
 )}
 >
 <div className='flex gap-x-2'>
 <span className='mt-0.5 shrink-0 *:size-4'>
 <span className='mt-px shrink-0 *:size-4'>
 {
 {
 error: <Icon.ExclamationOctagonSm />,
Expand Down

28 changes: 16 additions & 12 deletions
packages/ui/src/primitives/button.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,34 +4,38 @@ import * as React from 'react';

import { Spinner } from './spinner';

// Note:
// - To create the overlapping border/shadow effect"
// - `ring` – "focus ring"
// - `ring-offset` - border
const button = cva({
 base: [
 '[--button-border-width:1px]',
 '[--button-icon-size:calc(var(--cl-font-size)*1.24)]', // 16px
 'appearance-none relative isolate select-none',
 'text-base font-medium',
 'px-[calc(theme(spacing.3)-var(--button-border-width))] py-[calc(theme(spacing[1.5])-var(--button-border-width))]',
 'px-3 py-1.5',
 'min-h-[1.875rem]',
 'inline-flex w-full items-center justify-center gap-3',
 'border-[length:--button-border-width] rounded-md bg-clip-padding',
 'outline-none focus-visible:ring',
 'ring ring-offset-1 rounded-md',
 '[&:not(:focus-visible)]:ring-transparent',
 'outline-none',
 '*:min-w-0',
 ],
 variants: {
 intent: {
 primary: [
 '[--button-icon-color:currentColor]',
 '[--button-icon-opacity:0.6]',
 'text-accent-contrast bg-accent-9 border-accent-9 shadow-[0_1px_1px_0_theme(colors.white/.07)_inset]',
 'before:absolute before:inset-0 before:rounded-[calc(theme(borderRadius.md)-1px)] before:shadow-[0_1px_1px_0_theme(colors.white/.07)_inset]',
 'after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:rounded-[calc(theme(borderRadius.md)-1px)] after:bg-gradient-to-b after:from-white/10 after:to-transparent',
 'focus-visible:ring-accent-a7',
 'text-accent-contrast bg-accent-9 ring-offset-accent-9',
 'shadow-[0px_1px_1px_0px_theme(colors.white/.07)_inset,0px_2px_3px_0px_theme(colors.gray.a7),0px_1px_1px_0px_theme(colors.gray.a9)]',
 'before:absolute before:inset-0 before:rounded-[inherit] before:shadow-[0_1px_1px_0_theme(colors.white/.07)_inset]',
 'after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:rounded-[inherit] after:bg-gradient-to-b after:from-white/10 after:to-transparent',
 ],
 secondary: [
 '[--button-icon-color:theme(colors.gray.12)]',
 '[--button-icon-opacity:1]',
 'text-gray-12 border-gray-a6 bg-gray-surface shadow-sm shadow-gray-a3',
 'focus-visible:border-gray-a8 focus-visible:ring-accent-a3',
 'text-gray-12 bg-gray-surface ring-offset-gray-a4',
 'shadow-[0px_1px_0px_0px_theme(colors.gray.a2),0px_2px_3px_-1px_theme(colors.gray.a3)]',
 ],
 // Note:
 // This currently looks the same as `secondary`, but we've intentfully
Expand All@@ -40,8 +44,8 @@ const button = cva({
 connection: [
 '[--button-icon-color:theme(colors.gray.12)]',
 '[--button-icon-opacity:1]',
 'text-gray-12 border-gray-a6 bg-gray-surface shadow-sm shadow-gray-a3',
 'focus-visible:border-gray-a8 focus-visible:ring-accent-a3',
 'text-gray-12 bg-gray-surface ring-offset-gray-a4',
 'shadow-[0px_1px_0px_0px_theme(colors.gray.a2),0px_2px_3px_-1px_theme(colors.gray.a3)]',
 ],
 },
 busy: {
Expand Down

10 changes: 6 additions & 4 deletions
packages/ui/src/primitives/card.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,7 +15,8 @@ export const Root = React.forwardRef(function CardRoot(
 className={cx(
 '[--card-body-padding:theme(spacing.10)]',
 '[--card-content-rounded-b:theme(borderRadius.lg)]',
 'bg-gray-2 border-gray-a6 shadow-gray-a5 relative w-96 overflow-hidden rounded-xl border bg-clip-padding shadow-xl',
 'bg-gray-2 ring-gray-a3 relative w-96 overflow-hidden rounded-xl ring-1',
 'shadow-[0px_5px_15px_0px_theme(colors.gray.a4),0px_15px_35px_-5px_theme(colors.gray.a4)]',
 className,
 )}
 >
Expand All@@ -34,7 +35,8 @@ export const Content = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTM
 data-card-content=''
 {...props}
 className={cx(
 'bg-gray-surface shadow-gray-a3 border-gray-a6 relative -m-px flex flex-col gap-8 rounded-[inherit] rounded-b-[--card-content-rounded-b] border p-[--card-body-padding] shadow-sm',
 'bg-gray-surface relative flex flex-col gap-8 rounded-b-[--card-content-rounded-b] rounded-t-none p-[--card-body-padding]',
 'ring-gray-a3 shadow-[0px_0px_2px_0px_theme(colors.gray.a4),0px_1px_2px_0px_theme(colors.gray.a3)] ring-1',
 className,
 )}
 >
Expand DownExpand Up@@ -177,7 +179,7 @@ export const Banner = React.forwardRef(function CardBanner(
 'pointer-events-none absolute inset-0 w-full',
 // manually nudge the radius by `1px` for a snug fit
 'rounded-b-[calc(var(--card-content-rounded-b)-1px)]',
 '[background-image:repeating-linear-gradient(-45deg,theme(colors.orange.50),theme(colors.orange.50)_6px,theme(colors.orange.100/0.75)_6px,theme(colors.orange.100/0.75)_12px)]',
 '[background-image:repeating-linear-gradient(-45deg,theme(colors.orange.100/0.4),theme(colors.orange.100/0.4)_6px,theme(colors.orange.100/0.75)_6px,theme(colors.orange.100/0.75)_12px)]',
 '[mask-image:linear-gradient(to_top,black,transparent_128px)]',
 )}
 />
Expand DownExpand Up@@ -263,7 +265,7 @@ export const FooterAction = React.forwardRef<HTMLDivElement, React.HTMLAttribute
 ref={forwardedRef}
 data-card-footer-action=''
 {...props}
 className={cx('border-gray-a6 border-b px-6 py-4 last-of-type:border-b-transparent', className)}
 className={cx('border-gray-a3 border-b px-6 py-4 last-of-type:border-b-transparent', className)}
 >
 {children}
 </div>
Expand Down

32 changes: 17 additions & 15 deletions
packages/ui/src/primitives/field.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,10 +16,9 @@ export const Root = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
 ref={forwardedRef}
 {...props}
 className={cx(
 '[--field-input-border-width:1px]',
 '[--field-input-height:1.875rem]',
 '[--field-input-px:calc(theme(spacing.3)-var(--field-input-border-width))]',
 '[--field-input-py:calc(theme(spacing[1.5])-var(--field-input-border-width))]',
 '[--field-input-px:theme(spacing.3)]',
 '[--field-input-py:theme(spacing[1.5])]',
 '[--field-input-group-end-size:--field-input-height]',
 'has-[[data-field-checkbox]]:[--cl-field-label-cursor:pointer]',
 'has-[[data-field-input][disabled]]:[--cl-field-label-opacity:0.5]',
Expand DownExpand Up@@ -87,7 +86,7 @@ export const Hint = React.forwardRef(function FieldHint(
 data-field-hint=''
 ref={forwardedRef}
 {...props}
 className={cx('text-gray-10 text-sm font-medium', className)}
 className={cx('text-gray-9 text-sm font-medium', className)}
 >
 {children}
 </LabelEnd>
Expand DownExpand Up@@ -141,6 +140,10 @@ export const InputGroupEnd = React.forwardRef(function FieldInputGroupEnd(
 );
});

// Note:
// - To create the overlapping border/shadow effect"
// - `ring` – "focus ring"
// - `ring-offset` - border
export const Input = React.forwardRef(function FieldInput(
 {
 asChild,
Expand DownExpand Up@@ -169,8 +172,8 @@ export const Input = React.forwardRef(function FieldInput(
 // If an `InputGroup` exists, use the `pe` value, or fallback to the
 // standard input `px` value
 'pe-[var(--field-input-group-pe,var(--field-input-px))]',
 'border-[length:--field-input-border-width] bg-clip-padding',
 'text-gray-12 relative flex min-w-0 rounded-md bg-white text-base outline-none',
 'text-gray-12 relative flex min-w-0 items-center rounded-md bg-white text-base outline-none ring ring-offset-1',
 'shadow-[0px_1px_1px_0px_theme(colors.gray.a3)]',
 'disabled:cursor-not-allowed disabled:opacity-50',
 // variant
 {
Expand All@@ -180,21 +183,20 @@ export const Input = React.forwardRef(function FieldInput(
 // state
 {
 native:
 'border-[--cl-field-input-border] focus-visible:border-[--cl-field-input-border-active] focus-visible:ring-[0.1875rem] focus-visible:ring-[--cl-field-input-ring] hover:enabled:border-[--cl-field-input-border-active]',
 hover: 'border-[--cl-field-input-border-active]',
 'focus-visible': 'border-[--cl-field-input-border-active] ring-[0.1875rem] ring-[--cl-field-input-ring]',
 'ring-offset-[--cl-field-input-border] focus-visible:ring focus-visible:ring-[--cl-field-input-ring,theme(ringColor.DEFAULT)] focus-visible:ring-offset-[--cl-field-input-border-active] hover:enabled:ring-offset-[--cl-field-input-border-active] [&:not(:focus-visible)]:ring-transparent',
 hover: 'ring-transparent ring-offset-[--cl-field-input-border-active]',
 'focus-visible':
 'ring-[--cl-field-input-ring,theme(ringColor.DEFAULT)] ring-offset-[--cl-field-input-border-active]',
 }[state],
 // intent
 {
 idle: [
 '[--cl-field-input-border:theme(colors.gray.a6)]',
 '[--cl-field-input-border-active:theme(colors.gray.a8)]',
 '[--cl-field-input-ring:theme(colors.gray.a3)]',
 '[--cl-field-input-border:theme(colors.gray.a4)]',
 '[--cl-field-input-border-active:theme(colors.gray.a7)]',
 ],
 info: [
 '[--cl-field-input-border:theme(colors.gray.a8)]',
 '[--cl-field-input-border-active:theme(colors.gray.a8)]',
 '[--cl-field-input-ring:theme(colors.gray.a3)]',
 '[--cl-field-input-border:theme(colors.gray.a7)]',
 '[--cl-field-input-border-active:theme(colors.gray.a7)]',
 ],
 error: [
 '[--cl-field-input-border:theme(colors.danger.DEFAULT)]',
Expand Down

2 changes: 1 addition & 1 deletion
packages/ui/src/primitives/separator.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -8,7 +8,7 @@ export const Separator = React.forwardRef<HTMLParagraphElement, React.HTMLAttrib
 ref={forwardedRef}
 {...props}
 className={cx(
 'before:bg-gray-a6 after:bg-gray-a6 text-gray-a11 flex items-center gap-x-4 text-base before:h-px before:flex-1 after:h-px after:flex-1',
 'before:bg-gray-a4 after:bg-gray-a4 text-gray-a11 flex items-center gap-x-4 text-base before:h-px before:flex-1 after:h-px after:flex-1',
 className,
 )}
 >
Expand Down

4 changes: 2 additions & 2 deletions
packages/ui/src/tailwind.config.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -98,10 +98,10 @@ const config = {
 },
 },
 ringWidth: {
 DEFAULT: '0.125rem',
 DEFAULT: '0.1875rem',
 },
 ringColor: {
 DEFAULT: 'var(--cl-accent-a9)',
 DEFAULT: 'var(--cl-gray-a4)',
 },
 animation: {
 spin: 'cl-spin linear infinite',
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
refactor(ui): Colors#3874

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

joe-bell
merged 9 commits into

from

Aug 13, 2024
 Merged


refactor(ui): Colors
#3874
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


9 commits


Select commit
Hold shift + click to select a range
09a0119

wip


joe-bell Aug 1, 2024
5458e49

wip


joe-bell Aug 6, 2024
48b27a6

field, alert, hint


joe-bell Aug 7, 2024
3a6b6a6

wip


joe-bell Aug 7, 2024
f918206

fix secondary and connection buttons


joe-bell Aug 9, 2024
fefe4c9

add empty changeset


joe-bell Aug 12, 2024
1d2c296

change default focus styles, finish button


joe-bell Aug 12, 2024
78c43c2

input styling


joe-bell Aug 12, 2024
c1cc470

Merge branch 'main' into joe-bell/SDKI-500


joe-bell Aug 13, 2024

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 2 additions & 0 deletions
.changeset/good-peaches-dress.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
---
---

2 changes: 1 addition & 1 deletion
packages/ui/src/common/password-field.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -55,7 +55,7 @@ export function PasswordField({
 <button
 type='button'
 className={cx(
 'text-icon-sm text-gray-11 start-auto m-[0.1875rem] inline-flex aspect-square h-6 items-center justify-center rounded-sm p-0 outline-none disabled:cursor-not-allowed disabled:opacity-50',
 'text-icon-sm text-gray-10 start-auto m-[0.1875rem] inline-flex aspect-square h-6 items-center justify-center rounded-sm p-0 outline-none disabled:cursor-not-allowed disabled:opacity-50',
 'hover:enabled:text-gray-12 hover:enabled:bg-gray-3',
 'focus-visible:rounded-[calc(var(--cl-radius)*0.5)] focus-visible:ring',
 )}
Expand Down

31 changes: 16 additions & 15 deletions
packages/ui/src/common/phone-number-field.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -166,29 +166,30 @@ export const PhoneNumberField = React.forwardRef(function PhoneNumberField(
 <div
 ref={containerRef}
 className={cx(
 '[--phone-number-field-border-width:1px]',
 '[--phone-number-field-py:calc(theme(spacing[1.5])-var(--phone-number-field-border-width))]',
 '[--phone-number-field-px:calc(theme(spacing.3)-var(--phone-number-field-border-width))]',
 'border-[length:--phone-number-field-border-width] border-[--cl-phone-number-field-border] bg-clip-padding',
 // Note:
 // - To create the overlapping border/shadow effect"
 // - `ring` – "focus ring"
 // - `ring-offset` - border
 '[--phone-number-field-py:theme(spacing[1.5])]',
 '[--phone-number-field-px:theme(spacing.3)]',
 'ring ring-transparent ring-offset-1 ring-offset-[--cl-phone-number-field-border]',
 'text-gray-12 relative flex min-w-0 rounded-md bg-white text-base outline-none',
 'shadow-[0px_1px_1px_0px_theme(colors.gray.a3)]',
 'has-[[data-field-input][disabled]]:cursor-not-allowed has-[[data-field-input][disabled]]:opacity-50',
 // hover
 'hover:has-[[data-field-input]:enabled]:border-[--cl-phone-number-field-border-active]',
 'hover:has-[[data-field-input]:enabled]:ring-offset-[--cl-phone-number-field-border-active]',
 // focus
 'has-[[data-field-input]:focus-visible]:border-[--cl-phone-number-field-border-active]',
 'has-[[data-field-input]:focus-visible]:ring-[0.1875rem]',
 'has-[[data-field-input]:focus-visible]:ring-[--cl-phone-number-field-ring]',
 'has-[[data-field-input]:focus-visible]:ring-offset-[--cl-phone-number-field-border-active]',
 'has-[[data-field-input]:focus-visible]:ring-[--cl-phone-number-field-ring,theme(ringColor.DEFAULT)]',
 // intent
 {
 idle: [
 '[--cl-phone-number-field-border:theme(colors.gray.a6)]',
 '[--cl-phone-number-field-border-active:theme(colors.gray.a8)]',
 '[--cl-phone-number-field-ring:theme(colors.gray.a3)]',
 '[--cl-phone-number-field-border:theme(colors.gray.a4)]',
 '[--cl-phone-number-field-border-active:theme(colors.gray.a7)]',
 ],
 info: [
 '[--cl-phone-number-field-border:theme(colors.gray.a8)]',
 '[--cl-phone-number-field-border-active:theme(colors.gray.a8)]',
 '[--cl-phone-number-field-ring:theme(colors.gray.a3)]',
 '[--cl-phone-number-field-border:theme(colors.gray.a7)]',
 '[--cl-phone-number-field-border-active:theme(colors.gray.a7)]',
 ],
 error: [
 '[--cl-phone-number-field-border:theme(colors.danger.DEFAULT)]',
Expand All@@ -215,7 +216,7 @@ export const PhoneNumberField = React.forwardRef(function PhoneNumberField(
 className='hover:enabled:bg-gray-2 focus-visible:bg-gray-2 flex items-center gap-x-1 rounded-l-md px-2 py-1 text-base outline-none'
 >
 <span className='min-w-6 uppercase'>{selectedCountry.iso}</span>
 <Icon.ChevronUpDown className='text-gray-11 size-4' />
 <Icon.ChevronUpDown className='text-gray-9 size-4' />
 </Button>
 <Popover
 isOpen={isOpen}
Expand Down

6 changes: 3 additions & 3 deletions
packages/ui/src/primitives/alert.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,14 +16,14 @@ export const Alert = React.forwardRef<
 className={cx(
 'leading-small rounded-md border px-4 py-3 text-base',
 {
 warning: 'text-warning bg-warning/10 border-warning/20',
 error: 'text-danger bg-danger/10 border-danger/20',
 warning: 'text-warning bg-warning/[0.06] border-warning/[0.12]',
 error: 'text-danger bg-danger/[0.06] border-danger/[0.12]',
 }[intent],
 className,
 )}
 >
 <div className='flex gap-x-2'>
 <span className='mt-0.5 shrink-0 *:size-4'>
 <span className='mt-px shrink-0 *:size-4'>
 {
 {
 error: <Icon.ExclamationOctagonSm />,
Expand Down

28 changes: 16 additions & 12 deletions
packages/ui/src/primitives/button.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,34 +4,38 @@ import * as React from 'react';

import { Spinner } from './spinner';

// Note:
// - To create the overlapping border/shadow effect"
// - `ring` – "focus ring"
// - `ring-offset` - border
const button = cva({
 base: [
 '[--button-border-width:1px]',
 '[--button-icon-size:calc(var(--cl-font-size)*1.24)]', // 16px
 'appearance-none relative isolate select-none',
 'text-base font-medium',
 'px-[calc(theme(spacing.3)-var(--button-border-width))] py-[calc(theme(spacing[1.5])-var(--button-border-width))]',
 'px-3 py-1.5',
 'min-h-[1.875rem]',
 'inline-flex w-full items-center justify-center gap-3',
 'border-[length:--button-border-width] rounded-md bg-clip-padding',
 'outline-none focus-visible:ring',
 'ring ring-offset-1 rounded-md',
 '[&:not(:focus-visible)]:ring-transparent',
 'outline-none',
 '*:min-w-0',
 ],
 variants: {
 intent: {
 primary: [
 '[--button-icon-color:currentColor]',
 '[--button-icon-opacity:0.6]',
 'text-accent-contrast bg-accent-9 border-accent-9 shadow-[0_1px_1px_0_theme(colors.white/.07)_inset]',
 'before:absolute before:inset-0 before:rounded-[calc(theme(borderRadius.md)-1px)] before:shadow-[0_1px_1px_0_theme(colors.white/.07)_inset]',
 'after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:rounded-[calc(theme(borderRadius.md)-1px)] after:bg-gradient-to-b after:from-white/10 after:to-transparent',
 'focus-visible:ring-accent-a7',
 'text-accent-contrast bg-accent-9 ring-offset-accent-9',
 'shadow-[0px_1px_1px_0px_theme(colors.white/.07)_inset,0px_2px_3px_0px_theme(colors.gray.a7),0px_1px_1px_0px_theme(colors.gray.a9)]',
 'before:absolute before:inset-0 before:rounded-[inherit] before:shadow-[0_1px_1px_0_theme(colors.white/.07)_inset]',
 'after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:rounded-[inherit] after:bg-gradient-to-b after:from-white/10 after:to-transparent',
 ],
 secondary: [
 '[--button-icon-color:theme(colors.gray.12)]',
 '[--button-icon-opacity:1]',
 'text-gray-12 border-gray-a6 bg-gray-surface shadow-sm shadow-gray-a3',
 'focus-visible:border-gray-a8 focus-visible:ring-accent-a3',
 'text-gray-12 bg-gray-surface ring-offset-gray-a4',
 'shadow-[0px_1px_0px_0px_theme(colors.gray.a2),0px_2px_3px_-1px_theme(colors.gray.a3)]',
 ],
 // Note:
 // This currently looks the same as `secondary`, but we've intentfully
Expand All@@ -40,8 +44,8 @@ const button = cva({
 connection: [
 '[--button-icon-color:theme(colors.gray.12)]',
 '[--button-icon-opacity:1]',
 'text-gray-12 border-gray-a6 bg-gray-surface shadow-sm shadow-gray-a3',
 'focus-visible:border-gray-a8 focus-visible:ring-accent-a3',
 'text-gray-12 bg-gray-surface ring-offset-gray-a4',
 'shadow-[0px_1px_0px_0px_theme(colors.gray.a2),0px_2px_3px_-1px_theme(colors.gray.a3)]',
 ],
 },
 busy: {
Expand Down

10 changes: 6 additions & 4 deletions
packages/ui/src/primitives/card.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,7 +15,8 @@ export const Root = React.forwardRef(function CardRoot(
 className={cx(
 '[--card-body-padding:theme(spacing.10)]',
 '[--card-content-rounded-b:theme(borderRadius.lg)]',
 'bg-gray-2 border-gray-a6 shadow-gray-a5 relative w-96 overflow-hidden rounded-xl border bg-clip-padding shadow-xl',
 'bg-gray-2 ring-gray-a3 relative w-96 overflow-hidden rounded-xl ring-1',
 'shadow-[0px_5px_15px_0px_theme(colors.gray.a4),0px_15px_35px_-5px_theme(colors.gray.a4)]',
 className,
 )}
 >
Expand All@@ -34,7 +35,8 @@ export const Content = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTM
 data-card-content=''
 {...props}
 className={cx(
 'bg-gray-surface shadow-gray-a3 border-gray-a6 relative -m-px flex flex-col gap-8 rounded-[inherit] rounded-b-[--card-content-rounded-b] border p-[--card-body-padding] shadow-sm',
 'bg-gray-surface relative flex flex-col gap-8 rounded-b-[--card-content-rounded-b] rounded-t-none p-[--card-body-padding]',
 'ring-gray-a3 shadow-[0px_0px_2px_0px_theme(colors.gray.a4),0px_1px_2px_0px_theme(colors.gray.a3)] ring-1',
 className,
 )}
 >
Expand DownExpand Up@@ -177,7 +179,7 @@ export const Banner = React.forwardRef(function CardBanner(
 'pointer-events-none absolute inset-0 w-full',
 // manually nudge the radius by `1px` for a snug fit
 'rounded-b-[calc(var(--card-content-rounded-b)-1px)]',
 '[background-image:repeating-linear-gradient(-45deg,theme(colors.orange.50),theme(colors.orange.50)_6px,theme(colors.orange.100/0.75)_6px,theme(colors.orange.100/0.75)_12px)]',
 '[background-image:repeating-linear-gradient(-45deg,theme(colors.orange.100/0.4),theme(colors.orange.100/0.4)_6px,theme(colors.orange.100/0.75)_6px,theme(colors.orange.100/0.75)_12px)]',
 '[mask-image:linear-gradient(to_top,black,transparent_128px)]',
 )}
 />
Expand DownExpand Up@@ -263,7 +265,7 @@ export const FooterAction = React.forwardRef<HTMLDivElement, React.HTMLAttribute
 ref={forwardedRef}
 data-card-footer-action=''
 {...props}
 className={cx('border-gray-a6 border-b px-6 py-4 last-of-type:border-b-transparent', className)}
 className={cx('border-gray-a3 border-b px-6 py-4 last-of-type:border-b-transparent', className)}
 >
 {children}
 </div>
Expand Down

32 changes: 17 additions & 15 deletions
packages/ui/src/primitives/field.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,10 +16,9 @@ export const Root = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
 ref={forwardedRef}
 {...props}
 className={cx(
 '[--field-input-border-width:1px]',
 '[--field-input-height:1.875rem]',
 '[--field-input-px:calc(theme(spacing.3)-var(--field-input-border-width))]',
 '[--field-input-py:calc(theme(spacing[1.5])-var(--field-input-border-width))]',
 '[--field-input-px:theme(spacing.3)]',
 '[--field-input-py:theme(spacing[1.5])]',
 '[--field-input-group-end-size:--field-input-height]',
 'has-[[data-field-checkbox]]:[--cl-field-label-cursor:pointer]',
 'has-[[data-field-input][disabled]]:[--cl-field-label-opacity:0.5]',
Expand DownExpand Up@@ -87,7 +86,7 @@ export const Hint = React.forwardRef(function FieldHint(
 data-field-hint=''
 ref={forwardedRef}
 {...props}
 className={cx('text-gray-10 text-sm font-medium', className)}
 className={cx('text-gray-9 text-sm font-medium', className)}
 >
 {children}
 </LabelEnd>
Expand DownExpand Up@@ -141,6 +140,10 @@ export const InputGroupEnd = React.forwardRef(function FieldInputGroupEnd(
 );
});

// Note:
// - To create the overlapping border/shadow effect"
// - `ring` – "focus ring"
// - `ring-offset` - border
export const Input = React.forwardRef(function FieldInput(
 {
 asChild,
Expand DownExpand Up@@ -169,8 +172,8 @@ export const Input = React.forwardRef(function FieldInput(
 // If an `InputGroup` exists, use the `pe` value, or fallback to the
 // standard input `px` value
 'pe-[var(--field-input-group-pe,var(--field-input-px))]',
 'border-[length:--field-input-border-width] bg-clip-padding',
 'text-gray-12 relative flex min-w-0 rounded-md bg-white text-base outline-none',
 'text-gray-12 relative flex min-w-0 items-center rounded-md bg-white text-base outline-none ring ring-offset-1',
 'shadow-[0px_1px_1px_0px_theme(colors.gray.a3)]',
 'disabled:cursor-not-allowed disabled:opacity-50',
 // variant
 {
Expand All@@ -180,21 +183,20 @@ export const Input = React.forwardRef(function FieldInput(
 // state
 {
 native:
 'border-[--cl-field-input-border] focus-visible:border-[--cl-field-input-border-active] focus-visible:ring-[0.1875rem] focus-visible:ring-[--cl-field-input-ring] hover:enabled:border-[--cl-field-input-border-active]',
 hover: 'border-[--cl-field-input-border-active]',
 'focus-visible': 'border-[--cl-field-input-border-active] ring-[0.1875rem] ring-[--cl-field-input-ring]',
 'ring-offset-[--cl-field-input-border] focus-visible:ring focus-visible:ring-[--cl-field-input-ring,theme(ringColor.DEFAULT)] focus-visible:ring-offset-[--cl-field-input-border-active] hover:enabled:ring-offset-[--cl-field-input-border-active] [&:not(:focus-visible)]:ring-transparent',
 hover: 'ring-transparent ring-offset-[--cl-field-input-border-active]',
 'focus-visible':
 'ring-[--cl-field-input-ring,theme(ringColor.DEFAULT)] ring-offset-[--cl-field-input-border-active]',
 }[state],
 // intent
 {
 idle: [
 '[--cl-field-input-border:theme(colors.gray.a6)]',
 '[--cl-field-input-border-active:theme(colors.gray.a8)]',
 '[--cl-field-input-ring:theme(colors.gray.a3)]',
 '[--cl-field-input-border:theme(colors.gray.a4)]',
 '[--cl-field-input-border-active:theme(colors.gray.a7)]',
 ],
 info: [
 '[--cl-field-input-border:theme(colors.gray.a8)]',
 '[--cl-field-input-border-active:theme(colors.gray.a8)]',
 '[--cl-field-input-ring:theme(colors.gray.a3)]',
 '[--cl-field-input-border:theme(colors.gray.a7)]',
 '[--cl-field-input-border-active:theme(colors.gray.a7)]',
 ],
 error: [
 '[--cl-field-input-border:theme(colors.danger.DEFAULT)]',
Expand Down

2 changes: 1 addition & 1 deletion
packages/ui/src/primitives/separator.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -8,7 +8,7 @@ export const Separator = React.forwardRef<HTMLParagraphElement, React.HTMLAttrib
 ref={forwardedRef}
 {...props}
 className={cx(
 'before:bg-gray-a6 after:bg-gray-a6 text-gray-a11 flex items-center gap-x-4 text-base before:h-px before:flex-1 after:h-px after:flex-1',
 'before:bg-gray-a4 after:bg-gray-a4 text-gray-a11 flex items-center gap-x-4 text-base before:h-px before:flex-1 after:h-px after:flex-1',
 className,
 )}
 >
Expand Down

4 changes: 2 additions & 2 deletions
packages/ui/src/tailwind.config.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -98,10 +98,10 @@ const config = {
 },
 },
 ringWidth: {
 DEFAULT: '0.125rem',
 DEFAULT: '0.1875rem',
 },
 ringColor: {
 DEFAULT: 'var(--cl-accent-a9)',
 DEFAULT: 'var(--cl-gray-a4)',
 },
 animation: {
 spin: 'cl-spin linear infinite',
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
refactor(ui): Colors#3874

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

joe-bell
merged 9 commits into

from

Aug 13, 2024
 Merged


refactor(ui): Colors
#3874
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


9 commits


Select commit
Hold shift + click to select a range
09a0119

wip


joe-bell Aug 1, 2024
5458e49

wip


joe-bell Aug 6, 2024
48b27a6

field, alert, hint


joe-bell Aug 7, 2024
3a6b6a6

wip


joe-bell Aug 7, 2024
f918206

fix secondary and connection buttons


joe-bell Aug 9, 2024
fefe4c9

add empty changeset


joe-bell Aug 12, 2024
1d2c296

change default focus styles, finish button


joe-bell Aug 12, 2024
78c43c2

input styling


joe-bell Aug 12, 2024
c1cc470

Merge branch 'main' into joe-bell/SDKI-500


joe-bell Aug 13, 2024

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 2 additions & 0 deletions
.changeset/good-peaches-dress.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
---
---

2 changes: 1 addition & 1 deletion
packages/ui/src/common/password-field.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -55,7 +55,7 @@ export function PasswordField({
 <button
 type='button'
 className={cx(
 'text-icon-sm text-gray-11 start-auto m-[0.1875rem] inline-flex aspect-square h-6 items-center justify-center rounded-sm p-0 outline-none disabled:cursor-not-allowed disabled:opacity-50',
 'text-icon-sm text-gray-10 start-auto m-[0.1875rem] inline-flex aspect-square h-6 items-center justify-center rounded-sm p-0 outline-none disabled:cursor-not-allowed disabled:opacity-50',
 'hover:enabled:text-gray-12 hover:enabled:bg-gray-3',
 'focus-visible:rounded-[calc(var(--cl-radius)*0.5)] focus-visible:ring',
 )}
Expand Down

31 changes: 16 additions & 15 deletions
packages/ui/src/common/phone-number-field.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -166,29 +166,30 @@ export const PhoneNumberField = React.forwardRef(function PhoneNumberField(
 <div
 ref={containerRef}
 className={cx(
 '[--phone-number-field-border-width:1px]',
 '[--phone-number-field-py:calc(theme(spacing[1.5])-var(--phone-number-field-border-width))]',
 '[--phone-number-field-px:calc(theme(spacing.3)-var(--phone-number-field-border-width))]',
 'border-[length:--phone-number-field-border-width] border-[--cl-phone-number-field-border] bg-clip-padding',
 // Note:
 // - To create the overlapping border/shadow effect"
 // - `ring` – "focus ring"
 // - `ring-offset` - border
 '[--phone-number-field-py:theme(spacing[1.5])]',
 '[--phone-number-field-px:theme(spacing.3)]',
 'ring ring-transparent ring-offset-1 ring-offset-[--cl-phone-number-field-border]',
 'text-gray-12 relative flex min-w-0 rounded-md bg-white text-base outline-none',
 'shadow-[0px_1px_1px_0px_theme(colors.gray.a3)]',
 'has-[[data-field-input][disabled]]:cursor-not-allowed has-[[data-field-input][disabled]]:opacity-50',
 // hover
 'hover:has-[[data-field-input]:enabled]:border-[--cl-phone-number-field-border-active]',
 'hover:has-[[data-field-input]:enabled]:ring-offset-[--cl-phone-number-field-border-active]',
 // focus
 'has-[[data-field-input]:focus-visible]:border-[--cl-phone-number-field-border-active]',
 'has-[[data-field-input]:focus-visible]:ring-[0.1875rem]',
 'has-[[data-field-input]:focus-visible]:ring-[--cl-phone-number-field-ring]',
 'has-[[data-field-input]:focus-visible]:ring-offset-[--cl-phone-number-field-border-active]',
 'has-[[data-field-input]:focus-visible]:ring-[--cl-phone-number-field-ring,theme(ringColor.DEFAULT)]',
 // intent
 {
 idle: [
 '[--cl-phone-number-field-border:theme(colors.gray.a6)]',
 '[--cl-phone-number-field-border-active:theme(colors.gray.a8)]',
 '[--cl-phone-number-field-ring:theme(colors.gray.a3)]',
 '[--cl-phone-number-field-border:theme(colors.gray.a4)]',
 '[--cl-phone-number-field-border-active:theme(colors.gray.a7)]',
 ],
 info: [
 '[--cl-phone-number-field-border:theme(colors.gray.a8)]',
 '[--cl-phone-number-field-border-active:theme(colors.gray.a8)]',
 '[--cl-phone-number-field-ring:theme(colors.gray.a3)]',
 '[--cl-phone-number-field-border:theme(colors.gray.a7)]',
 '[--cl-phone-number-field-border-active:theme(colors.gray.a7)]',
 ],
 error: [
 '[--cl-phone-number-field-border:theme(colors.danger.DEFAULT)]',
Expand All@@ -215,7 +216,7 @@ export const PhoneNumberField = React.forwardRef(function PhoneNumberField(
 className='hover:enabled:bg-gray-2 focus-visible:bg-gray-2 flex items-center gap-x-1 rounded-l-md px-2 py-1 text-base outline-none'
 >
 <span className='min-w-6 uppercase'>{selectedCountry.iso}</span>
 <Icon.ChevronUpDown className='text-gray-11 size-4' />
 <Icon.ChevronUpDown className='text-gray-9 size-4' />
 </Button>
 <Popover
 isOpen={isOpen}
Expand Down

6 changes: 3 additions & 3 deletions
packages/ui/src/primitives/alert.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,14 +16,14 @@ export const Alert = React.forwardRef<
 className={cx(
 'leading-small rounded-md border px-4 py-3 text-base',
 {
 warning: 'text-warning bg-warning/10 border-warning/20',
 error: 'text-danger bg-danger/10 border-danger/20',
 warning: 'text-warning bg-warning/[0.06] border-warning/[0.12]',
 error: 'text-danger bg-danger/[0.06] border-danger/[0.12]',
 }[intent],
 className,
 )}
 >
 <div className='flex gap-x-2'>
 <span className='mt-0.5 shrink-0 *:size-4'>
 <span className='mt-px shrink-0 *:size-4'>
 {
 {
 error: <Icon.ExclamationOctagonSm />,
Expand Down

28 changes: 16 additions & 12 deletions
packages/ui/src/primitives/button.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,34 +4,38 @@ import * as React from 'react';

import { Spinner } from './spinner';

// Note:
// - To create the overlapping border/shadow effect"
// - `ring` – "focus ring"
// - `ring-offset` - border
const button = cva({
 base: [
 '[--button-border-width:1px]',
 '[--button-icon-size:calc(var(--cl-font-size)*1.24)]', // 16px
 'appearance-none relative isolate select-none',
 'text-base font-medium',
 'px-[calc(theme(spacing.3)-var(--button-border-width))] py-[calc(theme(spacing[1.5])-var(--button-border-width))]',
 'px-3 py-1.5',
 'min-h-[1.875rem]',
 'inline-flex w-full items-center justify-center gap-3',
 'border-[length:--button-border-width] rounded-md bg-clip-padding',
 'outline-none focus-visible:ring',
 'ring ring-offset-1 rounded-md',
 '[&:not(:focus-visible)]:ring-transparent',
 'outline-none',
 '*:min-w-0',
 ],
 variants: {
 intent: {
 primary: [
 '[--button-icon-color:currentColor]',
 '[--button-icon-opacity:0.6]',
 'text-accent-contrast bg-accent-9 border-accent-9 shadow-[0_1px_1px_0_theme(colors.white/.07)_inset]',
 'before:absolute before:inset-0 before:rounded-[calc(theme(borderRadius.md)-1px)] before:shadow-[0_1px_1px_0_theme(colors.white/.07)_inset]',
 'after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:rounded-[calc(theme(borderRadius.md)-1px)] after:bg-gradient-to-b after:from-white/10 after:to-transparent',
 'focus-visible:ring-accent-a7',
 'text-accent-contrast bg-accent-9 ring-offset-accent-9',
 'shadow-[0px_1px_1px_0px_theme(colors.white/.07)_inset,0px_2px_3px_0px_theme(colors.gray.a7),0px_1px_1px_0px_theme(colors.gray.a9)]',
 'before:absolute before:inset-0 before:rounded-[inherit] before:shadow-[0_1px_1px_0_theme(colors.white/.07)_inset]',
 'after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:rounded-[inherit] after:bg-gradient-to-b after:from-white/10 after:to-transparent',
 ],
 secondary: [
 '[--button-icon-color:theme(colors.gray.12)]',
 '[--button-icon-opacity:1]',
 'text-gray-12 border-gray-a6 bg-gray-surface shadow-sm shadow-gray-a3',
 'focus-visible:border-gray-a8 focus-visible:ring-accent-a3',
 'text-gray-12 bg-gray-surface ring-offset-gray-a4',
 'shadow-[0px_1px_0px_0px_theme(colors.gray.a2),0px_2px_3px_-1px_theme(colors.gray.a3)]',
 ],
 // Note:
 // This currently looks the same as `secondary`, but we've intentfully
Expand All@@ -40,8 +44,8 @@ const button = cva({
 connection: [
 '[--button-icon-color:theme(colors.gray.12)]',
 '[--button-icon-opacity:1]',
 'text-gray-12 border-gray-a6 bg-gray-surface shadow-sm shadow-gray-a3',
 'focus-visible:border-gray-a8 focus-visible:ring-accent-a3',
 'text-gray-12 bg-gray-surface ring-offset-gray-a4',
 'shadow-[0px_1px_0px_0px_theme(colors.gray.a2),0px_2px_3px_-1px_theme(colors.gray.a3)]',
 ],
 },
 busy: {
Expand Down

10 changes: 6 additions & 4 deletions
packages/ui/src/primitives/card.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,7 +15,8 @@ export const Root = React.forwardRef(function CardRoot(
 className={cx(
 '[--card-body-padding:theme(spacing.10)]',
 '[--card-content-rounded-b:theme(borderRadius.lg)]',
 'bg-gray-2 border-gray-a6 shadow-gray-a5 relative w-96 overflow-hidden rounded-xl border bg-clip-padding shadow-xl',
 'bg-gray-2 ring-gray-a3 relative w-96 overflow-hidden rounded-xl ring-1',
 'shadow-[0px_5px_15px_0px_theme(colors.gray.a4),0px_15px_35px_-5px_theme(colors.gray.a4)]',
 className,
 )}
 >
Expand All@@ -34,7 +35,8 @@ export const Content = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTM
 data-card-content=''
 {...props}
 className={cx(
 'bg-gray-surface shadow-gray-a3 border-gray-a6 relative -m-px flex flex-col gap-8 rounded-[inherit] rounded-b-[--card-content-rounded-b] border p-[--card-body-padding] shadow-sm',
 'bg-gray-surface relative flex flex-col gap-8 rounded-b-[--card-content-rounded-b] rounded-t-none p-[--card-body-padding]',
 'ring-gray-a3 shadow-[0px_0px_2px_0px_theme(colors.gray.a4),0px_1px_2px_0px_theme(colors.gray.a3)] ring-1',
 className,
 )}
 >
Expand DownExpand Up@@ -177,7 +179,7 @@ export const Banner = React.forwardRef(function CardBanner(
 'pointer-events-none absolute inset-0 w-full',
 // manually nudge the radius by `1px` for a snug fit
 'rounded-b-[calc(var(--card-content-rounded-b)-1px)]',
 '[background-image:repeating-linear-gradient(-45deg,theme(colors.orange.50),theme(colors.orange.50)_6px,theme(colors.orange.100/0.75)_6px,theme(colors.orange.100/0.75)_12px)]',
 '[background-image:repeating-linear-gradient(-45deg,theme(colors.orange.100/0.4),theme(colors.orange.100/0.4)_6px,theme(colors.orange.100/0.75)_6px,theme(colors.orange.100/0.75)_12px)]',
 '[mask-image:linear-gradient(to_top,black,transparent_128px)]',
 )}
 />
Expand DownExpand Up@@ -263,7 +265,7 @@ export const FooterAction = React.forwardRef<HTMLDivElement, React.HTMLAttribute
 ref={forwardedRef}
 data-card-footer-action=''
 {...props}
 className={cx('border-gray-a6 border-b px-6 py-4 last-of-type:border-b-transparent', className)}
 className={cx('border-gray-a3 border-b px-6 py-4 last-of-type:border-b-transparent', className)}
 >
 {children}
 </div>
Expand Down

32 changes: 17 additions & 15 deletions
packages/ui/src/primitives/field.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,10 +16,9 @@ export const Root = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
 ref={forwardedRef}
 {...props}
 className={cx(
 '[--field-input-border-width:1px]',
 '[--field-input-height:1.875rem]',
 '[--field-input-px:calc(theme(spacing.3)-var(--field-input-border-width))]',
 '[--field-input-py:calc(theme(spacing[1.5])-var(--field-input-border-width))]',
 '[--field-input-px:theme(spacing.3)]',
 '[--field-input-py:theme(spacing[1.5])]',
 '[--field-input-group-end-size:--field-input-height]',
 'has-[[data-field-checkbox]]:[--cl-field-label-cursor:pointer]',
 'has-[[data-field-input][disabled]]:[--cl-field-label-opacity:0.5]',
Expand DownExpand Up@@ -87,7 +86,7 @@ export const Hint = React.forwardRef(function FieldHint(
 data-field-hint=''
 ref={forwardedRef}
 {...props}
 className={cx('text-gray-10 text-sm font-medium', className)}
 className={cx('text-gray-9 text-sm font-medium', className)}
 >
 {children}
 </LabelEnd>
Expand DownExpand Up@@ -141,6 +140,10 @@ export const InputGroupEnd = React.forwardRef(function FieldInputGroupEnd(
 );
});

// Note:
// - To create the overlapping border/shadow effect"
// - `ring` – "focus ring"
// - `ring-offset` - border
export const Input = React.forwardRef(function FieldInput(
 {
 asChild,
Expand DownExpand Up@@ -169,8 +172,8 @@ export const Input = React.forwardRef(function FieldInput(
 // If an `InputGroup` exists, use the `pe` value, or fallback to the
 // standard input `px` value
 'pe-[var(--field-input-group-pe,var(--field-input-px))]',
 'border-[length:--field-input-border-width] bg-clip-padding',
 'text-gray-12 relative flex min-w-0 rounded-md bg-white text-base outline-none',
 'text-gray-12 relative flex min-w-0 items-center rounded-md bg-white text-base outline-none ring ring-offset-1',
 'shadow-[0px_1px_1px_0px_theme(colors.gray.a3)]',
 'disabled:cursor-not-allowed disabled:opacity-50',
 // variant
 {
Expand All@@ -180,21 +183,20 @@ export const Input = React.forwardRef(function FieldInput(
 // state
 {
 native:
 'border-[--cl-field-input-border] focus-visible:border-[--cl-field-input-border-active] focus-visible:ring-[0.1875rem] focus-visible:ring-[--cl-field-input-ring] hover:enabled:border-[--cl-field-input-border-active]',
 hover: 'border-[--cl-field-input-border-active]',
 'focus-visible': 'border-[--cl-field-input-border-active] ring-[0.1875rem] ring-[--cl-field-input-ring]',
 'ring-offset-[--cl-field-input-border] focus-visible:ring focus-visible:ring-[--cl-field-input-ring,theme(ringColor.DEFAULT)] focus-visible:ring-offset-[--cl-field-input-border-active] hover:enabled:ring-offset-[--cl-field-input-border-active] [&:not(:focus-visible)]:ring-transparent',
 hover: 'ring-transparent ring-offset-[--cl-field-input-border-active]',
 'focus-visible':
 'ring-[--cl-field-input-ring,theme(ringColor.DEFAULT)] ring-offset-[--cl-field-input-border-active]',
 }[state],
 // intent
 {
 idle: [
 '[--cl-field-input-border:theme(colors.gray.a6)]',
 '[--cl-field-input-border-active:theme(colors.gray.a8)]',
 '[--cl-field-input-ring:theme(colors.gray.a3)]',
 '[--cl-field-input-border:theme(colors.gray.a4)]',
 '[--cl-field-input-border-active:theme(colors.gray.a7)]',
 ],
 info: [
 '[--cl-field-input-border:theme(colors.gray.a8)]',
 '[--cl-field-input-border-active:theme(colors.gray.a8)]',
 '[--cl-field-input-ring:theme(colors.gray.a3)]',
 '[--cl-field-input-border:theme(colors.gray.a7)]',
 '[--cl-field-input-border-active:theme(colors.gray.a7)]',
 ],
 error: [
 '[--cl-field-input-border:theme(colors.danger.DEFAULT)]',
Expand Down

2 changes: 1 addition & 1 deletion
packages/ui/src/primitives/separator.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -8,7 +8,7 @@ export const Separator = React.forwardRef<HTMLParagraphElement, React.HTMLAttrib
 ref={forwardedRef}
 {...props}
 className={cx(
 'before:bg-gray-a6 after:bg-gray-a6 text-gray-a11 flex items-center gap-x-4 text-base before:h-px before:flex-1 after:h-px after:flex-1',
 'before:bg-gray-a4 after:bg-gray-a4 text-gray-a11 flex items-center gap-x-4 text-base before:h-px before:flex-1 after:h-px after:flex-1',
 className,
 )}
 >
Expand Down

4 changes: 2 additions & 2 deletions
packages/ui/src/tailwind.config.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -98,10 +98,10 @@ const config = {
 },
 },
 ringWidth: {
 DEFAULT: '0.125rem',
 DEFAULT: '0.1875rem',
 },
 ringColor: {
 DEFAULT: 'var(--cl-accent-a9)',
 DEFAULT: 'var(--cl-gray-a4)',
 },
 animation: {
 spin: 'cl-spin linear infinite',
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
refactor(ui): Colors#3874

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

joe-bell
merged 9 commits into

from

Aug 13, 2024
 Merged


refactor(ui): Colors
#3874
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


9 commits


Select commit
Hold shift + click to select a range
09a0119

wip


joe-bell Aug 1, 2024
5458e49

wip


joe-bell Aug 6, 2024
48b27a6

field, alert, hint


joe-bell Aug 7, 2024
3a6b6a6

wip


joe-bell Aug 7, 2024
f918206

fix secondary and connection buttons


joe-bell Aug 9, 2024
fefe4c9

add empty changeset


joe-bell Aug 12, 2024
1d2c296

change default focus styles, finish button


joe-bell Aug 12, 2024
78c43c2

input styling


joe-bell Aug 12, 2024
c1cc470

Merge branch 'main' into joe-bell/SDKI-500


joe-bell Aug 13, 2024

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 2 additions & 0 deletions
.changeset/good-peaches-dress.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
---
---

2 changes: 1 addition & 1 deletion
packages/ui/src/common/password-field.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -55,7 +55,7 @@ export function PasswordField({
 <button
 type='button'
 className={cx(
 'text-icon-sm text-gray-11 start-auto m-[0.1875rem] inline-flex aspect-square h-6 items-center justify-center rounded-sm p-0 outline-none disabled:cursor-not-allowed disabled:opacity-50',
 'text-icon-sm text-gray-10 start-auto m-[0.1875rem] inline-flex aspect-square h-6 items-center justify-center rounded-sm p-0 outline-none disabled:cursor-not-allowed disabled:opacity-50',
 'hover:enabled:text-gray-12 hover:enabled:bg-gray-3',
 'focus-visible:rounded-[calc(var(--cl-radius)*0.5)] focus-visible:ring',
 )}
Expand Down

31 changes: 16 additions & 15 deletions
packages/ui/src/common/phone-number-field.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -166,29 +166,30 @@ export const PhoneNumberField = React.forwardRef(function PhoneNumberField(
 <div
 ref={containerRef}
 className={cx(
 '[--phone-number-field-border-width:1px]',
 '[--phone-number-field-py:calc(theme(spacing[1.5])-var(--phone-number-field-border-width))]',
 '[--phone-number-field-px:calc(theme(spacing.3)-var(--phone-number-field-border-width))]',
 'border-[length:--phone-number-field-border-width] border-[--cl-phone-number-field-border] bg-clip-padding',
 // Note:
 // - To create the overlapping border/shadow effect"
 // - `ring` – "focus ring"
 // - `ring-offset` - border
 '[--phone-number-field-py:theme(spacing[1.5])]',
 '[--phone-number-field-px:theme(spacing.3)]',
 'ring ring-transparent ring-offset-1 ring-offset-[--cl-phone-number-field-border]',
 'text-gray-12 relative flex min-w-0 rounded-md bg-white text-base outline-none',
 'shadow-[0px_1px_1px_0px_theme(colors.gray.a3)]',
 'has-[[data-field-input][disabled]]:cursor-not-allowed has-[[data-field-input][disabled]]:opacity-50',
 // hover
 'hover:has-[[data-field-input]:enabled]:border-[--cl-phone-number-field-border-active]',
 'hover:has-[[data-field-input]:enabled]:ring-offset-[--cl-phone-number-field-border-active]',
 // focus
 'has-[[data-field-input]:focus-visible]:border-[--cl-phone-number-field-border-active]',
 'has-[[data-field-input]:focus-visible]:ring-[0.1875rem]',
 'has-[[data-field-input]:focus-visible]:ring-[--cl-phone-number-field-ring]',
 'has-[[data-field-input]:focus-visible]:ring-offset-[--cl-phone-number-field-border-active]',
 'has-[[data-field-input]:focus-visible]:ring-[--cl-phone-number-field-ring,theme(ringColor.DEFAULT)]',
 // intent
 {
 idle: [
 '[--cl-phone-number-field-border:theme(colors.gray.a6)]',
 '[--cl-phone-number-field-border-active:theme(colors.gray.a8)]',
 '[--cl-phone-number-field-ring:theme(colors.gray.a3)]',
 '[--cl-phone-number-field-border:theme(colors.gray.a4)]',
 '[--cl-phone-number-field-border-active:theme(colors.gray.a7)]',
 ],
 info: [
 '[--cl-phone-number-field-border:theme(colors.gray.a8)]',
 '[--cl-phone-number-field-border-active:theme(colors.gray.a8)]',
 '[--cl-phone-number-field-ring:theme(colors.gray.a3)]',
 '[--cl-phone-number-field-border:theme(colors.gray.a7)]',
 '[--cl-phone-number-field-border-active:theme(colors.gray.a7)]',
 ],
 error: [
 '[--cl-phone-number-field-border:theme(colors.danger.DEFAULT)]',
Expand All@@ -215,7 +216,7 @@ export const PhoneNumberField = React.forwardRef(function PhoneNumberField(
 className='hover:enabled:bg-gray-2 focus-visible:bg-gray-2 flex items-center gap-x-1 rounded-l-md px-2 py-1 text-base outline-none'
 >
 <span className='min-w-6 uppercase'>{selectedCountry.iso}</span>
 <Icon.ChevronUpDown className='text-gray-11 size-4' />
 <Icon.ChevronUpDown className='text-gray-9 size-4' />
 </Button>
 <Popover
 isOpen={isOpen}
Expand Down

6 changes: 3 additions & 3 deletions
packages/ui/src/primitives/alert.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,14 +16,14 @@ export const Alert = React.forwardRef<
 className={cx(
 'leading-small rounded-md border px-4 py-3 text-base',
 {
 warning: 'text-warning bg-warning/10 border-warning/20',
 error: 'text-danger bg-danger/10 border-danger/20',
 warning: 'text-warning bg-warning/[0.06] border-warning/[0.12]',
 error: 'text-danger bg-danger/[0.06] border-danger/[0.12]',
 }[intent],
 className,
 )}
 >
 <div className='flex gap-x-2'>
 <span className='mt-0.5 shrink-0 *:size-4'>
 <span className='mt-px shrink-0 *:size-4'>
 {
 {
 error: <Icon.ExclamationOctagonSm />,
Expand Down

28 changes: 16 additions & 12 deletions
packages/ui/src/primitives/button.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,34 +4,38 @@ import * as React from 'react';

import { Spinner } from './spinner';

// Note:
// - To create the overlapping border/shadow effect"
// - `ring` – "focus ring"
// - `ring-offset` - border
const button = cva({
 base: [
 '[--button-border-width:1px]',
 '[--button-icon-size:calc(var(--cl-font-size)*1.24)]', // 16px
 'appearance-none relative isolate select-none',
 'text-base font-medium',
 'px-[calc(theme(spacing.3)-var(--button-border-width))] py-[calc(theme(spacing[1.5])-var(--button-border-width))]',
 'px-3 py-1.5',
 'min-h-[1.875rem]',
 'inline-flex w-full items-center justify-center gap-3',
 'border-[length:--button-border-width] rounded-md bg-clip-padding',
 'outline-none focus-visible:ring',
 'ring ring-offset-1 rounded-md',
 '[&:not(:focus-visible)]:ring-transparent',
 'outline-none',
 '*:min-w-0',
 ],
 variants: {
 intent: {
 primary: [
 '[--button-icon-color:currentColor]',
 '[--button-icon-opacity:0.6]',
 'text-accent-contrast bg-accent-9 border-accent-9 shadow-[0_1px_1px_0_theme(colors.white/.07)_inset]',
 'before:absolute before:inset-0 before:rounded-[calc(theme(borderRadius.md)-1px)] before:shadow-[0_1px_1px_0_theme(colors.white/.07)_inset]',
 'after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:rounded-[calc(theme(borderRadius.md)-1px)] after:bg-gradient-to-b after:from-white/10 after:to-transparent',
 'focus-visible:ring-accent-a7',
 'text-accent-contrast bg-accent-9 ring-offset-accent-9',
 'shadow-[0px_1px_1px_0px_theme(colors.white/.07)_inset,0px_2px_3px_0px_theme(colors.gray.a7),0px_1px_1px_0px_theme(colors.gray.a9)]',
 'before:absolute before:inset-0 before:rounded-[inherit] before:shadow-[0_1px_1px_0_theme(colors.white/.07)_inset]',
 'after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:rounded-[inherit] after:bg-gradient-to-b after:from-white/10 after:to-transparent',
 ],
 secondary: [
 '[--button-icon-color:theme(colors.gray.12)]',
 '[--button-icon-opacity:1]',
 'text-gray-12 border-gray-a6 bg-gray-surface shadow-sm shadow-gray-a3',
 'focus-visible:border-gray-a8 focus-visible:ring-accent-a3',
 'text-gray-12 bg-gray-surface ring-offset-gray-a4',
 'shadow-[0px_1px_0px_0px_theme(colors.gray.a2),0px_2px_3px_-1px_theme(colors.gray.a3)]',
 ],
 // Note:
 // This currently looks the same as `secondary`, but we've intentfully
Expand All@@ -40,8 +44,8 @@ const button = cva({
 connection: [
 '[--button-icon-color:theme(colors.gray.12)]',
 '[--button-icon-opacity:1]',
 'text-gray-12 border-gray-a6 bg-gray-surface shadow-sm shadow-gray-a3',
 'focus-visible:border-gray-a8 focus-visible:ring-accent-a3',
 'text-gray-12 bg-gray-surface ring-offset-gray-a4',
 'shadow-[0px_1px_0px_0px_theme(colors.gray.a2),0px_2px_3px_-1px_theme(colors.gray.a3)]',
 ],
 },
 busy: {
Expand Down

10 changes: 6 additions & 4 deletions
packages/ui/src/primitives/card.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,7 +15,8 @@ export const Root = React.forwardRef(function CardRoot(
 className={cx(
 '[--card-body-padding:theme(spacing.10)]',
 '[--card-content-rounded-b:theme(borderRadius.lg)]',
 'bg-gray-2 border-gray-a6 shadow-gray-a5 relative w-96 overflow-hidden rounded-xl border bg-clip-padding shadow-xl',
 'bg-gray-2 ring-gray-a3 relative w-96 overflow-hidden rounded-xl ring-1',
 'shadow-[0px_5px_15px_0px_theme(colors.gray.a4),0px_15px_35px_-5px_theme(colors.gray.a4)]',
 className,
 )}
 >
Expand All@@ -34,7 +35,8 @@ export const Content = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTM
 data-card-content=''
 {...props}
 className={cx(
 'bg-gray-surface shadow-gray-a3 border-gray-a6 relative -m-px flex flex-col gap-8 rounded-[inherit] rounded-b-[--card-content-rounded-b] border p-[--card-body-padding] shadow-sm',
 'bg-gray-surface relative flex flex-col gap-8 rounded-b-[--card-content-rounded-b] rounded-t-none p-[--card-body-padding]',
 'ring-gray-a3 shadow-[0px_0px_2px_0px_theme(colors.gray.a4),0px_1px_2px_0px_theme(colors.gray.a3)] ring-1',
 className,
 )}
 >
Expand DownExpand Up@@ -177,7 +179,7 @@ export const Banner = React.forwardRef(function CardBanner(
 'pointer-events-none absolute inset-0 w-full',
 // manually nudge the radius by `1px` for a snug fit
 'rounded-b-[calc(var(--card-content-rounded-b)-1px)]',
 '[background-image:repeating-linear-gradient(-45deg,theme(colors.orange.50),theme(colors.orange.50)_6px,theme(colors.orange.100/0.75)_6px,theme(colors.orange.100/0.75)_12px)]',
 '[background-image:repeating-linear-gradient(-45deg,theme(colors.orange.100/0.4),theme(colors.orange.100/0.4)_6px,theme(colors.orange.100/0.75)_6px,theme(colors.orange.100/0.75)_12px)]',
 '[mask-image:linear-gradient(to_top,black,transparent_128px)]',
 )}
 />
Expand DownExpand Up@@ -263,7 +265,7 @@ export const FooterAction = React.forwardRef<HTMLDivElement, React.HTMLAttribute
 ref={forwardedRef}
 data-card-footer-action=''
 {...props}
 className={cx('border-gray-a6 border-b px-6 py-4 last-of-type:border-b-transparent', className)}
 className={cx('border-gray-a3 border-b px-6 py-4 last-of-type:border-b-transparent', className)}
 >
 {children}
 </div>
Expand Down

32 changes: 17 additions & 15 deletions
packages/ui/src/primitives/field.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,10 +16,9 @@ export const Root = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
 ref={forwardedRef}
 {...props}
 className={cx(
 '[--field-input-border-width:1px]',
 '[--field-input-height:1.875rem]',
 '[--field-input-px:calc(theme(spacing.3)-var(--field-input-border-width))]',
 '[--field-input-py:calc(theme(spacing[1.5])-var(--field-input-border-width))]',
 '[--field-input-px:theme(spacing.3)]',
 '[--field-input-py:theme(spacing[1.5])]',
 '[--field-input-group-end-size:--field-input-height]',
 'has-[[data-field-checkbox]]:[--cl-field-label-cursor:pointer]',
 'has-[[data-field-input][disabled]]:[--cl-field-label-opacity:0.5]',
Expand DownExpand Up@@ -87,7 +86,7 @@ export const Hint = React.forwardRef(function FieldHint(
 data-field-hint=''
 ref={forwardedRef}
 {...props}
 className={cx('text-gray-10 text-sm font-medium', className)}
 className={cx('text-gray-9 text-sm font-medium', className)}
 >
 {children}
 </LabelEnd>
Expand DownExpand Up@@ -141,6 +140,10 @@ export const InputGroupEnd = React.forwardRef(function FieldInputGroupEnd(
 );
});

// Note:
// - To create the overlapping border/shadow effect"
// - `ring` – "focus ring"
// - `ring-offset` - border
export const Input = React.forwardRef(function FieldInput(
 {
 asChild,
Expand DownExpand Up@@ -169,8 +172,8 @@ export const Input = React.forwardRef(function FieldInput(
 // If an `InputGroup` exists, use the `pe` value, or fallback to the
 // standard input `px` value
 'pe-[var(--field-input-group-pe,var(--field-input-px))]',
 'border-[length:--field-input-border-width] bg-clip-padding',
 'text-gray-12 relative flex min-w-0 rounded-md bg-white text-base outline-none',
 'text-gray-12 relative flex min-w-0 items-center rounded-md bg-white text-base outline-none ring ring-offset-1',
 'shadow-[0px_1px_1px_0px_theme(colors.gray.a3)]',
 'disabled:cursor-not-allowed disabled:opacity-50',
 // variant
 {
Expand All@@ -180,21 +183,20 @@ export const Input = React.forwardRef(function FieldInput(
 // state
 {
 native:
 'border-[--cl-field-input-border] focus-visible:border-[--cl-field-input-border-active] focus-visible:ring-[0.1875rem] focus-visible:ring-[--cl-field-input-ring] hover:enabled:border-[--cl-field-input-border-active]',
 hover: 'border-[--cl-field-input-border-active]',
 'focus-visible': 'border-[--cl-field-input-border-active] ring-[0.1875rem] ring-[--cl-field-input-ring]',
 'ring-offset-[--cl-field-input-border] focus-visible:ring focus-visible:ring-[--cl-field-input-ring,theme(ringColor.DEFAULT)] focus-visible:ring-offset-[--cl-field-input-border-active] hover:enabled:ring-offset-[--cl-field-input-border-active] [&:not(:focus-visible)]:ring-transparent',
 hover: 'ring-transparent ring-offset-[--cl-field-input-border-active]',
 'focus-visible':
 'ring-[--cl-field-input-ring,theme(ringColor.DEFAULT)] ring-offset-[--cl-field-input-border-active]',
 }[state],
 // intent
 {
 idle: [
 '[--cl-field-input-border:theme(colors.gray.a6)]',
 '[--cl-field-input-border-active:theme(colors.gray.a8)]',
 '[--cl-field-input-ring:theme(colors.gray.a3)]',
 '[--cl-field-input-border:theme(colors.gray.a4)]',
 '[--cl-field-input-border-active:theme(colors.gray.a7)]',
 ],
 info: [
 '[--cl-field-input-border:theme(colors.gray.a8)]',
 '[--cl-field-input-border-active:theme(colors.gray.a8)]',
 '[--cl-field-input-ring:theme(colors.gray.a3)]',
 '[--cl-field-input-border:theme(colors.gray.a7)]',
 '[--cl-field-input-border-active:theme(colors.gray.a7)]',
 ],
 error: [
 '[--cl-field-input-border:theme(colors.danger.DEFAULT)]',
Expand Down

2 changes: 1 addition & 1 deletion
packages/ui/src/primitives/separator.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -8,7 +8,7 @@ export const Separator = React.forwardRef<HTMLParagraphElement, React.HTMLAttrib
 ref={forwardedRef}
 {...props}
 className={cx(
 'before:bg-gray-a6 after:bg-gray-a6 text-gray-a11 flex items-center gap-x-4 text-base before:h-px before:flex-1 after:h-px after:flex-1',
 'before:bg-gray-a4 after:bg-gray-a4 text-gray-a11 flex items-center gap-x-4 text-base before:h-px before:flex-1 after:h-px after:flex-1',
 className,
 )}
 >
Expand Down

4 changes: 2 additions & 2 deletions
packages/ui/src/tailwind.config.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -98,10 +98,10 @@ const config = {
 },
 },
 ringWidth: {
 DEFAULT: '0.125rem',
 DEFAULT: '0.1875rem',
 },
 ringColor: {
 DEFAULT: 'var(--cl-accent-a9)',
 DEFAULT: 'var(--cl-gray-a4)',
 },
 animation: {
 spin: 'cl-spin linear infinite',
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
refactor(ui): Colors#3874

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

joe-bell
merged 9 commits into

from

Aug 13, 2024
 Merged


refactor(ui): Colors
#3874
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


9 commits


Select commit
Hold shift + click to select a range
09a0119

wip


joe-bell Aug 1, 2024
5458e49

wip


joe-bell Aug 6, 2024
48b27a6

field, alert, hint


joe-bell Aug 7, 2024
3a6b6a6

wip


joe-bell Aug 7, 2024
f918206

fix secondary and connection buttons


joe-bell Aug 9, 2024
fefe4c9

add empty changeset


joe-bell Aug 12, 2024
1d2c296

change default focus styles, finish button


joe-bell Aug 12, 2024
78c43c2

input styling


joe-bell Aug 12, 2024
c1cc470

Merge branch 'main' into joe-bell/SDKI-500


joe-bell Aug 13, 2024

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


2 changes: 2 additions & 0 deletions
.changeset/good-peaches-dress.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
---
---

2 changes: 1 addition & 1 deletion
packages/ui/src/common/password-field.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -55,7 +55,7 @@ export function PasswordField({
 <button
 type='button'
 className={cx(
 'text-icon-sm text-gray-11 start-auto m-[0.1875rem] inline-flex aspect-square h-6 items-center justify-center rounded-sm p-0 outline-none disabled:cursor-not-allowed disabled:opacity-50',
 'text-icon-sm text-gray-10 start-auto m-[0.1875rem] inline-flex aspect-square h-6 items-center justify-center rounded-sm p-0 outline-none disabled:cursor-not-allowed disabled:opacity-50',
 'hover:enabled:text-gray-12 hover:enabled:bg-gray-3',
 'focus-visible:rounded-[calc(var(--cl-radius)*0.5)] focus-visible:ring',
 )}
Expand Down

31 changes: 16 additions & 15 deletions
packages/ui/src/common/phone-number-field.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -166,29 +166,30 @@ export const PhoneNumberField = React.forwardRef(function PhoneNumberField(
 <div
 ref={containerRef}
 className={cx(
 '[--phone-number-field-border-width:1px]',
 '[--phone-number-field-py:calc(theme(spacing[1.5])-var(--phone-number-field-border-width))]',
 '[--phone-number-field-px:calc(theme(spacing.3)-var(--phone-number-field-border-width))]',
 'border-[length:--phone-number-field-border-width] border-[--cl-phone-number-field-border] bg-clip-padding',
 // Note:
 // - To create the overlapping border/shadow effect"
 // - `ring` – "focus ring"
 // - `ring-offset` - border
 '[--phone-number-field-py:theme(spacing[1.5])]',
 '[--phone-number-field-px:theme(spacing.3)]',
 'ring ring-transparent ring-offset-1 ring-offset-[--cl-phone-number-field-border]',
 'text-gray-12 relative flex min-w-0 rounded-md bg-white text-base outline-none',
 'shadow-[0px_1px_1px_0px_theme(colors.gray.a3)]',
 'has-[[data-field-input][disabled]]:cursor-not-allowed has-[[data-field-input][disabled]]:opacity-50',
 // hover
 'hover:has-[[data-field-input]:enabled]:border-[--cl-phone-number-field-border-active]',
 'hover:has-[[data-field-input]:enabled]:ring-offset-[--cl-phone-number-field-border-active]',
 // focus
 'has-[[data-field-input]:focus-visible]:border-[--cl-phone-number-field-border-active]',
 'has-[[data-field-input]:focus-visible]:ring-[0.1875rem]',
 'has-[[data-field-input]:focus-visible]:ring-[--cl-phone-number-field-ring]',
 'has-[[data-field-input]:focus-visible]:ring-offset-[--cl-phone-number-field-border-active]',
 'has-[[data-field-input]:focus-visible]:ring-[--cl-phone-number-field-ring,theme(ringColor.DEFAULT)]',
 // intent
 {
 idle: [
 '[--cl-phone-number-field-border:theme(colors.gray.a6)]',
 '[--cl-phone-number-field-border-active:theme(colors.gray.a8)]',
 '[--cl-phone-number-field-ring:theme(colors.gray.a3)]',
 '[--cl-phone-number-field-border:theme(colors.gray.a4)]',
 '[--cl-phone-number-field-border-active:theme(colors.gray.a7)]',
 ],
 info: [
 '[--cl-phone-number-field-border:theme(colors.gray.a8)]',
 '[--cl-phone-number-field-border-active:theme(colors.gray.a8)]',
 '[--cl-phone-number-field-ring:theme(colors.gray.a3)]',
 '[--cl-phone-number-field-border:theme(colors.gray.a7)]',
 '[--cl-phone-number-field-border-active:theme(colors.gray.a7)]',
 ],
 error: [
 '[--cl-phone-number-field-border:theme(colors.danger.DEFAULT)]',
Expand All@@ -215,7 +216,7 @@ export const PhoneNumberField = React.forwardRef(function PhoneNumberField(
 className='hover:enabled:bg-gray-2 focus-visible:bg-gray-2 flex items-center gap-x-1 rounded-l-md px-2 py-1 text-base outline-none'
 >
 <span className='min-w-6 uppercase'>{selectedCountry.iso}</span>
 <Icon.ChevronUpDown className='text-gray-11 size-4' />
 <Icon.ChevronUpDown className='text-gray-9 size-4' />
 </Button>
 <Popover
 isOpen={isOpen}
Expand Down

6 changes: 3 additions & 3 deletions
packages/ui/src/primitives/alert.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,14 +16,14 @@ export const Alert = React.forwardRef<
 className={cx(
 'leading-small rounded-md border px-4 py-3 text-base',
 {
 warning: 'text-warning bg-warning/10 border-warning/20',
 error: 'text-danger bg-danger/10 border-danger/20',
 warning: 'text-warning bg-warning/[0.06] border-warning/[0.12]',
 error: 'text-danger bg-danger/[0.06] border-danger/[0.12]',
 }[intent],
 className,
 )}
 >
 <div className='flex gap-x-2'>
 <span className='mt-0.5 shrink-0 *:size-4'>
 <span className='mt-px shrink-0 *:size-4'>
 {
 {
 error: <Icon.ExclamationOctagonSm />,
Expand Down

28 changes: 16 additions & 12 deletions
packages/ui/src/primitives/button.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -4,34 +4,38 @@ import * as React from 'react';

import { Spinner } from './spinner';

// Note:
// - To create the overlapping border/shadow effect"
// - `ring` – "focus ring"
// - `ring-offset` - border
const button = cva({
 base: [
 '[--button-border-width:1px]',
 '[--button-icon-size:calc(var(--cl-font-size)*1.24)]', // 16px
 'appearance-none relative isolate select-none',
 'text-base font-medium',
 'px-[calc(theme(spacing.3)-var(--button-border-width))] py-[calc(theme(spacing[1.5])-var(--button-border-width))]',
 'px-3 py-1.5',
 'min-h-[1.875rem]',
 'inline-flex w-full items-center justify-center gap-3',
 'border-[length:--button-border-width] rounded-md bg-clip-padding',
 'outline-none focus-visible:ring',
 'ring ring-offset-1 rounded-md',
 '[&:not(:focus-visible)]:ring-transparent',
 'outline-none',
 '*:min-w-0',
 ],
 variants: {
 intent: {
 primary: [
 '[--button-icon-color:currentColor]',
 '[--button-icon-opacity:0.6]',
 'text-accent-contrast bg-accent-9 border-accent-9 shadow-[0_1px_1px_0_theme(colors.white/.07)_inset]',
 'before:absolute before:inset-0 before:rounded-[calc(theme(borderRadius.md)-1px)] before:shadow-[0_1px_1px_0_theme(colors.white/.07)_inset]',
 'after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:rounded-[calc(theme(borderRadius.md)-1px)] after:bg-gradient-to-b after:from-white/10 after:to-transparent',
 'focus-visible:ring-accent-a7',
 'text-accent-contrast bg-accent-9 ring-offset-accent-9',
 'shadow-[0px_1px_1px_0px_theme(colors.white/.07)_inset,0px_2px_3px_0px_theme(colors.gray.a7),0px_1px_1px_0px_theme(colors.gray.a9)]',
 'before:absolute before:inset-0 before:rounded-[inherit] before:shadow-[0_1px_1px_0_theme(colors.white/.07)_inset]',
 'after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:rounded-[inherit] after:bg-gradient-to-b after:from-white/10 after:to-transparent',
 ],
 secondary: [
 '[--button-icon-color:theme(colors.gray.12)]',
 '[--button-icon-opacity:1]',
 'text-gray-12 border-gray-a6 bg-gray-surface shadow-sm shadow-gray-a3',
 'focus-visible:border-gray-a8 focus-visible:ring-accent-a3',
 'text-gray-12 bg-gray-surface ring-offset-gray-a4',
 'shadow-[0px_1px_0px_0px_theme(colors.gray.a2),0px_2px_3px_-1px_theme(colors.gray.a3)]',
 ],
 // Note:
 // This currently looks the same as `secondary`, but we've intentfully
Expand All@@ -40,8 +44,8 @@ const button = cva({
 connection: [
 '[--button-icon-color:theme(colors.gray.12)]',
 '[--button-icon-opacity:1]',
 'text-gray-12 border-gray-a6 bg-gray-surface shadow-sm shadow-gray-a3',
 'focus-visible:border-gray-a8 focus-visible:ring-accent-a3',
 'text-gray-12 bg-gray-surface ring-offset-gray-a4',
 'shadow-[0px_1px_0px_0px_theme(colors.gray.a2),0px_2px_3px_-1px_theme(colors.gray.a3)]',
 ],
 },
 busy: {
Expand Down

10 changes: 6 additions & 4 deletions
packages/ui/src/primitives/card.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -15,7 +15,8 @@ export const Root = React.forwardRef(function CardRoot(
 className={cx(
 '[--card-body-padding:theme(spacing.10)]',
 '[--card-content-rounded-b:theme(borderRadius.lg)]',
 'bg-gray-2 border-gray-a6 shadow-gray-a5 relative w-96 overflow-hidden rounded-xl border bg-clip-padding shadow-xl',
 'bg-gray-2 ring-gray-a3 relative w-96 overflow-hidden rounded-xl ring-1',
 'shadow-[0px_5px_15px_0px_theme(colors.gray.a4),0px_15px_35px_-5px_theme(colors.gray.a4)]',
 className,
 )}
 >
Expand All@@ -34,7 +35,8 @@ export const Content = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTM
 data-card-content=''
 {...props}
 className={cx(
 'bg-gray-surface shadow-gray-a3 border-gray-a6 relative -m-px flex flex-col gap-8 rounded-[inherit] rounded-b-[--card-content-rounded-b] border p-[--card-body-padding] shadow-sm',
 'bg-gray-surface relative flex flex-col gap-8 rounded-b-[--card-content-rounded-b] rounded-t-none p-[--card-body-padding]',
 'ring-gray-a3 shadow-[0px_0px_2px_0px_theme(colors.gray.a4),0px_1px_2px_0px_theme(colors.gray.a3)] ring-1',
 className,
 )}
 >
Expand DownExpand Up@@ -177,7 +179,7 @@ export const Banner = React.forwardRef(function CardBanner(
 'pointer-events-none absolute inset-0 w-full',
 // manually nudge the radius by `1px` for a snug fit
 'rounded-b-[calc(var(--card-content-rounded-b)-1px)]',
 '[background-image:repeating-linear-gradient(-45deg,theme(colors.orange.50),theme(colors.orange.50)_6px,theme(colors.orange.100/0.75)_6px,theme(colors.orange.100/0.75)_12px)]',
 '[background-image:repeating-linear-gradient(-45deg,theme(colors.orange.100/0.4),theme(colors.orange.100/0.4)_6px,theme(colors.orange.100/0.75)_6px,theme(colors.orange.100/0.75)_12px)]',
 '[mask-image:linear-gradient(to_top,black,transparent_128px)]',
 )}
 />
Expand DownExpand Up@@ -263,7 +265,7 @@ export const FooterAction = React.forwardRef<HTMLDivElement, React.HTMLAttribute
 ref={forwardedRef}
 data-card-footer-action=''
 {...props}
 className={cx('border-gray-a6 border-b px-6 py-4 last-of-type:border-b-transparent', className)}
 className={cx('border-gray-a3 border-b px-6 py-4 last-of-type:border-b-transparent', className)}
 >
 {children}
 </div>
Expand Down

32 changes: 17 additions & 15 deletions
packages/ui/src/primitives/field.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -16,10 +16,9 @@ export const Root = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
 ref={forwardedRef}
 {...props}
 className={cx(
 '[--field-input-border-width:1px]',
 '[--field-input-height:1.875rem]',
 '[--field-input-px:calc(theme(spacing.3)-var(--field-input-border-width))]',
 '[--field-input-py:calc(theme(spacing[1.5])-var(--field-input-border-width))]',
 '[--field-input-px:theme(spacing.3)]',
 '[--field-input-py:theme(spacing[1.5])]',
 '[--field-input-group-end-size:--field-input-height]',
 'has-[[data-field-checkbox]]:[--cl-field-label-cursor:pointer]',
 'has-[[data-field-input][disabled]]:[--cl-field-label-opacity:0.5]',
Expand DownExpand Up@@ -87,7 +86,7 @@ export const Hint = React.forwardRef(function FieldHint(
 data-field-hint=''
 ref={forwardedRef}
 {...props}
 className={cx('text-gray-10 text-sm font-medium', className)}
 className={cx('text-gray-9 text-sm font-medium', className)}
 >
 {children}
 </LabelEnd>
Expand DownExpand Up@@ -141,6 +140,10 @@ export const InputGroupEnd = React.forwardRef(function FieldInputGroupEnd(
 );
});

// Note:
// - To create the overlapping border/shadow effect"
// - `ring` – "focus ring"
// - `ring-offset` - border
export const Input = React.forwardRef(function FieldInput(
 {
 asChild,
Expand DownExpand Up@@ -169,8 +172,8 @@ export const Input = React.forwardRef(function FieldInput(
 // If an `InputGroup` exists, use the `pe` value, or fallback to the
 // standard input `px` value
 'pe-[var(--field-input-group-pe,var(--field-input-px))]',
 'border-[length:--field-input-border-width] bg-clip-padding',
 'text-gray-12 relative flex min-w-0 rounded-md bg-white text-base outline-none',
 'text-gray-12 relative flex min-w-0 items-center rounded-md bg-white text-base outline-none ring ring-offset-1',
 'shadow-[0px_1px_1px_0px_theme(colors.gray.a3)]',
 'disabled:cursor-not-allowed disabled:opacity-50',
 // variant
 {
Expand All@@ -180,21 +183,20 @@ export const Input = React.forwardRef(function FieldInput(
 // state
 {
 native:
 'border-[--cl-field-input-border] focus-visible:border-[--cl-field-input-border-active] focus-visible:ring-[0.1875rem] focus-visible:ring-[--cl-field-input-ring] hover:enabled:border-[--cl-field-input-border-active]',
 hover: 'border-[--cl-field-input-border-active]',
 'focus-visible': 'border-[--cl-field-input-border-active] ring-[0.1875rem] ring-[--cl-field-input-ring]',
 'ring-offset-[--cl-field-input-border] focus-visible:ring focus-visible:ring-[--cl-field-input-ring,theme(ringColor.DEFAULT)] focus-visible:ring-offset-[--cl-field-input-border-active] hover:enabled:ring-offset-[--cl-field-input-border-active] [&:not(:focus-visible)]:ring-transparent',
 hover: 'ring-transparent ring-offset-[--cl-field-input-border-active]',
 'focus-visible':
 'ring-[--cl-field-input-ring,theme(ringColor.DEFAULT)] ring-offset-[--cl-field-input-border-active]',
 }[state],
 // intent
 {
 idle: [
 '[--cl-field-input-border:theme(colors.gray.a6)]',
 '[--cl-field-input-border-active:theme(colors.gray.a8)]',
 '[--cl-field-input-ring:theme(colors.gray.a3)]',
 '[--cl-field-input-border:theme(colors.gray.a4)]',
 '[--cl-field-input-border-active:theme(colors.gray.a7)]',
 ],
 info: [
 '[--cl-field-input-border:theme(colors.gray.a8)]',
 '[--cl-field-input-border-active:theme(colors.gray.a8)]',
 '[--cl-field-input-ring:theme(colors.gray.a3)]',
 '[--cl-field-input-border:theme(colors.gray.a7)]',
 '[--cl-field-input-border-active:theme(colors.gray.a7)]',
 ],
 error: [
 '[--cl-field-input-border:theme(colors.danger.DEFAULT)]',
Expand Down

2 changes: 1 addition & 1 deletion
packages/ui/src/primitives/separator.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -8,7 +8,7 @@ export const Separator = React.forwardRef<HTMLParagraphElement, React.HTMLAttrib
 ref={forwardedRef}
 {...props}
 className={cx(
 'before:bg-gray-a6 after:bg-gray-a6 text-gray-a11 flex items-center gap-x-4 text-base before:h-px before:flex-1 after:h-px after:flex-1',
 'before:bg-gray-a4 after:bg-gray-a4 text-gray-a11 flex items-center gap-x-4 text-base before:h-px before:flex-1 after:h-px after:flex-1',
 className,
 )}
 >
Expand Down

4 changes: 2 additions & 2 deletions
packages/ui/src/tailwind.config.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -98,10 +98,10 @@ const config = {
 },
 },
 ringWidth: {
 DEFAULT: '0.125rem',
 DEFAULT: '0.1875rem',
 },
 ringColor: {
 DEFAULT: 'var(--cl-accent-a9)',
 DEFAULT: 'var(--cl-gray-a4)',
 },
 animation: {
 spin: 'cl-spin linear infinite',
Expand Down