();
13 |
14 | // initialize
15 | useEffect(() => {
16 | if (webgl || !canvasEl.current) {
17 | return;
18 | }
19 | setWebgl(new GradientOklab({ canvas: canvasEl.current, startColor: start, endColor: end }));
20 | }, [webgl]);
21 |
22 | // update color
23 | useEffect(() => {
24 | if (webgl) {
25 | webgl.setColors(start, end);
26 | }
27 | }, [start, end, webgl]);
28 |
29 | return
20 | {Object.entries(allIcons).map(([name, Icon]) => (
21 |
32 |
35 | ))}
36 |
F ;
15 | },
16 | };
17 |
--------------------------------------------------------------------------------
/packages/storybook/src/OmniBar.stories.jsx:
--------------------------------------------------------------------------------
1 | import { OmniBar, OmniBarResult } from '@terrazzo/tiles';
2 |
3 | export default {
4 | title: 'Components/Form/OmniBar',
5 | component: OmniBar,
6 | parameters: {
7 | // layout: 'centered',
8 | },
9 | };
10 |
11 | export const Overview = {
12 | render() {
13 | return (
14 | Results 1–3 of 3.}>
15 |
16 | Search
17 | Result blah blah blah
18 |
19 |
20 | Search
21 | Result blah blah blah
22 |
23 |
24 | Search
25 | Result blah blah blah
26 |
27 |
28 | );
29 | },
30 | };
31 |
--------------------------------------------------------------------------------
/packages/storybook/src/Select.stories.jsx:
--------------------------------------------------------------------------------
1 | import { ColorFilterOutline } from '@terrazzo/icons';
2 | import { Select, SelectGroup, SelectItem } from '@terrazzo/tiles';
3 |
4 | export default {
5 | title: 'Components/Form/Select',
6 | component: Select,
7 | parameters: {
8 | layout: 'centered',
9 | },
10 | };
11 |
12 | export const Overview = {
13 | render() {
14 | return (
15 |
18 |
24 |
34 |
35 | );
36 | },
37 | };
38 |
--------------------------------------------------------------------------------
/packages/storybook/src/Slider.stories.jsx:
--------------------------------------------------------------------------------
1 | import { Slider } from '@terrazzo/tiles';
2 | import { useState } from 'react';
3 |
4 | export default {
5 | title: 'Components/Form/Slider',
6 | component: Slider,
7 | parameters: {
8 | layout: 'centered',
9 | },
10 | };
11 |
12 | export const Overview = {
13 | args: {
14 | label: 'My Slider',
15 | orientation: 'horizontal',
16 | min: 0,
17 | max: 100,
18 | step: 1,
19 | defaultValue: 0,
20 | },
21 | argTypes: {
22 | orientation: {
23 | control: 'select',
24 | options: ['horizontal', 'vertical'],
25 | },
26 | },
27 | render({ defaultValue, ...args }) {
28 | const [value, setValue] = useState(defaultValue);
29 |
30 | return (
31 |
32 |
34 | );
35 | },
36 | };
37 |
--------------------------------------------------------------------------------
/packages/storybook/src/SubtleInput.stories.jsx:
--------------------------------------------------------------------------------
1 | import { SubtleInput } from '@terrazzo/tiles';
2 |
3 | export default {
4 | title: 'Components/Form/SubtleInput',
5 | component: SubtleInput,
6 | parameters: {
7 | layout: 'centered',
8 | },
9 | };
10 |
11 | export const Overview = {
12 | args: {
13 | type: 'number',
14 | defaultValue: 23.45,
15 | },
16 | render(args) {
17 | return
22 | {[
23 | 'color',
24 | 'dimension',
25 | 'fontFamily',
26 | 'fontWeight',
27 | 'duration',
28 | 'cubicBezier',
29 | 'number',
30 | 'link',
31 | 'strokeStyle',
32 | 'border',
33 | 'transition',
34 | 'shadow',
35 | 'gradient',
36 | 'typography',
37 | ].map((type) => (
38 |
41 | );
42 | },
43 | };
44 |
--------------------------------------------------------------------------------
/packages/storybook/src/TrueGradient.stories.jsx:
--------------------------------------------------------------------------------
1 | import { TrueGradient } from '@terrazzo/react-color-picker';
2 | import useColor from '@terrazzo/use-color';
3 |
4 | export default {
5 | title: 'Components/Display/TrueGradient',
6 | component: TrueGradient,
7 | parameters: {
8 | layout: 'centered',
9 | },
10 | };
11 |
12 | export const Overview = {
13 | args: {
14 | start: 'color(srgb 1 0 0)',
15 | end: 'color(srgb 0 1 0)',
16 | },
17 | render(args) {
18 | const [start] = useColor(args.start);
19 | const [end] = useColor(args.end);
20 |
21 | return (
22 |
23 | Good
24 |
25 | Bad
26 |
33 |
13 |
14 |
15 |
16 | {columns.map((col) => (
17 |
18 | {col}
19 |
20 | ))}
21 |
22 |
23 |
24 | {rows.map((row, i) => {
25 | const start = i * columns.length;
26 | const rowVariants = variants.slice(start, start + columns.length);
27 | return (
28 |
29 |
30 | {row}
31 |
32 | {rowVariants.map((variant, i) => (
33 |
34 | {variant}
35 |
36 | ))}
37 |
38 | );
39 | })}
40 |
41 |
42 | );
43 | }
44 |
--------------------------------------------------------------------------------
/packages/storybook/stylelint.config.js:
--------------------------------------------------------------------------------
1 | import base from '../../stylelint.config.js';
2 |
3 | /** @type {import('stylelint').Config} */
4 | export default {
5 | ...base,
6 | };
7 |
--------------------------------------------------------------------------------
/packages/storybook/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.react.json",
3 | "compilerOptions": {
4 | "baseUrl": "src",
5 | "noEmit": true
6 | },
7 | "include": ["./src/"]
8 | }
9 |
--------------------------------------------------------------------------------
/packages/storybook/vite.config.ts:
--------------------------------------------------------------------------------
1 | import react from '@vitejs/plugin-react-swc';
2 | import { defineConfig } from 'vite';
3 |
4 | export default defineConfig({
5 | plugins: [react()],
6 | });
7 |
--------------------------------------------------------------------------------
/packages/tiles/.npmignore:
--------------------------------------------------------------------------------
1 | *.test.*
2 | .size-limit.js
3 | .turbo
4 | biome.*
5 | rollup.*
6 | stylelint.*
7 | src/**
8 | tsconfig.*
9 | vite.*
10 | vitest.*
11 |
--------------------------------------------------------------------------------
/packages/tiles/.size-limit.js:
--------------------------------------------------------------------------------
1 | export default [
2 | { ignore: ['@use-gesture/react', 'culori', 'react', 'shiki'], path: './dist/index.js', limit: '35 kB' },
3 | ];
4 |
--------------------------------------------------------------------------------
/packages/tiles/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # @terrazzo/tiles
2 |
3 | ## 0.0.7
4 |
5 | ### Patch Changes
6 |
7 | - Bugfixes thanks to [@lilnasy](lilnasy)
8 |
9 | ## 0.0.3
10 |
11 | ### Patch Changes
12 |
13 | - [#2](https://github.com/terrazzoapp/tiles/pull/2) [`0a7e761`](https://github.com/terrazzoapp/tiles/commit/0a7e7617b820b25c421bef71c2d6d832fa803729) Thanks [@drwpow](https://github.com/drwpow)! - Allow buttons to be links
14 |
15 | ## 0.0.2
16 |
17 | ### Patch Changes
18 |
19 | - [#1](https://github.com/terrazzoapp/tiles/pull/1) [`1edb094`](https://github.com/terrazzoapp/tiles/commit/1edb094f01b17f5b43728ba4fb1b15d7b10fa5a9) Thanks [@drwpow](https://github.com/drwpow)! - Fix Svelte package, export types
20 |
21 | ## 0.0.1
22 |
23 | ### Patch Changes
24 |
25 | - [`934d708`](https://github.com/terrazzoapp/tiles/commit/934d7083768bc60bc21d0ac206f184cf9a91ecf4) Thanks [@drwpow](https://github.com/drwpow)! - Add light and dark mode CSS
26 |
27 | - [`934d708`](https://github.com/terrazzoapp/tiles/commit/934d7083768bc60bc21d0ac206f184cf9a91ecf4) Thanks [@drwpow](https://github.com/drwpow)! - Add button colors, improve CodeBlock copy button
28 |
29 | ## 0.0.0
30 |
31 | Initial Release
32 |
--------------------------------------------------------------------------------
/packages/tiles/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 Drew Powers
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/packages/tiles/README.md:
--------------------------------------------------------------------------------
1 | # @terrazzo/tiles
2 |
3 | Terrazzo’s component library. Sizes enforced by [size-limit](https://www.npmjs.com/package/size-limit)
4 |
5 | ## Setup
6 |
7 | ```sh
8 | npm i @terrazzo/tiles
9 | ```
10 |
11 | ```tsx
12 | import { Button, Select, SubtleInput, Switch, TokenType, TrueGradient } from '@terrazzo/tiles';
13 | ```
14 |
--------------------------------------------------------------------------------
/packages/tiles/biome.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
3 | "extends": ["../../biome.json"],
4 | "linter": {
5 | "rules": {
6 | "a11y": {
7 | "useFocusableInteractive": "off",
8 | "noNoninteractiveTabindex": "off"
9 | }
10 | }
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/packages/tiles/rollup.config.js:
--------------------------------------------------------------------------------
1 | import ts from '@rollup/plugin-typescript';
2 | import css from 'rollup-plugin-import-css';
3 |
4 | /** @type {import("rollup").InputOptions} */
5 | export default {
6 | plugins: [
7 | css({
8 | output: 'all-components.css',
9 | }),
10 | ts({
11 | tsconfig: './tsconfig.build.json',
12 | }),
13 | ],
14 | input: 'src/index.ts',
15 | external: ['*'],
16 | output: {
17 | dir: './dist/',
18 | sourcemap: true,
19 | globals: {
20 | 'react/jsx-runtime': 'jsxRuntime',
21 | 'react-dom/client': 'ReactDOM',
22 | react: 'React',
23 | },
24 | },
25 | };
26 |
--------------------------------------------------------------------------------
/packages/tiles/src/Button/Button.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import type { ComponentProps } from 'react';
3 | import './Button.css';
4 |
5 | export interface ButtonProps extends Omit, 'size'> {
6 | /** default: "m" */
7 | size?: 's' | 'm';
8 | /** default: "primary" */
9 | variant?: 'lime' | 'blue' | 'orange' | 'secondary';
10 | }
11 |
12 | export default function Button({
13 | className,
14 | children,
15 | size = 'm',
16 | type = 'button',
17 | variant = 'secondary',
18 | ref,
19 | ...rest
20 | }: ButtonProps) {
21 | return (
22 |
30 | {children}
31 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/packages/tiles/src/ButtonLink/ButtonLink.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import type { ComponentProps } from 'react';
3 | import '../Button/Button.css'; // note: a component should NEVER import another’s styles, but this is a special case
4 |
5 | export interface ButtonLinkProps extends ComponentProps<'a'> {
6 | /** default: "m" */
7 | size?: 's' | 'm';
8 | /** default: "primary" */
9 | variant?: 'lime' | 'blue' | 'orange' | 'secondary' | 'tertiary';
10 | }
11 |
12 | export default function ButtonLink({
13 | className,
14 | children,
15 | size = 'm',
16 | variant = 'secondary',
17 | ref,
18 | ...rest
19 | }: ButtonLinkProps) {
20 | return (
21 |
22 | {children}
23 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/packages/tiles/src/CopyButton/CopyButton.css:
--------------------------------------------------------------------------------
1 | .tz-copy-button {
2 | --tz-copy-btn-size: 2rem;
3 |
4 | align-items: center;
5 | background-color: transparent;
6 | border: 1px solid var(--tz-border-1);
7 | border-radius: var(--tz-radius-300);
8 | color: var(--tz-icon-secondary);
9 | cursor: pointer;
10 | display: inline-flex;
11 | height: var(--tz-space-control-m);
12 | justify-content: center;
13 | min-width: var(--tz-space-control-m);
14 | outline: 2px solid transparent;
15 | padding: 0;
16 | transition: outline-color var(--tz-timing-default) var(--tz-ease-linear);
17 | width: var(--tz-space-control-m);
18 | z-index: 2;
19 |
20 | &:focus-visible {
21 | outline-color: var(--tz-nav-primary-highlight);
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/packages/tiles/src/CopyButton/CopyButton.tsx:
--------------------------------------------------------------------------------
1 | import { Check, Copy } from '@terrazzo/icons';
2 | import clsx from 'clsx';
3 | import { type ComponentProps, useRef, useState } from 'react';
4 | import './CopyButton.css';
5 |
6 | export interface CopyButtonProps extends Omit, 'children' | 'onClick'> {
7 | /** The text to copy to the clipboard */
8 | clipboardText: string;
9 | /**
10 | * Amount of time, in milliseconds, to show the checkmark.
11 | * @default: 1000
12 | */
13 | timeoutMS?: number;
14 | }
15 |
16 | export default function CopyButton({ className, clipboardText, timeoutMS = 1000, ...rest }: CopyButtonProps) {
17 | const [copied, setCopied] = useState(false);
18 | const copiedTO = useRef(undefined);
19 |
20 | return (
21 | {
25 | await navigator.clipboard.writeText(clipboardText);
26 | clearTimeout(copiedTO.current);
27 | setCopied(true);
28 | copiedTO.current = window.setTimeout(() => {
29 | setCopied(false);
30 | }, timeoutMS);
31 | }}
32 | {...rest}
33 | >
34 | {copied ?
36 | );
37 | }
38 |
--------------------------------------------------------------------------------
/packages/tiles/src/Demo/Demo.css:
--------------------------------------------------------------------------------
1 | .tz-demo {
2 | display: grid;
3 | }
4 |
5 | .tz-demo-canvas {
6 | padding: var(--tz-space-400);
7 | }
8 |
9 | .tz-demo-code {
10 | contain: inline-size;
11 | }
12 |
13 | .tz-demo-code-copy-wrapper {
14 | margin: 0;
15 | padding: 0;
16 | position: absolute;
17 | right: var(--tz-space-300);
18 | top: var(--tz-space-200);
19 | z-index: var(--tz-layer-nav);
20 | }
21 |
22 | .tz-demo-code-icon {
23 | opacity: 0.75;
24 | }
25 |
26 | .tz-demo-code-overflow {
27 | overflow-x: auto;
28 | }
29 |
--------------------------------------------------------------------------------
/packages/tiles/src/Demo/Demo.tsx:
--------------------------------------------------------------------------------
1 | import { type ComponentProps, useEffect, useState } from 'react';
2 | import type { CodeOptionsSingleTheme, CodeToHastOptions } from 'shiki';
3 | import './Demo.css';
4 | import CopyButton from '../CopyButton/CopyButton.js';
5 |
6 | const shiki = import('shiki');
7 |
8 | export interface DemoProps extends Omit, 'lang'> {
9 | /** Code to Highlight */
10 | code: string;
11 | lang?: CodeToHastOptions['lang'];
12 | theme?: CodeOptionsSingleTheme['theme'];
13 | }
14 |
15 | export default function Demo({ children, code, lang = 'tsx', theme = 'houston', ...rest }: DemoProps) {
16 | const [codeFormatted, setCodeFormatted] = useState('');
17 |
18 | useEffect(() => {
19 | shiki.then(async ({ codeToHtml }) => {
20 | const formatted = await codeToHtml(code, { lang, theme });
21 | setCodeFormatted(formatted);
22 | });
23 | }, [code, lang, theme]);
24 |
25 | return (
26 |
27 |
{children}
28 |
38 |
12 | {label}
13 | {children}
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/packages/tiles/src/Kbd/Kbd.css:
--------------------------------------------------------------------------------
1 | .tz-kbd {
2 | align-items: center;
3 | background-color: var(--tz-color-content-bg);
4 | border: 1px solid var(--tz-color-content-border);
5 | border-radius: var(--tz-radius-200);
6 | color: var(--tz-text-primary);
7 | cursor: default;
8 | display: inline-flex;
9 | font-family: var(--tz-font-mono);
10 | font-size: inherit;
11 | font-weight: var(--tz-font-body-font-weight);
12 | height: 1.5em;
13 | justify-content: center;
14 | letter-spacing: var(--tz-font-body-letter-spacing);
15 | line-height: inherit;
16 | padding: 0;
17 | user-select: none;
18 | width: 1.5em;
19 | }
20 |
--------------------------------------------------------------------------------
/packages/tiles/src/Kbd/Kbd.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import type { ComponentProps } from 'react';
3 | import './Kbd.css';
4 |
5 | export type KbdProps = ComponentProps<'kbd'>;
6 |
7 | export default function Kbd({ className, children, ...rest }: KbdProps) {
8 | return (
9 |
10 | {children}
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/packages/tiles/src/SubtleInput/SubtleInput.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import type { ComponentProps } from 'react';
3 | import './SubtleInput.css';
4 |
5 | const INPUT_MODE: Record['inputMode']> = {
6 | text: 'text',
7 | number: 'decimal',
8 | email: 'email',
9 | search: 'search',
10 | tel: 'tel',
11 | url: 'url',
12 | };
13 |
14 | export interface SubtleInputProps extends ComponentProps<'input'> {
15 | type: 'text' | 'number' | 'email' | 'search' | 'tel' | 'url';
16 | suffix?: string;
17 | }
18 |
19 | export default function SubtleInput({ className, suffix, ref, ...rest }: SubtleInputProps) {
20 | return (
21 |
22 | {suffix}
24 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/packages/tiles/src/Switch/Switch.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import { type ComponentProps, type ReactNode, useId } from 'react';
3 | import './Switch.css';
4 |
5 | export interface SwitchProps extends ComponentProps<'input'> {
6 | /** Accessible label for this toggle switch */
7 | label: ReactNode;
8 | }
9 |
10 | export default function Switch({ className, id: userID, label, ref, ...rest }: SwitchProps) {
11 | const randomID = useId();
12 | const id = userID ?? randomID;
13 |
14 | return (
15 |
16 |
26 | {label}
27 |
28 |
29 | );
30 | }
31 |
--------------------------------------------------------------------------------
/packages/tiles/src/TokenType/TokenType.css:
--------------------------------------------------------------------------------
1 | .tz-tokentype {
2 | align-items: center;
3 | display: flex;
4 | font-family: var(--tz-font-sans);
5 | font-size: var(--tz-font-body-font-size);
6 | font-weight: var(--tz-font-body-font-weight);
7 | gap: var(--tz-space-300);
8 | letter-spacing: var(--tz-font-body-letter-spacing);
9 | line-height: 1;
10 | }
11 |
12 | .tz-tokentype-icon {
13 | color: var(--tz-icon-secondary);
14 | height: 1em;
15 | width: 1em;
16 | }
17 |
--------------------------------------------------------------------------------
/packages/tiles/src/Tooltip/Tooltip.css:
--------------------------------------------------------------------------------
1 | .tz-tooltip-content {
2 | animation-duration: 400ms;
3 | background: var(--tz-color-content-bg-elevated);
4 | border: 1px solid var(--tz-color-content-border-elevated);
5 | border-radius: var(--tz-radius-2);
6 | box-shadow: var(--tz-shadow-300);
7 | color: var(--tz-text-secondary);
8 | font-family: var(--tz-font-sans);
9 | font-size: var(--tz-font-body-font-size);
10 | font-weight: var(--tz-font-body-font-weight);
11 | letter-spacing: var(--tz-font-body-letter-spacing);
12 | line-height: var(--tz-font-body-line-height);
13 | padding: var(--tz-space-300);
14 | user-select: none;
15 | will-change: transform, opacity;
16 | z-index: var(--tz-layer-popover);
17 |
18 | a {
19 | color: var(--tz-text-link-primary);
20 | }
21 | }
22 |
23 | .tz-tooltip-arrow {
24 | fill: var(--tz-color-content-bg-elevated);
25 | }
26 |
--------------------------------------------------------------------------------
/packages/tiles/src/TreeGrid/Item.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import { type ComponentProps, type ReactNode, useContext, useEffect } from 'react';
3 | import { NestedContext } from './Group.js';
4 | import { Context } from './Root.js';
5 |
6 | export interface ItemProps extends ComponentProps<'tr'> {
7 | /**
8 | * Unique ID for this item
9 | * ⚠️ must not conflict with any other items, or any parent groups!
10 | */
11 | id: string;
12 | actions?: ReactNode;
13 | hidden?: boolean;
14 | }
15 |
16 | export default function Item({ actions, children, className, hidden, id, ...rest }: ItemProps) {
17 | const { selected, registerID } = useContext(Context);
18 | const { level, isParentExpanded, parentID } = useContext(NestedContext);
19 |
20 | useEffect(() => {
21 | registerID(parentID, id);
22 | }, [parentID, id]);
23 |
24 | return (
25 |
34 |
35 | {children}
36 |
37 | {actions}
38 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/packages/tiles/src/TreeGrid/index.tsx:
--------------------------------------------------------------------------------
1 | import './TreeGrid.css';
2 |
3 | export * from './Group.js';
4 | export { default as Group } from './Group.js';
5 | export * from './Item.js';
6 | export { default as Item } from './Item.js';
7 | export * from './Root.js';
8 | export { default as Root } from './Root.js';
9 |
--------------------------------------------------------------------------------
/packages/tiles/src/hooks/resize-observer.ts:
--------------------------------------------------------------------------------
1 | import { type MutableRefObject, useEffect, useState } from 'react';
2 |
3 | /** Use performant Resize Observer */
4 | export default function useResizeObserver>(el: T): DOMRect {
5 | const [domRect, setDomRect] = useState({
6 | width: 0,
7 | height: 0,
8 | x: 0,
9 | y: 0,
10 | left: 0,
11 | top: 0,
12 | right: 0,
13 | bottom: 0,
14 | } as DOMRect);
15 | useEffect(() => {
16 | if (!el.current) {
17 | return;
18 | }
19 | const ro = new ResizeObserver(([entry]) => {
20 | if (entry) {
21 | setDomRect(entry.contentRect);
22 | }
23 | });
24 | ro.observe(el.current);
25 | return () => {
26 | ro.disconnect();
27 | };
28 | }, [el.current]);
29 | return domRect;
30 | }
31 |
--------------------------------------------------------------------------------
/packages/tiles/src/lib/number.test.ts:
--------------------------------------------------------------------------------
1 | import { describe, expect, it } from 'vitest';
2 | import { clamp, snap } from './number.js';
3 |
4 | describe('clamp', () => {
5 | it('basic', () => {
6 | expect(clamp(0.5, 0, 1)).toBe(0.5);
7 | expect(clamp(1.5, 0, 1)).toBe(1);
8 | expect(clamp(-1, 0, 1)).toBe(0);
9 | });
10 | });
11 |
12 | describe('snap', () => {
13 | it('basic', () => {
14 | expect(snap(0.5, 0.1)).toBe(0.5);
15 | expect(snap(342, 1)).toBe(342);
16 | expect(snap(342.000001, 0.01)).toBe(342);
17 | expect(snap(0.5, 1)).toBe(1);
18 | expect(snap(0.1 + 0.2, 0.1)).toBe(0.3);
19 | });
20 | });
21 |
--------------------------------------------------------------------------------
/packages/tiles/src/lib/number.ts:
--------------------------------------------------------------------------------
1 | /** Clamp a number between 2 values */
2 | export function clamp(value: number, min: number, max: number) {
3 | if (typeof value !== 'number') {
4 | return value;
5 | }
6 | return Math.min(Math.max(value, min), max);
7 | }
8 |
9 | /** Snap a number to n decimal places */
10 | export function snap(value: number, precision: number) {
11 | if (typeof value !== 'number' || precision <= 0 || precision > 1 || value % 1 === 0) {
12 | return value;
13 | }
14 | const p = 1 / precision;
15 | return Math.round(value * p) / p;
16 | }
17 |
--------------------------------------------------------------------------------
/packages/tiles/src/lib/set.ts:
--------------------------------------------------------------------------------
1 | export function addToSet(newValue: T) {
2 | return (current: Set) => new Set([...current, newValue]);
3 | }
4 |
5 | export function removeFromSet(oldValue: T) {
6 | return (current: Set) => new Set([...current].filter((v) => v !== oldValue));
7 | }
8 |
--------------------------------------------------------------------------------
/packages/tiles/src/types.d.ts:
--------------------------------------------------------------------------------
1 | import 'react';
2 |
3 | declare module 'react' {
4 | interface CSSProperties {
5 | [key: `--${string}`]: string | number | undefined;
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/packages/tiles/stylelint.config.js:
--------------------------------------------------------------------------------
1 | import base from '../../stylelint.config.js';
2 |
3 | /** @type {import('stylelint').Config} */
4 | export default {
5 | ...base,
6 | };
7 |
--------------------------------------------------------------------------------
/packages/tiles/tsconfig.build.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "module": "NodeNext",
5 | "moduleResolution": "nodenext"
6 | },
7 | "exclude": ["**/__test__/**", "**/*.test.*"]
8 | }
9 |
--------------------------------------------------------------------------------
/packages/tiles/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.react.json",
3 | "compilerOptions": {
4 | "baseUrl": "src",
5 | "outDir": "dist"
6 | },
7 | "include": ["./src/"]
8 | }
9 |
--------------------------------------------------------------------------------
/packages/tiles/vite.config.ts:
--------------------------------------------------------------------------------
1 | import react from '@vitejs/plugin-react-swc';
2 | import { defineConfig } from 'vitest/config';
3 |
4 | /** @see https://vitejs.dev/config/ */
5 | export default defineConfig({
6 | plugins: [react({ devTarget: 'esnext' })],
7 | test: {
8 | environment: 'jsdom',
9 | restoreMocks: true,
10 | },
11 | });
12 |
--------------------------------------------------------------------------------
/packages/token-lab/.gitignore:
--------------------------------------------------------------------------------
1 | public/monaco-editor/
2 |
--------------------------------------------------------------------------------
/packages/token-lab/.npmignore:
--------------------------------------------------------------------------------
1 | *.test.*
2 | .size-limit.js
3 | .turbo
4 | biome.*
5 | rollup.*
6 | stylelint.*
7 | src/**
8 | tsconfig.*
9 | vite.*
10 | vitest.*
11 |
--------------------------------------------------------------------------------
/packages/token-lab/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # @terrazzo/token-lab
2 |
--------------------------------------------------------------------------------
/packages/token-lab/README.md:
--------------------------------------------------------------------------------
1 | # @terrazzo/token-lab
2 |
3 | Tokens.json editor and viewer.
4 |
5 | ## Setup
6 |
7 | ```sh
8 | pnpm
9 | ```
10 |
11 | ```tsx
12 | import TokenLab from '@terrazzo/token-lab';
13 | import tokens from './tokens.json' with { type: 'json' };
14 |
15 | Token Lab: build, edit, and customize DTCG tokens.json
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/packages/token-lab/public/assets/terrazzo-logo.svg:
--------------------------------------------------------------------------------
1 |
14 |
15 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/packages/token-lab/src/components/CodePanel/CodePanel.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | position: relative;
3 | z-index: 10;
4 | }
5 |
6 | .btn {
7 | align-items: center;
8 | background: none;
9 | border: none;
10 | color: inherit;
11 | cursor: pointer;
12 | display: flex;
13 | font-size: 1rem;
14 | height: 3rem;
15 | justify-content: center;
16 | width: 3rem;
17 |
18 | svg {
19 | height: 1.25rem;
20 | width: 1.25rem;
21 | }
22 | }
23 |
24 | .btnClose {
25 | height: 2rem;
26 | width: 2rem;
27 |
28 | svg {
29 | height: 1rem;
30 | width: 1rem;
31 | }
32 | }
33 |
34 | .panel {
35 | background-color: #202020;
36 | border: var(--tz-border-2);
37 | bottom: 0;
38 | display: grid;
39 | grid-template-rows: 2rem auto;
40 | height: 100vh;
41 | position: fixed;
42 | right: 0;
43 | top: 0;
44 | width: 40rem;
45 |
46 | > * {
47 | height: 100%;
48 | width: 100%;
49 | }
50 |
51 | &[hidden] {
52 | display: none;
53 | }
54 | }
55 |
56 | .menu {
57 | align-items: center;
58 | background-color: var(--tz-color-bg-2);
59 | border-bottom: var(--tz-border-2);
60 | display: flex;
61 | justify-content: space-between;
62 | }
63 |
64 | .title {
65 | align-items: center;
66 | display: inline-flex;
67 | font-family: var(--tz-monospace);
68 | font-size: 0.75rem;
69 | margin-right: auto;
70 | padding-inline: 0.5rem;
71 | }
72 |
--------------------------------------------------------------------------------
/packages/token-lab/src/components/CodePanel/CodePanel.module.d.css.ts:
--------------------------------------------------------------------------------
1 | declare const classNames: {
2 | readonly container: 'container';
3 | readonly btn: 'btn';
4 | readonly btnClose: 'btnClose';
5 | readonly panel: 'panel';
6 | readonly menu: 'menu';
7 | readonly title: 'title';
8 | };
9 | export default classNames;
10 |
--------------------------------------------------------------------------------
/packages/token-lab/src/components/EditableColorToken/EditableColorToken.module.d.css.ts:
--------------------------------------------------------------------------------
1 | declare const classNames: {
2 | readonly container: 'container';
3 | readonly swatch: 'swatch';
4 | readonly popover: 'popover';
5 | readonly components: 'components';
6 | readonly colorSpaceDropdown: 'colorSpaceDropdown';
7 | readonly 'tz-select-item-inner': 'tz-select-item-inner';
8 | readonly 'tz-select-item-icon': 'tz-select-item-icon';
9 | readonly colorSpaceDropdownItem: 'colorSpaceDropdownItem';
10 | readonly channel: 'channel';
11 | readonly alpha: 'alpha';
12 | };
13 | export default classNames;
14 |
--------------------------------------------------------------------------------
/packages/token-lab/src/components/EditableToken/EditableToken.module.css:
--------------------------------------------------------------------------------
1 | .cell {
2 | border-bottom: var(--tz-border-3);
3 | border-right: var(--tz-border-3);
4 | font-family: var(--tz-font-sans);
5 | font-size: var(--tz-font-body-font-size);
6 | font-variation-settings: var(--tz-font-body-font-variation-settings);
7 | font-weight: var(--tz-font-body-font-weight);
8 | letter-spacing: var(--tz-font-body-letter-spacing);
9 | line-height: var(--tz-font-body-line-height);
10 | padding: 0.5rem;
11 | }
12 |
13 | .code {
14 | font-family: var(--tz-font-mono);
15 | font-size: 0.75rem;
16 | }
17 |
--------------------------------------------------------------------------------
/packages/token-lab/src/components/EditableToken/EditableToken.module.d.css.ts:
--------------------------------------------------------------------------------
1 | declare const classNames: {
2 | readonly cell: 'cell';
3 | readonly code: 'code';
4 | };
5 | export default classNames;
6 |
--------------------------------------------------------------------------------
/packages/token-lab/src/components/EditableToken/EditableToken.tsx:
--------------------------------------------------------------------------------
1 | import type { TokenNormalized } from '@terrazzo/token-tools';
2 | import clsx from 'clsx';
3 | import EditableColorToken from '../EditableColorToken/EditableColorToken.js';
4 | import c from './EditableToken.module.css';
5 |
6 | export interface TokenProps {
7 | token: TokenNormalized;
8 | /** ordered listing of modes ("." is always first, even if omitted) */
9 | modes?: string[];
10 | }
11 |
12 | export default function EditableToken({ token, modes = ['.'] }: TokenProps) {
13 | const localName = token.id.replace(`${token.group.id}.`, '');
14 |
15 | switch (token.$type) {
16 | case 'color': {
17 | return (
18 |
19 |
20 | {localName}
21 |
22 | {modes.map((mode) => (
23 |
24 |
26 | ))}
27 |
28 | );
29 | }
30 | default: {
31 | return (
32 |
33 |
34 | {localName}
35 |
36 | {modes.map((mode) => (
37 |
38 | {mode in token.mode && JSON.stringify(token.mode[mode])}
39 |
40 | ))}
41 |
42 | );
43 | }
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/packages/token-lab/src/components/MainNav/MainNav.module.css:
--------------------------------------------------------------------------------
1 | .header {
2 | align-items: center;
3 | border-bottom: var(--tz-border-3);
4 | display: flex;
5 | height: var(--main-nav-height);
6 | user-select: none;
7 | }
8 |
9 | .logo {
10 | height: 1.25rem;
11 | margin-inline-start: 1rem;
12 | width: 1.25rem;
13 | }
14 |
15 | .codePanel {
16 | margin-inline-start: auto;
17 | }
18 |
19 | .title {
20 | font-size: 1rem;
21 | font-weight: 800;
22 | line-height: 1;
23 | margin: 0;
24 | padding-inline-start: 0.375rem;
25 | }
26 |
--------------------------------------------------------------------------------
/packages/token-lab/src/components/MainNav/MainNav.module.d.css.ts:
--------------------------------------------------------------------------------
1 | declare const classNames: {
2 | readonly header: 'header';
3 | readonly logo: 'logo';
4 | readonly codePanel: 'codePanel';
5 | readonly title: 'title';
6 | };
7 | export default classNames;
8 |
--------------------------------------------------------------------------------
/packages/token-lab/src/components/TokensEditor/TokensEditor.module.css:
--------------------------------------------------------------------------------
1 | .multipleGroups {
2 | padding: 1.5rem;
3 | }
4 |
5 | .group {
6 | margin-block: 1.5rem;
7 | padding-inline: 1.5rem;
8 | }
9 |
10 | .groupTitle {
11 | font-family: var(--tz-font-sans);
12 | font-size: var(--tz-font-heading4-font-size);
13 | font-variation-settings: var(--tz-font-heading4-font-variation-settings);
14 | font-weight: var(--tz-font-heading4-font-weight);
15 | letter-spacing: var(--tz-font-heading4-letter-spacing);
16 | line-height: var(--tz-font-heading4-line-height);
17 | }
18 |
19 | .tokenGrid {
20 | border-collapse: collapse;
21 | border-left: var(--tz-border-3);
22 | border-top: var(--tz-border-3);
23 | text-align: left;
24 | width: 100%;
25 | }
26 |
27 | .colheader {
28 | border-bottom: var(--tz-border-3);
29 | border-right: var(--tz-border-3);
30 | font-family: var(--tz-font-sans);
31 | font-size: var(--tz-font-body-strong-font-size);
32 | font-variation-settings: var(--tz-font-body-strong-font-variation-settings);
33 | font-weight: var(--tz-font-body-strong-font-weight);
34 | letter-spacing: var(--tz-font-body-strong-letter-spacing);
35 | line-height: var(--tz-font-body-strong-line-height);
36 | padding: 0.5rem;
37 | }
38 |
--------------------------------------------------------------------------------
/packages/token-lab/src/components/TokensEditor/TokensEditor.module.d.css.ts:
--------------------------------------------------------------------------------
1 | declare const classNames: {
2 | readonly multipleGroups: 'multipleGroups';
3 | readonly group: 'group';
4 | readonly groupTitle: 'groupTitle';
5 | readonly tokenGrid: 'tokenGrid';
6 | readonly colheader: 'colheader';
7 | };
8 | export default classNames;
9 |
--------------------------------------------------------------------------------
/packages/token-lab/src/components/TokensNav/TokensNav.module.d.css.ts:
--------------------------------------------------------------------------------
1 | declare const classNames: {
2 | readonly container: 'container';
3 | readonly tree: 'tree';
4 | readonly error: 'error';
5 | readonly search: 'search';
6 | readonly searchIcon: 'searchIcon';
7 | readonly tokenIcon: 'tokenIcon';
8 | };
9 | export default classNames;
10 |
--------------------------------------------------------------------------------
/packages/token-lab/src/hooks/navigation.ts:
--------------------------------------------------------------------------------
1 | import { atom, useAtom } from 'jotai';
2 | import { useEffect } from 'react';
3 |
4 | export interface NavState {
5 | selection: string[];
6 | }
7 |
8 | /**
9 | * Naviation
10 | * The simple version of this app only uses a single route with clientside search params, so we can
11 | * implement routing using a couple Jotai atoms without the need for a heavier router.
12 | */
13 | export default function useNavigation() {
14 | const [state, setState] = useAtom($state);
15 |
16 | // keep search params synced with state
17 | useEffect(() => {
18 | const params = new URLSearchParams(window.location.search);
19 | params.set('selected', serializeSelected(state.selection));
20 | window.history.replaceState({}, '', `${window.location.pathname}?${params}`);
21 | }, [state]);
22 |
23 | return [state, setState] as const;
24 | }
25 |
26 | function serializeSelected(selected: string[]) {
27 | return selected.join(',');
28 | }
29 |
30 | function deserializeSelected(selected: string) {
31 | return selected.split(',');
32 | }
33 |
34 | const rawParams = new URLSearchParams(typeof window !== 'undefined' ? window.location.search : '');
35 | const parsed: NavState = {
36 | selection: deserializeSelected(rawParams.get('selected') || ''),
37 | };
38 |
39 | const $state = atom(parsed);
40 |
--------------------------------------------------------------------------------
/packages/token-lab/src/index.tsx:
--------------------------------------------------------------------------------
1 | import { createRoot } from 'react-dom/client';
2 | import App from './app.js';
3 |
4 | const root = createRoot(document.getElementById('app')!);
5 | root.render(;
9 | } = {},
10 | ): Promise {
11 | return await new Promise((resolve, reject) => {
12 | const dbReq = window.indexedDB.open(name, version);
13 | dbReq.onerror = (evt) => {
14 | reject(`IndexedDB not supported. Unable to save tokens!\nError: ${(evt.target as IDBOpenDBRequest).error}`);
15 | };
16 | if (onupgradeneeded) {
17 | dbReq.onupgradeneeded = onupgradeneeded;
18 | }
19 | dbReq.onsuccess = () => {
20 | resolve(dbReq!.result);
21 | };
22 | });
23 | }
24 |
--------------------------------------------------------------------------------
/packages/token-lab/src/styles/global.css:
--------------------------------------------------------------------------------
1 | html {
2 | height: 100%;
3 | }
4 |
5 | body {
6 | background-color: var(--tz-color-bg-1);
7 | color: var(--tz-color-text-1);
8 | font-family: var(--tz-font-sans);
9 | font-size: 100%;
10 | font-variant-numeric: tabular-nums;
11 | font-variation-settings: var(--tz-font-body-font-variation-settings);
12 | font-weight: var(--tz-font-body-font-weight);
13 | line-height: 1;
14 | margin: 0;
15 | }
16 |
17 | *,
18 | *::before,
19 | *::after {
20 | box-sizing: border-box;
21 | outline: 1px solid transparent;
22 |
23 | &:focus-visible {
24 | outline-color: var(--tz-color-base-lime-800);
25 | }
26 | }
27 |
28 | ::selection {
29 | background-color: var(--tz-color-base-lime-800);
30 | color: var(--tz-color-base-gray-100);
31 | }
32 |
33 | code,
34 | pre {
35 | font-family: var(--tz-font-monospace);
36 | }
37 |
--------------------------------------------------------------------------------
/packages/token-lab/src/types/react.d.ts:
--------------------------------------------------------------------------------
1 | import 'react';
2 |
3 | declare module 'react' {
4 | interface CSSProperties {
5 | [key: `--${string}`]: string | number | undefined;
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/packages/token-lab/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.react.json",
3 | "compilerOptions": {
4 | "baseUrl": "src",
5 | "outDir": "dist"
6 | },
7 | "include": ["./src/"]
8 | }
9 |
--------------------------------------------------------------------------------
/packages/token-lab/vite.config.ts:
--------------------------------------------------------------------------------
1 | import react from '@vitejs/plugin-react-swc';
2 | import { defineConfig } from 'vite';
3 | import sassDts from 'vite-plugin-sass-dts';
4 |
5 | export default defineConfig({
6 | plugins: [react(), sassDts({ esmExport: true })],
7 | });
8 |
--------------------------------------------------------------------------------
/packages/token-tools/.npmignore:
--------------------------------------------------------------------------------
1 | .turbo
2 | biome.json
3 | src/**
4 | test/**
5 | tsconfig.*
6 | vitest.*
7 |
--------------------------------------------------------------------------------
/packages/token-tools/README.md:
--------------------------------------------------------------------------------
1 | # @terrazzo/token-tools
2 |
3 | ## Install
4 |
5 | ```sh
6 | npm install @terrazzo/token-tools
7 | ```
8 |
--------------------------------------------------------------------------------
/packages/token-tools/biome.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
3 | "extends": ["../../biome.json"],
4 | "files": {
5 | "include": ["./src/", "./test/"]
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/packages/token-tools/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@terrazzo/token-tools",
3 | "version": "0.8.0",
4 | "description": "Various utilities for token types",
5 | "license": "MIT",
6 | "type": "module",
7 | "author": {
8 | "name": "Drew Powers",
9 | "email": "drew@pow.rs"
10 | },
11 | "keywords": [
12 | "design tokens",
13 | "dtcg",
14 | "cli",
15 | "w3c",
16 | "design system",
17 | "typescript",
18 | "sass",
19 | "css",
20 | "style tokens",
21 | "style system",
22 | "linting",
23 | "lint"
24 | ],
25 | "repository": {
26 | "type": "git",
27 | "url": "https://github.com/terrazzoapp/terrazzo.git",
28 | "directory": "./packages/token-tools/"
29 | },
30 | "main": "./dist/index.js",
31 | "exports": {
32 | ".": "./dist/index.js",
33 | "./css": "./dist/css.js",
34 | "./js": "./dist/js.js",
35 | "./package.json": "./package.json"
36 | },
37 | "scripts": {
38 | "build": "rolldown -c && attw --profile esm-only --pack .",
39 | "dev": "rolldown -c -w",
40 | "lint": "pnpm --filter @terrazzo/token-tools run \"/^lint:(js|ts)/\"",
41 | "lint:js": "biome check .",
42 | "lint:ts": "tsc --noEmit",
43 | "format": "biome check --fix --unsafe .",
44 | "test": "vitest run"
45 | },
46 | "dependencies": {
47 | "@humanwhocodes/momoa": "^3.3.8",
48 | "culori": "^4.0.1",
49 | "wildcard-match": "^5.1.4"
50 | },
51 | "devDependencies": {
52 | "@types/culori": "^4.0.0"
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/packages/token-tools/rolldown.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'rolldown';
2 | import { dts } from 'rolldown-plugin-dts';
3 |
4 | export default defineConfig({
5 | input: {
6 | index: './src/index.ts',
7 | css: './src/css/index.ts',
8 | js: './src/js/index.ts',
9 | },
10 | plugins: [dts()],
11 | external: ['@humanwhocodes/momoa', 'culori', 'culori/css', 'culori/fn', 'wildcard-match'],
12 | output: {
13 | dir: 'dist',
14 | format: 'es',
15 | sourcemap: true,
16 | },
17 | });
18 |
--------------------------------------------------------------------------------
/packages/token-tools/src/css/boolean.ts:
--------------------------------------------------------------------------------
1 | import type { BooleanTokenNormalized } from '../types.js';
2 | import type { TransformCSSValueOptions } from './css-types.js';
3 | import { defaultAliasTransform } from './lib.js';
4 |
5 | /** Convert boolean value to CSS string */
6 | export function transformBoolean(
7 | token: BooleanTokenNormalized,
8 | { tokensSet, transformAlias = defaultAliasTransform }: TransformCSSValueOptions,
9 | ): string {
10 | if (token.aliasChain?.[0]) {
11 | return transformAlias(tokensSet[token.aliasChain[0]]!);
12 | }
13 | return token.$value === true ? '1' : '0';
14 | }
15 |
--------------------------------------------------------------------------------
/packages/token-tools/src/css/css-types.ts:
--------------------------------------------------------------------------------
1 | import type { TokenNormalizedSet } from '../types.js';
2 | import type { IDGenerator } from './lib.js';
3 |
4 | export interface TransformCSSValueOptions {
5 | /** Complete set of tokens (needed to resolve full and partial aliases) */
6 | tokensSet: TokenNormalizedSet;
7 | transformAlias?: IDGenerator;
8 | /** Options for color tokens */
9 | color?: {
10 | /** Output legacy hex-6 and hex-8 */
11 | legacyHex?: boolean;
12 | };
13 | }
14 |
--------------------------------------------------------------------------------
/packages/token-tools/src/css/cubic-bezier.ts:
--------------------------------------------------------------------------------
1 | import type { CubicBezierTokenNormalized } from '../types.js';
2 | import type { TransformCSSValueOptions } from './css-types.js';
3 | import { defaultAliasTransform } from './lib.js';
4 |
5 | /** Convert cubicBezier value to CSS */
6 | export function transformCubicBezier(token: CubicBezierTokenNormalized, options: TransformCSSValueOptions): string {
7 | const { tokensSet, transformAlias = defaultAliasTransform } = options;
8 | if (token.aliasChain?.[0]) {
9 | return transformAlias(tokensSet[token.aliasChain[0]]!);
10 | }
11 | return `cubic-bezier(${token.$value
12 | .map((v, i) => (token.partialAliasOf?.[i] ? transformAlias(tokensSet[token.partialAliasOf[i]]!) : v))
13 | .join(', ')})`;
14 | }
15 |
--------------------------------------------------------------------------------
/packages/token-tools/src/css/dimension.ts:
--------------------------------------------------------------------------------
1 | import type { DimensionTokenNormalized } from '../types.js';
2 | import type { TransformCSSValueOptions } from './css-types.js';
3 | import { defaultAliasTransform } from './lib.js';
4 |
5 | /** Convert dimension value to CSS */
6 | export function transformDimension(token: DimensionTokenNormalized, options: TransformCSSValueOptions): string {
7 | const { tokensSet, transformAlias = defaultAliasTransform } = options;
8 | if (token.aliasChain?.[0]) {
9 | return transformAlias(tokensSet[token.aliasChain[0]]!);
10 | }
11 |
12 | return token.$value.value === 0 ? '0' : `${token.$value.value}${token.$value.unit}`;
13 | }
14 |
--------------------------------------------------------------------------------
/packages/token-tools/src/css/duration.ts:
--------------------------------------------------------------------------------
1 | import type { DurationTokenNormalized } from '../types.js';
2 | import type { TransformCSSValueOptions } from './css-types.js';
3 | import { defaultAliasTransform } from './lib.js';
4 |
5 | /** Convert duration value to CSS */
6 | export function transformDuration(token: DurationTokenNormalized, options: TransformCSSValueOptions): string {
7 | const { tokensSet, transformAlias = defaultAliasTransform } = options;
8 | if (token.aliasChain?.[0]) {
9 | return transformAlias(tokensSet[token.aliasChain[0]]!);
10 | }
11 |
12 | return `${token.$value.value}${token.$value.unit}`;
13 | }
14 |
--------------------------------------------------------------------------------
/packages/token-tools/src/css/font-family.ts:
--------------------------------------------------------------------------------
1 | import type { FontFamilyTokenNormalized } from '../types.js';
2 | import type { TransformCSSValueOptions } from './css-types.js';
3 | import { defaultAliasTransform } from './lib.js';
4 |
5 | const FONT_NAME_KEYWORD = /^[a-z-]+$/;
6 |
7 | export function transformFontFamily(token: FontFamilyTokenNormalized, options: TransformCSSValueOptions): string {
8 | const { tokensSet, transformAlias = defaultAliasTransform } = options;
9 | if (token.aliasChain?.[0]) {
10 | return transformAlias(tokensSet[token.aliasChain[0]]!);
11 | }
12 | return token.$value.map((fontName) => (FONT_NAME_KEYWORD.test(fontName) ? fontName : `"${fontName}"`)).join(', ');
13 | }
14 |
--------------------------------------------------------------------------------
/packages/token-tools/src/css/font-weight.ts:
--------------------------------------------------------------------------------
1 | import type { FontWeightTokenNormalized } from '../types.js';
2 | import type { TransformCSSValueOptions } from './css-types.js';
3 | import { defaultAliasTransform } from './lib.js';
4 |
5 | /** Convert fontWeight value to CSS */
6 | export function transformFontWeight(token: FontWeightTokenNormalized, options: TransformCSSValueOptions): string {
7 | const { tokensSet, transformAlias = defaultAliasTransform } = options;
8 | if (token.aliasChain?.[0]) {
9 | return transformAlias(tokensSet[token.aliasChain[0]]!);
10 | }
11 | return String(token.$value);
12 | }
13 |
--------------------------------------------------------------------------------
/packages/token-tools/src/css/link.ts:
--------------------------------------------------------------------------------
1 | import type { LinkTokenNormalized } from '../types.js';
2 | import type { TransformCSSValueOptions } from './css-types.js';
3 | import { defaultAliasTransform } from './lib.js';
4 |
5 | /** Convert link value to CSS */
6 | export function transformLink(token: LinkTokenNormalized, options: TransformCSSValueOptions): string {
7 | const { tokensSet, transformAlias = defaultAliasTransform } = options;
8 | if (token.aliasChain?.[0]) {
9 | return transformAlias(tokensSet[token.aliasChain[0]]!);
10 | }
11 | return `url("${token.$value}")`;
12 | }
13 |
--------------------------------------------------------------------------------
/packages/token-tools/src/css/number.ts:
--------------------------------------------------------------------------------
1 | import type { NumberTokenNormalized } from '../types.js';
2 | import type { TransformCSSValueOptions } from './css-types.js';
3 | import { defaultAliasTransform } from './lib.js';
4 |
5 | /** Convert number value to CSS */
6 | export function transformNumber(token: NumberTokenNormalized, options: TransformCSSValueOptions): string {
7 | const { tokensSet, transformAlias = defaultAliasTransform } = options;
8 | if (token.aliasChain?.[0]) {
9 | return transformAlias(tokensSet[token.aliasChain[0]]!);
10 | }
11 | return String(token.$value);
12 | }
13 |
--------------------------------------------------------------------------------
/packages/token-tools/src/css/string.ts:
--------------------------------------------------------------------------------
1 | import type { StringTokenNormalized } from '../types.js';
2 | import type { TransformCSSValueOptions } from './css-types.js';
3 | import { defaultAliasTransform } from './lib.js';
4 |
5 | /** Convert string value to CSS */
6 | export function transformString(token: StringTokenNormalized, options: TransformCSSValueOptions): string {
7 | const { tokensSet, transformAlias = defaultAliasTransform } = options;
8 | if (token.aliasChain?.[0]) {
9 | return transformAlias(tokensSet[token.aliasChain[0]]!);
10 | }
11 | // this seems like a useless function—because it is—but this is a placeholder
12 | // that can handle unexpected values in the future should any arise
13 | return String(token.$value);
14 | }
15 |
--------------------------------------------------------------------------------
/packages/token-tools/src/css/stroke-style.ts:
--------------------------------------------------------------------------------
1 | import type { StrokeStyleTokenNormalized } from '../types.js';
2 | import type { TransformCSSValueOptions } from './css-types.js';
3 | import { defaultAliasTransform } from './lib.js';
4 |
5 | /** Convert strokeStyle value to CSS */
6 | export function transformStrokeStyle(token: StrokeStyleTokenNormalized, options: TransformCSSValueOptions): string {
7 | const { tokensSet, transformAlias = defaultAliasTransform } = options;
8 | if (token.aliasChain?.[0]) {
9 | return transformAlias(tokensSet[token.aliasChain[0]]!);
10 | }
11 | return typeof token.$value === 'string' ? token.$value : 'dashed'; // CSS doesn’t have `dash-array`; it’s just "dashed"
12 | }
13 |
--------------------------------------------------------------------------------
/packages/token-tools/src/css/transition.ts:
--------------------------------------------------------------------------------
1 | import type { CubicBezierTokenNormalized, DurationTokenNormalized, TransitionTokenNormalized } from '../types.js';
2 | import type { TransformCSSValueOptions } from './css-types.js';
3 | import { transformCubicBezier } from './cubic-bezier.js';
4 | import { transformDuration } from './duration.js';
5 | import { defaultAliasTransform } from './lib.js';
6 |
7 | /** Convert transition value to shorthand */
8 | export function transformTransition(token: TransitionTokenNormalized, options: TransformCSSValueOptions) {
9 | const { tokensSet, transformAlias = defaultAliasTransform } = options;
10 | if (token.aliasChain?.[0]) {
11 | return transformAlias(tokensSet[token.aliasChain[0]]!);
12 | }
13 |
14 | const duration = token.partialAliasOf?.duration
15 | ? transformAlias(tokensSet[token.partialAliasOf.duration]!)
16 | : transformDuration({ $value: token.$value.duration } as DurationTokenNormalized, options);
17 | const delay = token.partialAliasOf?.delay
18 | ? transformAlias(tokensSet[token.partialAliasOf.delay]!)
19 | : transformDuration({ $value: token.$value.delay } as DurationTokenNormalized, options);
20 | const timingFunction = token.partialAliasOf?.timingFunction
21 | ? transformAlias(tokensSet[token.partialAliasOf.timingFunction]!)
22 | : transformCubicBezier({ $value: token.$value.timingFunction } as CubicBezierTokenNormalized, options);
23 |
24 | return `${duration} ${delay} ${timingFunction}`;
25 | }
26 |
--------------------------------------------------------------------------------
/packages/token-tools/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './color.js';
2 | export * from './id.js';
3 | export * from './string.js';
4 | export * from './transform.js';
5 | export * from './types.js';
6 |
--------------------------------------------------------------------------------
/packages/token-tools/src/js/index.ts:
--------------------------------------------------------------------------------
1 | import type { TokenNormalized } from '../types.js';
2 |
3 | export interface TransformJSValueOptions {
4 | mode: string;
5 | /** indent space count */
6 | indent?: number;
7 | /** initial indent level */
8 | startingIndent?: number;
9 | }
10 |
11 | /**
12 | * Convert token value to a JS string via acorn/astring.
13 | */
14 | export function transformJSValue(
15 | token: T,
16 | { mode, indent = 2, startingIndent = 0 }: TransformJSValueOptions,
17 | ) {
18 | if (!(mode in token.mode)) {
19 | return;
20 | }
21 | const indentStart = startingIndent > 0 ? ' '.repeat(startingIndent ?? 2) : '';
22 |
23 | // note: since tokens are JSON-serializable to begin with, using
24 | // JSON.stringify generates the same output as an AST parser/generator would
25 | // but faster and without the added overhead (even acorn/astring leave object
26 | // keys quoted).
27 |
28 | // TODO: use @biomejs/js-api when it’s stable for pretty formatting
29 |
30 | return JSON.stringify(token.mode[mode]!.$value, undefined, indent).replace(/\n/g, `\n${indentStart}`);
31 | }
32 |
--------------------------------------------------------------------------------
/packages/token-tools/src/transform.ts:
--------------------------------------------------------------------------------
1 | export interface CustomTransformOptions {
2 | /** Token $type */
3 | $type: string;
4 | }
5 |
6 | /** Give a user pertinent feedback if they override a transform incorrectly */
7 | export function validateCustomTransform(value: unknown, { $type }: CustomTransformOptions) {
8 | if (value) {
9 | if ((typeof value !== 'string' && typeof value !== 'object') || Array.isArray(value)) {
10 | throw new Error(
11 | `transform(): expected string or Object of strings, received ${Array.isArray(value) ? 'Array' : typeof value}`,
12 | );
13 | }
14 | switch ($type) {
15 | case 'typography': {
16 | if (typeof value !== 'object') {
17 | throw new Error('transform(): typography tokens must be an object of keys');
18 | }
19 | break;
20 | }
21 | }
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/packages/token-tools/test/types.test.ts:
--------------------------------------------------------------------------------
1 | import { describe, expectTypeOf, it } from 'vitest';
2 | import type { Group } from '../src/types.js';
3 |
4 | describe('types', () => {
5 | it('group', () => {
6 | const simpleGroup = {
7 | $description: 'group',
8 | color: {
9 | $type: 'color',
10 | $description: 'token',
11 | $value: '#000000',
12 | },
13 | } satisfies Group;
14 |
15 | expectTypeOf(simpleGroup).toMatchTypeOf();
16 | });
17 |
18 | it('nested groups', () => {
19 | const groupsWithCore = {
20 | $description: 'group',
21 | color: {
22 | $description: 'nested group',
23 | primary: {
24 | $type: 'color',
25 | $description: 'token',
26 | $value: '#000000',
27 | },
28 | },
29 | } satisfies Group;
30 |
31 | expectTypeOf(groupsWithCore).toMatchTypeOf();
32 |
33 | const groupsWithoutCore = {
34 | color: {
35 | primary: {
36 | $type: 'color',
37 | $value: '#000000',
38 | },
39 | },
40 | } satisfies Group;
41 |
42 | expectTypeOf(groupsWithoutCore).toMatchTypeOf();
43 | });
44 | });
45 |
--------------------------------------------------------------------------------
/packages/token-tools/tsconfig.build.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "exclude": ["test"]
4 | }
5 |
--------------------------------------------------------------------------------
/packages/token-tools/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.base.json",
3 | "compilerOptions": {
4 | "outDir": "dist"
5 | },
6 | "include": ["./src/", "./test/"]
7 | }
8 |
--------------------------------------------------------------------------------
/packages/token-tools/vitest.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vitest/config';
2 |
3 | export default defineConfig({
4 | test: {
5 | restoreMocks: true,
6 | },
7 | });
8 |
--------------------------------------------------------------------------------
/packages/token-tools/vitest.config.ts.timestamp-1718599329856-9fd330128a63e.mjs:
--------------------------------------------------------------------------------
1 | // vitest.config.ts
2 | import { defineConfig } from "file:///Users/drew/Sites/terrazzoapp/terrazzo/node_modules/.pnpm/vitest@1.6.0_@types+node@20.14.2/node_modules/vitest/dist/config.js";
3 | var vitest_config_default = defineConfig({
4 | test: {
5 | restoreMocks: true
6 | }
7 | });
8 | export {
9 | vitest_config_default as default
10 | };
11 | //# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZXN0LmNvbmZpZy50cyJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiY29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2Rpcm5hbWUgPSBcIi9Vc2Vycy9kcmV3L1NpdGVzL3RlcnJhenpvYXBwL3RlcnJhenpvL3BhY2thZ2VzL3Rva2VuLXRvb2xzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCIvVXNlcnMvZHJldy9TaXRlcy90ZXJyYXp6b2FwcC90ZXJyYXp6by9wYWNrYWdlcy90b2tlbi10b29scy92aXRlc3QuY29uZmlnLnRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9Vc2Vycy9kcmV3L1NpdGVzL3RlcnJhenpvYXBwL3RlcnJhenpvL3BhY2thZ2VzL3Rva2VuLXRvb2xzL3ZpdGVzdC5jb25maWcudHNcIjtpbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tICd2aXRlc3QvY29uZmlnJztcblxuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcbiAgdGVzdDoge1xuICAgIHJlc3RvcmVNb2NrczogdHJ1ZSxcbiAgfSxcbn0pO1xuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUF1VyxTQUFTLG9CQUFvQjtBQUVwWSxJQUFPLHdCQUFRLGFBQWE7QUFBQSxFQUMxQixNQUFNO0FBQUEsSUFDSixjQUFjO0FBQUEsRUFDaEI7QUFDRixDQUFDOyIsCiAgIm5hbWVzIjogW10KfQo=
12 |
--------------------------------------------------------------------------------
/packages/tokens/.gitignore:
--------------------------------------------------------------------------------
1 | !dist
2 |
--------------------------------------------------------------------------------
/packages/tokens/biome.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
3 | "extends": ["../../biome.json"]
4 | }
5 |
--------------------------------------------------------------------------------
/packages/tokens/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@terrazzo/tokens",
3 | "version": "0.1.0",
4 | "description": "Internal design tokens for @terrazzo/tiles",
5 | "type": "module",
6 | "author": {
7 | "name": "Drew Powers",
8 | "email": "drew@pow.rs"
9 | },
10 | "repository": {
11 | "type": "git",
12 | "url": "https://github.com/terrazzoapp/terrazzo.git",
13 | "directory": "./packages/tokens/"
14 | },
15 | "scripts": {
16 | "build": "tz build",
17 | "lint": "pnpm run lint:tokens",
18 | "lint:tokens": "tz check",
19 | "dev": "tz build --watch"
20 | },
21 | "devDependencies": {
22 | "@terrazzo/cli": "workspace:^",
23 | "@terrazzo/plugin-css": "workspace:^",
24 | "@terrazzo/token-tools": "workspace:^"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/packages/tokens/terrazzo.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from '@terrazzo/cli';
2 | import { makeCSSVar } from '@terrazzo/token-tools/css';
3 | import css from '@terrazzo/plugin-css';
4 |
5 | export default defineConfig({
6 | tokens: './tokens.json',
7 | outDir: './dist/',
8 | plugins: [
9 | css({
10 | variableName: (token) => makeCSSVar(token.id, { prefix: 'tz' }),
11 | modeSelectors: [
12 | {
13 | mode: 'light',
14 | selectors: ['@media (prefers-color-scheme: light)', '[data-color-mode="light"][data-color-mode="light"]'],
15 | },
16 | {
17 | mode: 'dark',
18 | selectors: ['@media (prefers-color-scheme: dark)', '[data-color-mode="dark"][data-color-mode="dark"]'],
19 | },
20 | ],
21 | }),
22 | ],
23 | });
24 |
--------------------------------------------------------------------------------
/packages/use-color/.npmignore:
--------------------------------------------------------------------------------
1 | *.test.*
2 | .size-limit.js
3 | .turbo
4 | biome.*
5 | vite.*
6 | vitest.*
7 | tsconfig.*
8 |
--------------------------------------------------------------------------------
/packages/use-color/.size-limit.js:
--------------------------------------------------------------------------------
1 | export default [{ ignore: ['culori'], path: './index.js', limit: '12 kB' }];
2 |
--------------------------------------------------------------------------------
/packages/use-color/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # @terrazzo/use-color
2 |
3 | ## 0.0.7
4 |
5 | ### Patch Changes
6 |
7 | - Bugfixes thanks to [@lilnasy](lilnasy)
8 |
--------------------------------------------------------------------------------
/packages/use-color/biome.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
3 | "extends": ["../../biome.json"],
4 | "linter": {
5 | "rules": {
6 | "correctness": {
7 | "useHookAtTopLevel": "off"
8 | }
9 | }
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/packages/use-color/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@terrazzo/use-color",
3 | "version": "0.1.0",
4 | "description": "React hook for memoizing and transforming any web-compatible color. Uses Culori.",
5 | "license": "MIT",
6 | "type": "module",
7 | "keywords": ["color", "color-module-4", "culori", "react", "hooks"],
8 | "author": {
9 | "name": "Drew Powers",
10 | "email": "drew@pow.rs"
11 | },
12 | "main": "./index.js",
13 | "homepage": "https://terrazzo.app/docs/components/color-picker",
14 | "repository": {
15 | "type": "git",
16 | "url": "https://github.com/terrazzoapp/terrazzo.git",
17 | "directory": "./packages/use-color/"
18 | },
19 | "scripts": {
20 | "build": "tsc --noEmit && size-limit",
21 | "format": "biome check --fix --unsafe .",
22 | "lint": "biome check .",
23 | "test": "vitest run"
24 | },
25 | "peerDependencies": {
26 | "react": "^19.0.0"
27 | },
28 | "dependencies": {
29 | "@terrazzo/token-tools": "workspace:^",
30 | "@types/culori": "^4.0.0",
31 | "culori": "^4.0.1"
32 | },
33 | "devDependencies": {
34 | "@size-limit/preset-small-lib": "^11.2.0",
35 | "@testing-library/jest-dom": "^6.6.3",
36 | "@testing-library/react": "^16.3.0",
37 | "@testing-library/user-event": "^14.6.1",
38 | "@types/react": "^19.1.1",
39 | "@types/react-dom": "^19.1.2",
40 | "@vitejs/plugin-react-swc": "^3.8.1",
41 | "react": "19.0.0",
42 | "react-dom": "19.0.0",
43 | "size-limit": "^11.2.0"
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/packages/use-color/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.react.json",
3 | "compilerOptions": {
4 | "baseUrl": "src",
5 | "noEmit": true,
6 | "outDir": "dist"
7 | },
8 | "include": ["./*.{js,ts}", "./index.test.tsx"]
9 | }
10 |
--------------------------------------------------------------------------------
/packages/use-color/vitest.config.ts:
--------------------------------------------------------------------------------
1 | import react from '@vitejs/plugin-react-swc';
2 | import { defineConfig } from 'vitest/config';
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | test: {
8 | environment: 'jsdom',
9 | restoreMocks: true,
10 | setupFiles: ['./vitest.setup.ts'],
11 | testTimeout: 15000,
12 | },
13 | });
14 |
--------------------------------------------------------------------------------
/packages/use-color/vitest.setup.ts:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom/vitest';
2 | import { cleanup } from '@testing-library/react';
3 | import { afterEach } from 'vitest';
4 |
5 | // @see https://github.com/vitest-dev/vitest/issues/1430
6 | afterEach(cleanup);
7 |
--------------------------------------------------------------------------------
/patches/vite-plugin-sass-dts.patch:
--------------------------------------------------------------------------------
1 | diff --git a/dist/index.js b/dist/index.js
2 | index b4fbd644ea9430b83addd30a1adb9c092fdb3941..ad09b4ad5e8d2d72161a9a3242623134b4900071 100644
3 | --- a/dist/index.js
4 | +++ b/dist/index.js
5 | @@ -360,7 +360,7 @@ var formatWriteFilePath = (file, options) => {
6 | }
7 | return formatWriteFileName(path4);
8 | };
9 | -var formatWriteFileName = (file) => `${file}${file.endsWith("d.ts") ? "" : ".d.ts"}`;
10 | +var formatWriteFileName = (file) => file.replace(/\.css$/, ".d.css.ts");
11 | var formatExportTypeFileName = (file) => basename(file.replace(".ts", ""));
12 | var ensureDirectoryExists = async (file) => {
13 | await mkdir(dirname(file), { recursive: true });
14 |
--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | shellEmulator: true
2 | packages:
3 | - packages/**
4 | - www
5 | - '!packages/**/test/**'
6 | onlyBuiltDependencies:
7 | - '@biomejs/biome'
8 | - '@swc/core'
9 | - esbuild
10 | - sharp
11 |
--------------------------------------------------------------------------------
/scripts/inject-license.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | import fs from 'node:fs';
4 |
5 | // settings
6 | const LB_RE = /\n/g;
7 | const license = fs
8 | .readFileSync(new URL('../LICENSE', import.meta.url), 'utf8')
9 | .trim()
10 | .replace(LB_RE, '\n * ');
11 |
12 | // run
13 | const cwd = new URL(`file://${process.env.INIT_CWD ?? process.cwd()}/`);
14 | const [, , module, targets] = process.argv;
15 |
16 | for (const target of targets.split(',')) {
17 | const filepath = new URL(target, cwd);
18 | const contents = fs.readFileSync(filepath, 'utf8');
19 |
20 | fs.writeFileSync(
21 | filepath,
22 | `/**
23 | * @module ${module}
24 | * @license ${license}
25 | */
26 | ${contents}`,
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/stylelint.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('stylelint').Config} */
2 | export default {
3 | extends: ['stylelint-config-standard'],
4 | plugins: ['stylelint-order'],
5 | ignoreFiles: ['**/*.js', '**/*.ts', '**/*.tsx', '**/test/*'],
6 | rules: {
7 | 'alpha-value-notation': 'number',
8 | 'declaration-block-no-redundant-longhand-properties': null, // this is fine
9 | 'hue-degree-notation': 'number',
10 | 'lightness-notation': 'number',
11 | 'no-descending-specificity': null, // this often leads to unsolvable riddles
12 | 'number-max-precision': null, // in the running for dumbest rule ever created
13 | 'order/properties-alphabetical-order': true, // let me find things
14 | 'property-no-vendor-prefix': null, // we still need this
15 | 'selector-class-pattern': null,
16 | 'selector-pseudo-class-no-unknown': null, // stylelint considers the :global selector unknown
17 | },
18 | };
19 |
--------------------------------------------------------------------------------
/tsconfig.base.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "allowArbitraryExtensions": true,
4 | "declaration": true,
5 | "declarationMap": true,
6 | "esModuleInterop": true,
7 | "lib": ["ESNext"],
8 | "module": "NodeNext",
9 | "moduleResolution": "nodenext",
10 | "noEmitOnError": true,
11 | "noFallthroughCasesInSwitch": true,
12 | "noUncheckedIndexedAccess": true,
13 | "noUnusedLocals": true,
14 | "noUnusedParameters": true,
15 | "resolveJsonModule": true,
16 | "skipLibCheck": true,
17 | "sourceMap": true,
18 | "strict": true,
19 | "target": "ESNext",
20 | "verbatimModuleSyntax": true
21 | },
22 | "exclude": ["**/dist/*", "**/node_modules/*"]
23 | }
24 |
--------------------------------------------------------------------------------
/tsconfig.react.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.base.json",
3 | "compilerOptions": {
4 | "lib": ["DOM", "ESNext"],
5 | "jsx": "react-jsx",
6 | "jsxImportSource": "react"
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/turbo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://turbo.build/schema.json",
3 | "tasks": {
4 | "build": {
5 | "dependsOn": ["^build"]
6 | },
7 | "build:app": {
8 | "dependsOn": ["build"]
9 | },
10 | "format": {
11 | "dependsOn": ["^format"]
12 | },
13 | "lint": {
14 | "inputs": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.css", "**/biome.json"],
15 | "dependsOn": ["build"]
16 | },
17 | "test": {
18 | "dependsOn": ["build"]
19 | }
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/www/.gitignore:
--------------------------------------------------------------------------------
1 | /.astro
2 | /.cache
3 | /build
4 | .env
5 |
--------------------------------------------------------------------------------
/www/README.md:
--------------------------------------------------------------------------------
1 | # ⛋ www + docs
2 |
3 | ```sh
4 | pnpm i
5 | pnpm run dev
6 | ```
7 |
--------------------------------------------------------------------------------
/www/astro.config.ts:
--------------------------------------------------------------------------------
1 | import react from '@astrojs/react';
2 | import sitemap from '@astrojs/sitemap';
3 | import mdx from '@astrojs/mdx';
4 | import { defineConfig } from 'astro/config';
5 | import rehypeAutolinkHeadings from 'rehype-autolink-headings';
6 | import rehypeSlug from 'rehype-slug';
7 | import remarkDirective from 'remark-directive';
8 | import rehypeAutoToc from './src/plugins/rehype-auto-toc.js';
9 | import remarkVitepress from './src/plugins/remark-vitepress.js';
10 |
11 | // https://astro.build/config
12 | export default defineConfig({
13 | integrations: [react(), mdx(), sitemap()],
14 | site: 'https://terrazzo.app',
15 | devToolbar: {
16 | enabled: false,
17 | },
18 | markdown: {
19 | shikiConfig: {
20 | theme: 'ayu-dark',
21 | },
22 | remarkRehype: {
23 | allowDangerousHtml: true,
24 | },
25 | remarkPlugins: [remarkDirective, remarkVitepress],
26 | rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings, rehypeAutoToc],
27 | },
28 | });
29 |
--------------------------------------------------------------------------------
/www/biome.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
3 | "extends": ["../biome.json"]
4 | }
5 |
--------------------------------------------------------------------------------
/www/public/assets/apple-hig-typography.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/terrazzoapp/terrazzo/ac939ed496a483874e2fc6ffb949cc70f647593f/www/public/assets/apple-hig-typography.png
--------------------------------------------------------------------------------
/www/public/assets/cli-init.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/terrazzoapp/terrazzo/ac939ed496a483874e2fc6ffb949cc70f647593f/www/public/assets/cli-init.png
--------------------------------------------------------------------------------
/www/public/assets/colorpicker-gamut.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/terrazzoapp/terrazzo/ac939ed496a483874e2fc6ffb949cc70f647593f/www/public/assets/colorpicker-gamut.png
--------------------------------------------------------------------------------
/www/public/assets/github-themes.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/terrazzoapp/terrazzo/ac939ed496a483874e2fc6ffb949cc70f647593f/www/public/assets/github-themes.png
--------------------------------------------------------------------------------
/www/public/assets/radix-colors.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/terrazzoapp/terrazzo/ac939ed496a483874e2fc6ffb949cc70f647593f/www/public/assets/radix-colors.png
--------------------------------------------------------------------------------
/www/public/assets/social-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/terrazzoapp/terrazzo/ac939ed496a483874e2fc6ffb949cc70f647593f/www/public/assets/social-image.png
--------------------------------------------------------------------------------
/www/public/assets/tooltip-dialog-light-dark-mode.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/terrazzoapp/terrazzo/ac939ed496a483874e2fc6ffb949cc70f647593f/www/public/assets/tooltip-dialog-light-dark-mode.png
--------------------------------------------------------------------------------
/www/public/favicon.svg:
--------------------------------------------------------------------------------
1 |
25 |
27 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/www/src/pages/docs/components/demos/demo-button.tsx:
--------------------------------------------------------------------------------
1 | import { Button, Demo } from '@terrazzo/tiles';
2 |
3 | export default function DemoButtonDemo() {
4 | return (
5 | Save\`}>
15 | Save
16 |
17 | );
18 | }`
19 | }
20 | >
21 | Save
22 |
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/www/src/pages/docs/components/demos/slider.tsx:
--------------------------------------------------------------------------------
1 | import { Demo, Slider } from '@terrazzo/tiles';
2 | import { useState } from 'react';
3 |
4 | export default function ColorPickerDemo() {
5 | const [value, setValue] = useState(50);
6 |
7 | return (
8 | DTCG format is a [W3C Community Group specification](https://www.designtokens.org/) started in 2020 and aims to outline a standard, universal design token format that works for all forms of digital design (including web, print, native apps, and beyond).
9 |
10 | DTCG tokens are stored in JSON, and look something like the following:
11 |
12 | ```json
13 | {
14 | "rebeccapurple": {
15 | "$type": "color",
16 | "$value": {
17 | "colorSpace": "srgb",
18 | "components": [0.4, 0.2, 0.6]
19 | }
20 | }
21 | }
22 | ```
23 |
24 | By storing tokens in a universal format like JSON, you can centrally manage them and generate code for any output target including web and native apps.
25 |
26 | ## Format
27 |
28 | You can [find the official format here](https://tr.designtokens.org/format/). But for convenience, we also have [a list of token types](/docs/reference/tokens) Terrazzo supports.
29 |
--------------------------------------------------------------------------------
/www/src/pages/docs/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Terrazzo (Beta)
3 | layout: ../../layouts/docs.astro
4 | ---
5 |
6 | # Terrazzo Token Tools (Beta)
7 |
8 | Terrazzo is a work-in-progress, but comprises:
9 |
10 | - [**Terrazzo CLI**](/docs/cli) (formerly known as “Cobalt UI”): use [DTCG ](https://designtokens.org) tokens
11 | - [**Terrazzo Tiles DS**](/docs/components): Design system for _documenting_ design systems
12 | - **Token Lab** _(Coming Soon)_: generate, manage, and save token sets
13 |
--------------------------------------------------------------------------------
/www/src/pages/docs/reference/about.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: About Terrazzo
3 | layout: ../../../layouts/docs.astro
4 | ---
5 |
6 | # About Terrazzo
7 |
8 | Terrazzo is a free, MIT-licensed open-source design tool built by
6 | Token Lab
7 |
8 |
--------------------------------------------------------------------------------
/www/src/scripts/copy-code.js:
--------------------------------------------------------------------------------
1 | const MESSAGE_DELAY = 1500;
2 |
3 | for (const btn of document.querySelectorAll('button[data-code]')) {
4 | let t;
5 |
6 | btn.addEventListener('click', async () => {
7 | await navigator.clipboard.writeText(btn.getAttribute('data-code'));
8 | const contentBefore = btn.innerHTML;
9 | const labelBefore = btn.getAttribute('aria-label');
10 |
11 | btn.setAttribute('aria-label', 'Copied!');
12 | btn.setAttribute('aria-live', 'polite');
13 | btn.innerHTML =
14 | ' 
@drwpow, 
@ntassone, and [many other contributors](https://github.com/drwpow/cobalt-ui).
9 |
10 | It started out as “Cobalt” in 2021 as tooling for the [W3C Design Token Community Group (DTCG)](https://designtokens.org) format. It was clear early on that a visual token editor was needed, but Drew found the CLI to be as big of a project as he could handle on his own. So along came Nick to design and envision Token Lab in 2024.
11 |
12 | The project was renamed to “Terrazzo” to better reflect how lots of colorful little shards of tokens fit together to create a beautiful mosaic when all put together. Also because [lots of things are named “Cobalt”](https://github.com/search?q=cobalt&type=repositories) (or similar-sounding names like “[Cobol](https://en.wikipedia.org/wiki/COBOL)”) and it became confusing.
13 |
--------------------------------------------------------------------------------
/www/src/pages/docs/token-lab/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Token Lab
3 | layout: ../../../layouts/docs.astro
4 | ---
5 |
6 | # Token Lab
7 |
8 | The token lab is a thing
9 |
--------------------------------------------------------------------------------
/www/src/pages/docs/tokens/modes.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Thinking in Modes
3 | layout: ../../../layouts/docs.astro
4 | ---
5 |
6 | # Thinking in Modes
7 |
--------------------------------------------------------------------------------
/www/src/pages/token-lab/index.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import DefaultLayout from '../../layouts/default.astro';
3 | ---
4 |
5 |