Skip to content
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.

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

New approach to wide gamut colour #38

Merged
merged 16 commits into from
Jul 27, 2023
Merged
Changes from 12 commits
Commits
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
8 changes: 4 additions & 4 deletions components/dist/index.d.ts
Original file line number Diff line number Diff line change
@@ -30,8 +30,8 @@ declare const Badge: ({ className, children, color, variant, }: BadgeProps) => r

declare const buttonSizes: readonly ["sm", "icon", "base"];
declare const variants: readonly ["primary", "secondary", "ghost", "danger"];
type ButtonSize = (typeof buttonSizes)[number];
type Variant = (typeof variants)[number];
type ButtonSize = typeof buttonSizes[number];
type Variant = typeof variants[number];
type ButtonStyleProps = {
size?: ButtonSize;
variant?: Variant;
@@ -45,8 +45,8 @@ declare const Button: react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> &

declare const spinnerSizes: readonly ["base", "lg"];
declare const spinnerVariants: readonly ["primary", "secondary", "ghost", "danger"];
type SpinnerSize = (typeof spinnerSizes)[number];
type SpinnerVariant = (typeof spinnerVariants)[number];
type SpinnerSize = typeof spinnerSizes[number];
type SpinnerVariant = typeof spinnerVariants[number];
interface SpinnerProps {
className?: string;
size?: SpinnerSize;
2 changes: 1 addition & 1 deletion components/dist/index.js
Original file line number Diff line number Diff line change
@@ -58782,7 +58782,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
var Admonition = ({ node }) => {
const attrs = node.getAttributes();
const content = (0, import_react_asciidoc.useGetContent)(node);
const contentModel = node.content_model;
const contentModel = node.getContentModel();
let icon;
if (attrs.name === "caution") {
icon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Error12, {});
2 changes: 1 addition & 1 deletion components/dist/index.js.map

Large diffs are not rendered by default.

3 changes: 1 addition & 2 deletions components/src/AsciiDoc/Admonition.tsx
Original file line number Diff line number Diff line change
@@ -9,8 +9,7 @@ const Admonition = ({ node }: { node: AdocTypes.Block }) => {

// Undocumented asciidoc attribute
// Use this to check if we should render the content as is, or use a <Content /> block
// @ts-ignore
const contentModel = node.content_model
const contentModel = node.getContentModel()

let icon
if (attrs.name === 'caution') {
2 changes: 1 addition & 1 deletion components/src/ui/badge/Badge.tsx
Original file line number Diff line number Diff line change
@@ -48,7 +48,7 @@ export const Badge = ({
`variant-${variant}`,
'inline-flex h-4 items-center whitespace-nowrap rounded-sm px-[3px] py-[1px] uppercase text-mono-sm',
badgeColors[variant][color],
className
className,
)}
>
<span>{children}</span>
10 changes: 5 additions & 5 deletions components/src/ui/button/Button.tsx
Original file line number Diff line number Diff line change
@@ -7,8 +7,8 @@ import { Spinner } from '../'
export const buttonSizes = ['sm', 'icon', 'base'] as const
export const variants = ['primary', 'secondary', 'ghost', 'danger'] as const

export type ButtonSize = (typeof buttonSizes)[number]
export type Variant = (typeof variants)[number]
export type ButtonSize = typeof buttonSizes[number]
export type Variant = typeof variants[number]

const sizeStyle: Record<ButtonSize, string> = {
sm: 'h-8 px-3 text-mono-sm svg:w-4',
@@ -32,7 +32,7 @@ export const buttonStyle = ({
sizeStyle[size],
variant === 'danger'
? 'focus:outline-destructive-secondary'
: 'focus:outline-accent-secondary'
: 'focus:outline-accent-secondary',
)
}

@@ -71,7 +71,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
// props by the parent
...rest
},
ref
ref,
) => {
const isDisabled = disabled || loading
return (
@@ -92,5 +92,5 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
</span>
</button>
)
}
},
)
4 changes: 2 additions & 2 deletions components/src/ui/spinner/Spinner.tsx
Original file line number Diff line number Diff line change
@@ -4,8 +4,8 @@ import { useEffect, useRef, useState } from 'react'

export const spinnerSizes = ['base', 'lg'] as const
export const spinnerVariants = ['primary', 'secondary', 'ghost', 'danger'] as const
export type SpinnerSize = (typeof spinnerSizes)[number]
export type SpinnerVariant = (typeof spinnerVariants)[number]
export type SpinnerSize = typeof spinnerSizes[number]
export type SpinnerVariant = typeof spinnerVariants[number]

interface SpinnerProps {
className?: string
296 changes: 148 additions & 148 deletions icons/index.ts
Original file line number Diff line number Diff line change
@@ -1,148 +1,148 @@
export type Icon =
| { name: 'access', size: 16 }
| { name: 'access', size: 24 }
| { name: 'action', size: 16 }
| { name: 'action', size: 24 }
| { name: 'add', size: 12 }
| { name: 'add-roundel', size: 12 }
| { name: 'add-roundel', size: 16 }
| { name: 'add-roundel', size: 24 }
| { name: 'calendar', size: 16 }
| { name: 'calendar', size: 24 }
| { name: 'carat-down', size: 12 }
| { name: 'carat-left', size: 12 }
| { name: 'carat-right', size: 12 }
| { name: 'carat-up', size: 12 }
| { name: 'chat', size: 16 }
| { name: 'chat', size: 24 }
| { name: 'checkmark', size: 12 }
| { name: 'clipboard', size: 12 }
| { name: 'clipboard', size: 16 }
| { name: 'clipboard', size: 24 }
| { name: 'close', size: 12 }
| { name: 'close', size: 16 }
| { name: 'close', size: 8 }
| { name: 'cloud', size: 16 }
| { name: 'cloud', size: 24 }
| { name: 'compability', size: 16 }
| { name: 'compatibility', size: 24 }
| { name: 'contrast', size: 16 }
| { name: 'contrast', size: 24 }
| { name: 'cpu', size: 16 }
| { name: 'cpu', size: 24 }
| { name: 'delete', size: 16 }
| { name: 'delete', size: 24 }
| { name: 'disabled', size: 12 }
| { name: 'dislike', size: 16 }
| { name: 'dislike', size: 24 }
| { name: 'document', size: 16 }
| { name: 'document', size: 24 }
| { name: 'dots', size: 16 }
| { name: 'dots', size: 24 }
| { name: 'download', size: 24 }
| { name: 'download-roundel', size: 16 }
| { name: 'edit', size: 16 }
| { name: 'email', size: 16 }
| { name: 'email', size: 24 }
| { name: 'error', size: 12 }
| { name: 'error', size: 16 }
| { name: 'error', size: 24 }
| { name: 'filter', size: 12 }
| { name: 'firewall', size: 16 }
| { name: 'firewall', size: 24 }
| { name: 'folder', size: 16 }
| { name: 'folder', size: 24 }
| { name: 'gateway', size: 16 }
| { name: 'gateway', size: 24 }
| { name: 'health', size: 16 }
| { name: 'heart', size: 24 }
| { name: 'hide', size: 12 }
| { name: 'hide', size: 16 }
| { name: 'hide', size: 24 }
| { name: 'hourglass', size: 16 }
| { name: 'hourglass', size: 24 }
| { name: 'images', size: 16 }
| { name: 'images', size: 24 }
| { name: 'info', size: 16 }
| { name: 'info', size: 24 }
| { name: 'instances', size: 16 }
| { name: 'instances', size: 24 }
| { name: 'integration', size: 16 }
| { name: 'ip-global', size: 16 }
| { name: 'ip-global', size: 24 }
| { name: 'ip-local', size: 16 }
| { name: 'ip-local', size: 24 }
| { name: 'issues', size: 16 }
| { name: 'issues', size: 24 }
| { name: 'key', size: 12 }
| { name: 'key', size: 16 }
| { name: 'key', size: 24 }
| { name: 'like', size: 16 }
| { name: 'like', size: 24 }
| { name: 'link', size: 16 }
| { name: 'load-balancer', size: 16 }
| { name: 'load-balancer', size: 24 }
| { name: 'loader', size: 12 }
| { name: 'location', size: 24 }
| { name: 'logs', size: 16 }
| { name: 'logs', size: 24 }
| { name: 'metrics', size: 16 }
| { name: 'more', size: 12 }
| { name: 'networking', size: 16 }
| { name: 'networking', size: 24 }
| { name: 'new-window', size: 16 }
| { name: 'next-arrow', size: 12 }
| { name: 'notifications', size: 16 }
| { name: 'open-link', size: 12 }
| { name: 'organization', size: 16 }
| { name: 'organization', size: 24 }
| { name: 'overview', size: 16 }
| { name: 'overview', size: 24 }
| { name: 'person', size: 16 }
| { name: 'person', size: 24 }
| { name: 'person-group', size: 16 }
| { name: 'person-group', size: 24 }
| { name: 'prev-arrow', size: 12 }
| { name: 'profile', size: 16 }
| { name: 'progress', size: 24 }
| { name: 'prohibited', size: 24 }
| { name: 'question', size: 12 }
| { name: 'racks', size: 24 }
| { name: 'ram', size: 16 }
| { name: 'refresh', size: 16 }
| { name: 'repair', size: 12 }
| { name: 'repair', size: 16 }
| { name: 'resize', size: 16 }
| { name: 'resize', size: 24 }
| { name: 'router', size: 16 }
| { name: 'router', size: 24 }
| { name: 'safety', size: 24 }
| { name: 'search', size: 16 }
| { name: 'security', size: 12 }
| { name: 'security', size: 16 }
| { name: 'security', size: 24 }
| { name: 'select-arrows', size: 6 }
| { name: 'servers', size: 16 }
| { name: 'settings', size: 16 }
| { name: 'settings', size: 24 }
| { name: 'show', size: 16 }
| { name: 'snapshots', size: 16 }
| { name: 'snapshots', size: 24 }
| { name: 'software-update', size: 16 }
| { name: 'software-update', size: 24 }
| { name: 'speaker', size: 24 }
| { name: 'ssd', size: 16 }
| { name: 'storage', size: 16 }
| { name: 'storage', size: 24 }
| { name: 'subnet', size: 16 }
| { name: 'subnet', size: 24 }
| { name: 'success', size: 12 }
| { name: 'tags', size: 16 }
| { name: 'terminal', size: 16 }
| { name: 'terminal', size: 24 }
| { name: 'time', size: 16 }
| { name: 'transmit', size: 16 }
| { name: 'transmit', size: 24 }
| { name: 'unauthorized', size: 12 }
| { name: 'warning', size: 12 }
| { name: 'wireless', size: 24 }
export type Icon =
| { name: 'access'; size: 16 }
| { name: 'access'; size: 24 }
| { name: 'action'; size: 16 }
| { name: 'action'; size: 24 }
| { name: 'add'; size: 12 }
| { name: 'add-roundel'; size: 12 }
| { name: 'add-roundel'; size: 16 }
| { name: 'add-roundel'; size: 24 }
| { name: 'calendar'; size: 16 }
| { name: 'calendar'; size: 24 }
| { name: 'carat-down'; size: 12 }
| { name: 'carat-left'; size: 12 }
| { name: 'carat-right'; size: 12 }
| { name: 'carat-up'; size: 12 }
| { name: 'chat'; size: 16 }
| { name: 'chat'; size: 24 }
| { name: 'checkmark'; size: 12 }
| { name: 'clipboard'; size: 12 }
| { name: 'clipboard'; size: 16 }
| { name: 'clipboard'; size: 24 }
| { name: 'close'; size: 12 }
| { name: 'close'; size: 16 }
| { name: 'close'; size: 8 }
| { name: 'cloud'; size: 16 }
| { name: 'cloud'; size: 24 }
| { name: 'compability'; size: 16 }
| { name: 'compatibility'; size: 24 }
| { name: 'contrast'; size: 16 }
| { name: 'contrast'; size: 24 }
| { name: 'cpu'; size: 16 }
| { name: 'cpu'; size: 24 }
| { name: 'delete'; size: 16 }
| { name: 'delete'; size: 24 }
| { name: 'disabled'; size: 12 }
| { name: 'dislike'; size: 16 }
| { name: 'dislike'; size: 24 }
| { name: 'document'; size: 16 }
| { name: 'document'; size: 24 }
| { name: 'dots'; size: 16 }
| { name: 'dots'; size: 24 }
| { name: 'download'; size: 24 }
| { name: 'download-roundel'; size: 16 }
| { name: 'edit'; size: 16 }
| { name: 'email'; size: 16 }
| { name: 'email'; size: 24 }
| { name: 'error'; size: 12 }
| { name: 'error'; size: 16 }
| { name: 'error'; size: 24 }
| { name: 'filter'; size: 12 }
| { name: 'firewall'; size: 16 }
| { name: 'firewall'; size: 24 }
| { name: 'folder'; size: 16 }
| { name: 'folder'; size: 24 }
| { name: 'gateway'; size: 16 }
| { name: 'gateway'; size: 24 }
| { name: 'health'; size: 16 }
| { name: 'heart'; size: 24 }
| { name: 'hide'; size: 12 }
| { name: 'hide'; size: 16 }
| { name: 'hide'; size: 24 }
| { name: 'hourglass'; size: 16 }
| { name: 'hourglass'; size: 24 }
| { name: 'images'; size: 16 }
| { name: 'images'; size: 24 }
| { name: 'info'; size: 16 }
| { name: 'info'; size: 24 }
| { name: 'instances'; size: 16 }
| { name: 'instances'; size: 24 }
| { name: 'integration'; size: 16 }
| { name: 'ip-global'; size: 16 }
| { name: 'ip-global'; size: 24 }
| { name: 'ip-local'; size: 16 }
| { name: 'ip-local'; size: 24 }
| { name: 'issues'; size: 16 }
| { name: 'issues'; size: 24 }
| { name: 'key'; size: 12 }
| { name: 'key'; size: 16 }
| { name: 'key'; size: 24 }
| { name: 'like'; size: 16 }
| { name: 'like'; size: 24 }
| { name: 'link'; size: 16 }
| { name: 'load-balancer'; size: 16 }
| { name: 'load-balancer'; size: 24 }
| { name: 'loader'; size: 12 }
| { name: 'location'; size: 24 }
| { name: 'logs'; size: 16 }
| { name: 'logs'; size: 24 }
| { name: 'metrics'; size: 16 }
| { name: 'more'; size: 12 }
| { name: 'networking'; size: 16 }
| { name: 'networking'; size: 24 }
| { name: 'new-window'; size: 16 }
| { name: 'next-arrow'; size: 12 }
| { name: 'notifications'; size: 16 }
| { name: 'open-link'; size: 12 }
| { name: 'organization'; size: 16 }
| { name: 'organization'; size: 24 }
| { name: 'overview'; size: 16 }
| { name: 'overview'; size: 24 }
| { name: 'person'; size: 16 }
| { name: 'person'; size: 24 }
| { name: 'person-group'; size: 16 }
| { name: 'person-group'; size: 24 }
| { name: 'prev-arrow'; size: 12 }
| { name: 'profile'; size: 16 }
| { name: 'progress'; size: 24 }
| { name: 'prohibited'; size: 24 }
| { name: 'question'; size: 12 }
| { name: 'racks'; size: 24 }
| { name: 'ram'; size: 16 }
| { name: 'refresh'; size: 16 }
| { name: 'repair'; size: 12 }
| { name: 'repair'; size: 16 }
| { name: 'resize'; size: 16 }
| { name: 'resize'; size: 24 }
| { name: 'router'; size: 16 }
| { name: 'router'; size: 24 }
| { name: 'safety'; size: 24 }
| { name: 'search'; size: 16 }
| { name: 'security'; size: 12 }
| { name: 'security'; size: 16 }
| { name: 'security'; size: 24 }
| { name: 'select-arrows'; size: 6 }
| { name: 'servers'; size: 16 }
| { name: 'settings'; size: 16 }
| { name: 'settings'; size: 24 }
| { name: 'show'; size: 16 }
| { name: 'snapshots'; size: 16 }
| { name: 'snapshots'; size: 24 }
| { name: 'software-update'; size: 16 }
| { name: 'software-update'; size: 24 }
| { name: 'speaker'; size: 24 }
| { name: 'ssd'; size: 16 }
| { name: 'storage'; size: 16 }
| { name: 'storage'; size: 24 }
| { name: 'subnet'; size: 16 }
| { name: 'subnet'; size: 24 }
| { name: 'success'; size: 12 }
| { name: 'tags'; size: 16 }
| { name: 'terminal'; size: 16 }
| { name: 'terminal'; size: 24 }
| { name: 'time'; size: 16 }
| { name: 'transmit'; size: 16 }
| { name: 'transmit'; size: 24 }
| { name: 'unauthorized'; size: 12 }
| { name: 'warning'; size: 12 }
| { name: 'wireless'; size: 24 }
124 changes: 63 additions & 61 deletions package-lock.json
82 changes: 54 additions & 28 deletions scripts/convert-tokens.ts
Original file line number Diff line number Diff line change
@@ -96,6 +96,11 @@ StyleDictionary.registerFormat({
/** Used with the `??` operator when you only want to include styles on the root stylesheet */
const root = options.selector === ':root' ? undefined : ''

const p3Var = (name: string, color: number[], alpha?: number) =>
`--${name}-p3: color(display-p3 ${(color[0] / 255).toFixed(4)} ${(
color[1] / 255
).toFixed(4)} ${(color[2] / 255).toFixed(4)}${alpha ? ` / ${alpha}` : ''})`

return dedent`
/* THIS FILE IS AUTOGENERATED, DO NOT EDIT */
@@ -115,30 +120,36 @@ StyleDictionary.registerFormat({
if (prop.name.startsWith('base-')) {
return options.selector === ':root'
? `--${prop.name}-rgb: ${rgbColor}; /* ${prop.value} */
--${prop.name}: rgb(var(--${prop.name}-rgb));
`
${p3Var(prop.name, rgbColor)};
--${prop.name}: rgb(var(--${prop.name}-rgb));
`
: ''
}
if (prop.name.startsWith('theme-')) {
return `
--${prop.name}-rgb: var(--${prop.attributes?.ref}-rgb);
--${prop.name}-p3: var(--${prop.attributes?.ref}-p3);
--${prop.name}: rgb(var(--${prop.name}-rgb));
`
}
if (hasAlpha && prop.attributes?.ref) {
return `--${prop.name}: rgba(var(--${prop.attributes?.ref}-rgb), ${alpha});`
return `--${prop.name}: rgba(var(--${prop.attributes?.ref}-rgb), ${alpha});
${p3Var(prop.name, rgbColor, alpha)};`
}
if (prop.attributes?.ref) {
return `
--${prop.name}-rgb: var(--${prop.attributes?.ref}-rgb);
--${prop.name}-p3: var(--${prop.attributes?.ref}-p3);
--${prop.name}: rgb(var(--${prop.name}-rgb));
`
}
if (hasAlpha) {
return `--${prop.name}: rgba(${rgbColor}-rgb, ${alpha});`
return `--${prop.name}: rgba(${rgbColor}-rgb, ${alpha});
${p3Var(prop.name, rgbColor, alpha)};`
}
return `
--${prop.name}-rgb: ${rgbColor};
${p3Var(prop.name, rgbColor)};
--${prop.name}: rgb(var(--${prop.name}-rgb));
`
})
@@ -179,13 +190,16 @@ type CSSProperty = KebabCase<keyof CSSProperties> | `--${string}`
* @param tokenPrefix The prefix of the color token name to be targeted / replaced
* @param classPrefix What will ultimately be prepended to the tailwind class
* @param cssProperties The css property name to be output in the generated class
* @param isP3 Adds `-p3` to the token (optional)
*/
const makeColorUtility = (
tokenPrefix: 'surface' | 'content' | 'stroke' | 'chart-fill' | 'chart-stroke' | 'theme',
classPrefix: string,
cssProperties: CSSProperty | CSSProperty[],
isP3: boolean,
) => {
const properties = Array.isArray(cssProperties) ? cssProperties : [cssProperties]
const tokenSuffix = isP3 === true ? '-p3' : ''
return (colors: TransformedToken[]) =>
colors
.filter((color) => color.name.startsWith(tokenPrefix))
@@ -198,7 +212,7 @@ const makeColorUtility = (
`.replace(/,/g, ';')) ||
''
}'.${color.name.replace(tokenPrefix, classPrefix)}': {
${properties.map((prop) => `'${prop}': 'var(--${color.name})'`)}
${properties.map((prop) => `'${prop}': 'var(--${color.name}${tokenSuffix})'`)}
}`,
)
}
@@ -215,6 +229,35 @@ StyleDictionary.registerFormat({
)
const boxShadow = dictionary.allProperties.filter((prop) => prop.type === 'boxShadow')

const makeColors = (isP3: boolean) =>
`${[
makeColorUtility('content', 'text', 'color', isP3),
makeColorUtility('theme', 'text', 'color', isP3),
makeColorUtility('surface', 'bg', 'background-color', isP3),
makeColorUtility('theme', 'bg', 'background-color', isP3),
makeColorUtility('stroke', 'border', 'border-color', isP3),
makeColorUtility('stroke', 'border-l', 'border-left-color', isP3),
makeColorUtility('stroke', 'border-r', 'border-right-color', isP3),
makeColorUtility('stroke', 'border-t', 'border-top-color', isP3),
makeColorUtility('stroke', 'border-b', 'border-bottom-color', isP3),
makeColorUtility(
'stroke',
'border-x',
['border-left-color', 'border-right-color'],
isP3,
),
makeColorUtility(
'stroke',
'border-y',
['border-top-color', 'border-bottom-color'],
isP3,
),
makeColorUtility('stroke', 'ring', '--tw-ring-color', isP3),
makeColorUtility('stroke', 'outline', 'outline-color', isP3),
makeColorUtility('chart-fill', 'chart-fill', 'fill', isP3),
makeColorUtility('chart-stroke', 'chart-stroke', 'stroke', isP3),
].map((make) => make(colors))}`

return `
/* THIS FILE IS AUTOGENERATED, DO NOT EDIT */
@@ -233,29 +276,12 @@ StyleDictionary.registerFormat({
}
module.exports.colorUtilities = {
${[
makeColorUtility('content', 'text', 'color'),
makeColorUtility('theme', 'text', 'color'),
makeColorUtility('surface', 'bg', 'background-color'),
makeColorUtility('theme', 'bg', 'background-color'),
makeColorUtility('stroke', 'border', 'border-color'),
makeColorUtility('stroke', 'border-l', 'border-left-color'),
makeColorUtility('stroke', 'border-r', 'border-right-color'),
makeColorUtility('stroke', 'border-t', 'border-top-color'),
makeColorUtility('stroke', 'border-b', 'border-bottom-color'),
makeColorUtility('stroke', 'border-x', [
'border-left-color',
'border-right-color',
]),
makeColorUtility('stroke', 'border-y', [
'border-top-color',
'border-bottom-color',
]),
makeColorUtility('stroke', 'ring', '--tw-ring-color'),
makeColorUtility('stroke', 'outline', 'outline-color'),
makeColorUtility('chart-fill', 'chart-fill', 'fill'),
makeColorUtility('chart-stroke', 'chart-stroke', 'stroke'),
].map((make) => make(colors))}
${makeColors(false)},
/* Display-P3 color, when supported. */
'@supports (color: color(display-p3 1 1 1))': {
${makeColors(true)}
}
}
module.exports.elevationUtilities = {
166 changes: 166 additions & 0 deletions styles/dist/blue.css

Large diffs are not rendered by default.

215 changes: 215 additions & 0 deletions styles/dist/main.css

Large diffs are not rendered by default.

166 changes: 166 additions & 0 deletions styles/dist/purple.css

Large diffs are not rendered by default.

166 changes: 166 additions & 0 deletions styles/dist/red.css

Large diffs are not rendered by default.

1,159 changes: 1,159 additions & 0 deletions styles/dist/tailwind-tokens.js

Large diffs are not rendered by default.

164 changes: 164 additions & 0 deletions styles/dist/yellow.css

Large diffs are not rendered by default.