├── examples ├── .gitignore ├── plain-html │ ├── icons │ ├── shared │ ├── css │ ├── leo │ └── README.md └── example-ui-react │ ├── public │ ├── icons │ └── robots.txt │ ├── src │ ├── vite-env.d.ts │ └── main.tsx │ ├── README.md │ ├── .gitignore │ └── index.html ├── global.d.ts ├── .npmignore ├── src ├── postcss │ └── package.json ├── tokens │ └── transformation │ │ ├── tailwind │ │ ├── static │ │ │ ├── package.json │ │ │ └── plugins │ │ │ │ └── preflightPlugin.js │ │ ├── twFilterFonts.ts │ │ └── twFilterTokens.ts │ │ ├── android │ │ ├── filters │ │ │ ├── fontStyle.js │ │ │ ├── darkColor.js │ │ │ └── lightColor.js │ │ ├── fontSizeToSp.js │ │ └── colorName.js │ │ ├── common │ │ ├── camelCaseHelper.js │ │ └── referenceToName.ts │ │ ├── web │ │ ├── filterWeb.js │ │ ├── sizePx.ts │ │ ├── webColorRef.js │ │ ├── webPadding.ts │ │ └── webSize.ts │ │ └── skia │ │ └── name.ts ├── types │ └── string.ts ├── components │ ├── tabs │ │ └── props.ts │ ├── hr │ │ └── hr.svelte │ ├── navigation │ │ ├── navigationActions.svelte │ │ └── navigationHeader.svelte │ └── button │ │ └── props.ts ├── svelteDirectives │ └── isSSR.ts └── storyHelpers │ ├── SlotInfo.svelte │ ├── Slot.svelte │ └── ConditionalSwatchGroup.svelte ├── icons ├── dot.svg ├── minus.svg ├── bitvavo-color.svg ├── paybis-color.svg ├── theverge-color.svg ├── minimize.svg ├── pillar-color.svg ├── rei-color.svg ├── underline.svg ├── velas-color.svg ├── espn-color.svg ├── algorand-color.svg ├── filter.svg ├── strike.svg ├── browser-split-view-swap-right.svg ├── carat-left.svg ├── carat-up.svg ├── more-vertical.svg ├── pause-filled.svg ├── accessibility-mouse-left.svg ├── browser-back.svg ├── browser-forward.svg ├── browser-split-view-swap-left.svg ├── carat-down.svg ├── carat-right.svg ├── more-horizontal.svg ├── accessibility-mouse-right.svg ├── social-x-nobackground.svg ├── radio-unchecked.svg ├── accessibility-mouse-up.svg ├── browser-sidebar.svg ├── forward-filled.svg ├── play-filled.svg ├── remove-circle-filled.svg ├── rewind-filled.svg ├── accessibility-mouse-down.svg ├── bestbuy-color.svg ├── bitcoin.com-color.svg ├── browser-sidebar-right.svg ├── check-normal.svg ├── desktop-vpn-off-color.svg ├── livepeer-color.svg ├── loopring-color.svg ├── pane-resize.svg ├── buzzfeed-color.svg ├── drag.svg ├── plus-add.svg ├── wallet-ledger.svg ├── 1x.svg ├── apollocurrency-color.svg ├── arrow-small-down.svg ├── arrow-small-left.svg ├── arrow-small-right.svg ├── arrow-small-up.svg ├── eosio-color.svg ├── italic.svg ├── microsoft-color.svg ├── blackmoon-color.svg ├── container-personal.svg ├── previous-filled.svg ├── shield-filled.svg ├── theme-system.svg ├── browser-refresh.svg ├── next-filled.svg ├── arrow-up.svg ├── bancor-color.svg ├── diamond-filled.svg ├── radio-checked.svg ├── send-filled.svg ├── arrow-down.svg ├── arrow-left.svg ├── arrow-right.svg ├── radom-color.svg ├── bitflyer-color.svg ├── close.svg ├── accessibility-mouse-left-up.svg ├── accessibility-mouse-up-left.svg ├── asana-color.svg ├── bitbank-color.svg ├── container-private.svg ├── accessibility-mouse-down-left.svg ├── accessibility-mouse-left-down.svg ├── accessibility-mouse-right-up.svg ├── accessibility-mouse-up-right.svg ├── blthreep-color.svg ├── bookmark-added.svg ├── chainlink-color.svg ├── multitask-windows-os.svg ├── search.svg ├── window.svg ├── accessibility-mouse-down-right.svg ├── accessibility-mouse-right-down.svg ├── browser-menu.svg ├── hamburger-menu.svg ├── tron-color.svg ├── add-circle-filled.svg ├── arrow-diagonal-down-left.svg ├── arrow-diagonal-up-left.svg ├── arrow-diagonal-up-right.svg ├── binanceusd-color.svg ├── container-messaging.svg ├── warning-circle-filled.svg ├── zapper-color.svg ├── arrow-diagonal-down-right.svg ├── trezor-color.svg ├── browser-split-view-vertical.svg ├── wallet-trezor.svg ├── zcash-color.svg ├── check-circle-filled.svg ├── drag-alternative.svg ├── unstoppabledomains-color.svg ├── vib-color.svg ├── browser-split-view-horizontal.svg ├── ethereum-on.svg ├── gbyte-color.svg ├── info-filled.svg ├── label.svg ├── salt-color.svg ├── carat-first.svg ├── keeperdao-color.svg ├── sidenav-collapse.svg ├── sidenav-expand.svg ├── social-patreon.svg ├── wazirx-color.svg ├── list.svg ├── network-signal-good-color.svg ├── network-signal-great-color.svg ├── network-signal-okay-color.svg ├── network-signal-poor-color.svg ├── picture-in-picture.svg ├── bittrex-color.svg ├── bold.svg ├── disable-filled.svg ├── eth-logo.svg ├── play-outline.svg ├── waves-color.svg ├── zcoin-color.svg ├── browser-sidebar-off.svg ├── carat-last.svg ├── coinbase-color.svg ├── deprecated-bat-color.svg ├── info-outline.svg ├── tv.svg ├── asterisk.svg ├── expand.svg ├── search-zoom-out.svg ├── stop-filled.svg ├── download-item-downloaded.svg ├── network-speed-average.svg ├── pause-outline.svg ├── remove-circle-outline.svg ├── arrow-undo.svg ├── bsd-color.svg ├── infura-color.svg ├── monitor.svg ├── open-sign.svg ├── product-tor.svg ├── arrow-redo.svg ├── browser-mobile-bottom-tab-groups.svg ├── contract.svg ├── figma-color.svg ├── glow-color.svg ├── google-docs-color.svg ├── mtl-color.svg ├── plus-add-circle.svg ├── radio-checked-duotone.svg ├── slash.svg ├── arrow-up-and-down.svg ├── battery-empty.svg ├── clock.svg ├── huc-color.svg ├── network-speed-fast.svg ├── ted-color.svg ├── toggle-on.svg ├── warning-circle-outline.svg ├── container-star.svg ├── nervos-color.svg ├── power.svg ├── stakenet-color.svg ├── email.svg ├── emc-color.svg ├── network-speed-slow.svg ├── storm-color.svg ├── 404media-color.svg ├── changellypro-color.svg ├── coinranking-color.svg ├── icn-color.svg ├── mod-color.svg ├── search-straighten.svg ├── vega-color.svg ├── window-bookmark.svg ├── eop-color.svg ├── podium.svg ├── xvc-color.svg ├── close-circle-filled.svg ├── dock.svg ├── medibloc-color.svg ├── moac-color.svg ├── star-filled.svg ├── techcrunch-color.svg ├── warning-triangle-filled.svg ├── window-tab.svg ├── basket.svg ├── blockfi-color.svg ├── disable-outline.svg ├── mouse-click-left.svg ├── mouse-click-right.svg ├── next-outline.svg ├── play-circle.svg ├── playing-sound.svg ├── sidepanel-open.svg ├── widevine-color.svg ├── coinone-color.svg ├── nio-color.svg ├── previous-outline.svg ├── r-color.svg ├── sidepanel-retract.svg ├── container-social.svg ├── desktop-vpn-on-color.svg ├── nav-color.svg ├── send.svg ├── browser-mobile-bottom-toolbar.svg ├── container-shopping.svg ├── dockdock-color.svg ├── elec-color.svg ├── lkk-color.svg ├── note.svg ├── pie-chart-1.svg ├── readermode-column-wide.svg ├── social-twitch.svg ├── target-color.svg ├── thorchain-color.svg ├── window-tabs.svg ├── binance-color.svg ├── check-circle-outline.svg ├── forward-circle.svg ├── lrc-color.svg ├── premium-indicator.svg ├── rewind-circle.svg ├── social-medium.svg ├── tablet.svg ├── ark-color.svg ├── gold-color.svg ├── neos-color.svg ├── readermode-column-default.svg ├── caps-lock.svg ├── container-work.svg ├── cred-color.svg ├── credit-card.svg ├── desktop-vpn-error-color.svg ├── dgd-color.svg ├── window-search.svg ├── apex-color.svg ├── ardr-color.svg ├── book-closed.svg ├── container-events.svg ├── ftx-color.svg ├── history.svg ├── mir-color.svg ├── sai-color.svg ├── tablet-landscape.svg ├── trash.svg ├── xvg-color.svg ├── drgn-color.svg ├── heart-filled.svg ├── shield-done-filled.svg ├── text-color.svg ├── window-tab-new.svg ├── achain-color.svg ├── chrome-cast.svg ├── ltc-color.svg ├── news-home.svg ├── stack.svg ├── tbx-color.svg ├── window-focus.svg ├── battery-1.svg ├── browser-home.svg ├── browser-mobile-tab.svg ├── celo-color.svg ├── jpy.svg ├── vtc-color.svg ├── arrow-circle-down.svg ├── arrow-circle-left.svg ├── arrow-circle-right.svg ├── arrow-circle-up.svg ├── browser-bookmark-normal.svg ├── folder.svg ├── mouse-two-buttons.svg ├── social-vimeo.svg ├── trx-color.svg ├── windows-open.svg ├── xmx-color.svg ├── bitfinex-color.svg ├── browser-split-close-left.svg ├── mouse-wheel.svg ├── smartphone.svg ├── sort-desc.svg ├── accessibility-mouse-down-up.svg ├── accessibility-mouse-right-left.svg ├── browser-mobile-tab-bar.svg ├── browser-split-close-right.svg ├── browser-split-view-right.svg ├── code.svg ├── currencycom-color.svg ├── hight-color.svg ├── lend-color.svg ├── ont-color.svg ├── perplexity-color.svg ├── shield-plus-filled.svg ├── accessibility-mouse-left-right.svg ├── accessibility-mouse-up-down.svg ├── browser-split-view-left.svg ├── container-banking.svg ├── ethereum-off.svg ├── link-color.svg ├── rss.svg ├── smartphone-landscape.svg ├── social-youtube.svg ├── airplay-video.svg ├── bnt-color.svg ├── group-ungroup.svg ├── list-bullet-mini.svg ├── toggle-off.svg ├── vtho-color.svg ├── yahoo-color.svg ├── close-circle.svg ├── flow-color.svg ├── gas-color.svg ├── lpt-color.svg ├── med-color.svg ├── neo-color.svg ├── pie-chart-2.svg ├── sc-color.svg ├── shield.svg ├── tnt-color.svg ├── tzc-color.svg ├── ubq-color.svg ├── zerocollateraldai-color.svg ├── browser-mobile-tab-ntp.svg ├── laptop.svg ├── mistral-color.svg ├── rap-color.svg ├── sort-asc.svg ├── theta-color.svg ├── user.svg ├── vet-color.svg ├── backward.svg ├── code-off.svg ├── email-delete.svg ├── jpy-color.svg ├── luno-color.svg ├── search-user.svg ├── agenda-book.svg ├── aspect-ratio.svg ├── auction.svg ├── biconomy-color.svg ├── browser-add.svg ├── busd-color.svg ├── headphones.svg ├── loop-off.svg ├── ltc2-color.svg ├── next-circle.svg ├── sort-settings.svg ├── utk-color.svg ├── warning-octagon-filled.svg ├── window-compactmode.svg ├── crown.svg ├── mkr-color.svg ├── previous-circle.svg ├── spell-check.svg ├── voice-mode.svg ├── xrp-color.svg ├── asterisk-circle.svg ├── edit-pencil.svg ├── erase.svg ├── flux-color.svg ├── gmail-color.svg ├── loading-spinner.svg ├── lock-plain.svg ├── ppc-color.svg └── reload.svg ├── tsconfig-tokens.json ├── .prettierrc ├── CODEOWNERS ├── vite.config.js ├── .gitignore ├── .prettierignore ├── SECURITY.md ├── .storybook └── argHelper.ts └── .github └── workflows └── cleanup.yml /examples/.gitignore: -------------------------------------------------------------------------------- 1 | build/ -------------------------------------------------------------------------------- /examples/plain-html/icons: -------------------------------------------------------------------------------- 1 | ../../icons -------------------------------------------------------------------------------- /examples/plain-html/shared: -------------------------------------------------------------------------------- 1 | ../../shared -------------------------------------------------------------------------------- /examples/plain-html/css: -------------------------------------------------------------------------------- 1 | ../../tokens/css -------------------------------------------------------------------------------- /examples/plain-html/leo: -------------------------------------------------------------------------------- 1 | ../../web-components -------------------------------------------------------------------------------- /global.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | examples/* 2 | .storybook/* 3 | tests/* -------------------------------------------------------------------------------- /examples/example-ui-react/public/icons: -------------------------------------------------------------------------------- 1 | ../../../icons -------------------------------------------------------------------------------- /src/postcss/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "commonjs" 3 | } 4 | -------------------------------------------------------------------------------- /examples/example-ui-react/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /src/tokens/transformation/tailwind/static/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "commonjs" 3 | } 4 | -------------------------------------------------------------------------------- /src/types/string.ts: -------------------------------------------------------------------------------- 1 | export type StringWithAutoComplete = T | (string & Record) 2 | -------------------------------------------------------------------------------- /examples/example-ui-react/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/tokens/transformation/android/filters/fontStyle.js: -------------------------------------------------------------------------------- 1 | export default (token) => token.attributes.category === 'font' 2 | -------------------------------------------------------------------------------- /examples/example-ui-react/README.md: -------------------------------------------------------------------------------- 1 | Example react app to test using a Leo svelte component exported as a react component 2 | -------------------------------------------------------------------------------- /icons/dot.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/tabs/props.ts: -------------------------------------------------------------------------------- 1 | export const tabSizes = ['large', 'medium', 'small'] as const 2 | export type TabSize = (typeof tabSizes)[number] 3 | -------------------------------------------------------------------------------- /tsconfig-tokens.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["tokens/**/*"], 3 | "compilerOptions": { 4 | "module": "ESNext", 5 | "moduleResolution": "Bundler" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "none", 3 | "tabWidth": 2, 4 | "semi": false, 5 | "singleQuote": true, 6 | "bracketSameLine": false, 7 | "quoteProps": "preserve" 8 | } 9 | -------------------------------------------------------------------------------- /CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @fallaciousreasoning @petemill @alanbreck 2 | 3 | # We don't specify a CODEOWNER for these files, so automerge works for dependabot 4 | package.json 5 | package-lock.json 6 | -------------------------------------------------------------------------------- /icons/minus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/tokens/transformation/android/filters/darkColor.js: -------------------------------------------------------------------------------- 1 | import { matchDarkThemeToken } from '../../common/tokenFilters.js' 2 | 3 | export default (token) => matchDarkThemeToken(token) 4 | -------------------------------------------------------------------------------- /icons/bitvavo-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/paybis-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/svelteDirectives/isSSR.ts: -------------------------------------------------------------------------------- 1 | export default (function isSSR(): boolean { 2 | try { 3 | return typeof document === 'undefined' 4 | } catch (e) { 5 | return true 6 | } 7 | })() 8 | -------------------------------------------------------------------------------- /icons/theverge-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/minimize.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/tokens/transformation/common/camelCaseHelper.js: -------------------------------------------------------------------------------- 1 | import { camelCase, camelCaseTransformMerge } from 'change-case' 2 | 3 | export default (name) => camelCase(name, { transform: camelCaseTransformMerge }) 4 | -------------------------------------------------------------------------------- /src/components/hr/hr.svelte: -------------------------------------------------------------------------------- 1 |
2 | 3 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import { svelte } from '@sveltejs/vite-plugin-svelte' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [svelte()] 7 | }) 8 | -------------------------------------------------------------------------------- /src/storyHelpers/SlotInfo.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

Slots

6 |
7 | {description} 8 |
    9 | 10 |
11 |
12 | -------------------------------------------------------------------------------- /icons/pillar-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/rei-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/underline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/velas-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/espn-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .vscode 3 | node_modules/ 4 | /build/ 5 | /icons-raw/ 6 | /icons-sf 7 | /icons-skia 8 | /react/ 9 | /shared/ 10 | /storybook-static/ 11 | /storyHelpers/ 12 | /tokens/ 13 | /types/ 14 | /web-components/ 15 | -------------------------------------------------------------------------------- /icons/algorand-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/filter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/plain-html/README.md: -------------------------------------------------------------------------------- 1 | # An HTML + JS example application using Leo components 2 | 3 | To run 4 | 5 | npx serve 6 | 7 | Note: the `css` and `leo` folders here are symlinks to the build output from 8 | Leo, so we have all the files we need. 9 | -------------------------------------------------------------------------------- /icons/strike.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/tokens/transformation/tailwind/twFilterFonts.ts: -------------------------------------------------------------------------------- 1 | import { TransformedToken } from 'style-dictionary' 2 | 3 | const acceptedTypes = ['font', 'custom-fontStyle'] 4 | 5 | export default (token: TransformedToken) => acceptedTypes.includes(token.type) 6 | -------------------------------------------------------------------------------- /icons/browser-split-view-swap-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/carat-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/carat-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/more-vertical.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/pause-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/navigation/navigationActions.svelte: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 | 11 | -------------------------------------------------------------------------------- /icons/accessibility-mouse-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/browser-back.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/browser-forward.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/browser-split-view-swap-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/carat-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/carat-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/more-horizontal.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/accessibility-mouse-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/social-x-nobackground.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/tokens/transformation/tailwind/static/plugins/preflightPlugin.js: -------------------------------------------------------------------------------- 1 | const plugin = require('tailwindcss/plugin') 2 | const variables = require('./_variables.css.js') 3 | 4 | module.exports = plugin(function ({ addBase }) { 5 | addBase({ 6 | ...variables 7 | }) 8 | }) 9 | -------------------------------------------------------------------------------- /icons/radio-unchecked.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/tokens/transformation/android/fontSizeToSp.js: -------------------------------------------------------------------------------- 1 | export default { 2 | type: 'value', 3 | matcher: function (token) { 4 | return token.type === 'custom-fontStyle' 5 | }, 6 | transformer: function (token) { 7 | return `${token.value.fontSize}sp` 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | /tokens 2 | /web-components/ 3 | /react 4 | /shared 5 | /svelte 6 | /examples/plain-html/ 7 | /examples/example-ui-react/public/icons/ 8 | /icons/ 9 | 10 | # The .tokens.json files should be ignored as they're generated from Figma. 11 | /src/tokens/*.tokens.json 12 | -------------------------------------------------------------------------------- /icons/accessibility-mouse-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/browser-sidebar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/forward-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/play-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/remove-circle-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/rewind-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/accessibility-mouse-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/bestbuy-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/bitcoin.com-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/browser-sidebar-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/check-normal.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/desktop-vpn-off-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/livepeer-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/loopring-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/pane-resize.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/buzzfeed-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/drag.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/plus-add.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/wallet-ledger.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/1x.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/apollocurrency-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/arrow-small-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/arrow-small-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/arrow-small-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/arrow-small-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/eosio-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/italic.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/microsoft-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/blackmoon-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/container-personal.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/previous-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/shield-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/theme-system.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/example-ui-react/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.tsx' 5 | 6 | createRoot(document.getElementById('root')!).render( 7 | 8 | 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /icons/browser-refresh.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/next-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/arrow-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/bancor-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/diamond-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/radio-checked.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/send-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/arrow-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/arrow-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/arrow-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/radom-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/bitflyer-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/accessibility-mouse-left-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/accessibility-mouse-up-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/asana-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/bitbank-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/container-private.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/accessibility-mouse-down-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/accessibility-mouse-left-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/accessibility-mouse-right-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/accessibility-mouse-up-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/blthreep-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/bookmark-added.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/chainlink-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/multitask-windows-os.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/window.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/accessibility-mouse-down-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/accessibility-mouse-right-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/browser-menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/hamburger-menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/tron-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/tokens/transformation/common/referenceToName.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Converts a referencedVariable to the same format that style-dictionary uses for variable names 3 | * $primary.10 ==> color-primary-10 4 | */ 5 | export default function referenceToName(reference: string) { 6 | return `color.${reference.substring(1)}`.split('.').join('-') 7 | } 8 | -------------------------------------------------------------------------------- /src/tokens/transformation/web/filterWeb.js: -------------------------------------------------------------------------------- 1 | const acceptedTypes = [ 2 | 'color', 3 | 'dimension', 4 | 'font', 5 | 'custom-radius', 6 | 'custom-fontStyle', 7 | 'custom-shadow', 8 | 'custom-gradient', 9 | 'custom-spacing', 10 | 'number' 11 | ] 12 | 13 | export default (token) => acceptedTypes.includes(token.type) 14 | -------------------------------------------------------------------------------- /icons/add-circle-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/arrow-diagonal-down-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/arrow-diagonal-up-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/arrow-diagonal-up-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/binanceusd-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/container-messaging.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/warning-circle-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/zapper-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/tokens/transformation/web/sizePx.ts: -------------------------------------------------------------------------------- 1 | import { Transform } from 'style-dictionary' 2 | 3 | export default { 4 | type: 'value', 5 | matcher: function (token) { 6 | return token.type === 'dimension' && token.value !== 0 7 | }, 8 | transformer: function (token) { 9 | return `${token.value}px` 10 | } 11 | } as Transform 12 | -------------------------------------------------------------------------------- /icons/arrow-diagonal-down-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/trezor-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/browser-split-view-vertical.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/wallet-trezor.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/zcash-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/check-circle-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/drag-alternative.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/unstoppabledomains-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/vib-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/browser-split-view-horizontal.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/ethereum-on.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/gbyte-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/info-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/label.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/salt-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/carat-first.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/keeperdao-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/sidenav-collapse.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/sidenav-expand.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/social-patreon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/wazirx-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/list.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/network-signal-good-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/network-signal-great-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/network-signal-okay-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/network-signal-poor-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/picture-in-picture.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/bittrex-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/bold.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/disable-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/eth-logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/play-outline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/waves-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/zcoin-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/browser-sidebar-off.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/carat-last.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/coinbase-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/deprecated-bat-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/info-outline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/tv.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/tokens/transformation/android/filters/lightColor.js: -------------------------------------------------------------------------------- 1 | import { matchLightThemeToken } from '../../common/tokenFilters' 2 | 3 | export default (token) => 4 | // We are adding primitive colors in light colors as values/colors.xml would be the default color file and we don't have dark version of primitive colors. 5 | matchLightThemeToken(token) || token.name.startsWith('primitive') 6 | -------------------------------------------------------------------------------- /src/tokens/transformation/tailwind/twFilterTokens.ts: -------------------------------------------------------------------------------- 1 | import { TransformedToken } from 'style-dictionary' 2 | 3 | const acceptedTypes = [ 4 | 'color', 5 | 'dimension', 6 | 'custom-radius', 7 | 'custom-shadow', 8 | 'custom-gradient', 9 | 'custom-spacing', 10 | 'number' 11 | ] 12 | 13 | export default (token: TransformedToken) => acceptedTypes.includes(token.type) 14 | -------------------------------------------------------------------------------- /icons/asterisk.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/expand.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/search-zoom-out.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/stop-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/download-item-downloaded.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/network-speed-average.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/pause-outline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/remove-circle-outline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/arrow-undo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/bsd-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/infura-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/monitor.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/open-sign.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/product-tor.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/storyHelpers/Slot.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
  • 7 | {name} - {explanation} 8 | 9 |
    • 10 | 11 | 19 | -------------------------------------------------------------------------------- /examples/example-ui-react/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /icons/arrow-redo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/browser-mobile-bottom-tab-groups.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/contract.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/figma-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/glow-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/google-docs-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/mtl-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/plus-add-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/radio-checked-duotone.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/slash.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/arrow-up-and-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/battery-empty.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/clock.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/huc-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/network-speed-fast.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/ted-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/toggle-on.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/warning-circle-outline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/container-star.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/nervos-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/power.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/stakenet-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/button/props.ts: -------------------------------------------------------------------------------- 1 | export const buttonKinds = [ 2 | 'hero', 3 | 'filled', 4 | 'outline', 5 | 'plain', 6 | 'plain-faint' 7 | ] as const 8 | export type ButtonKind = (typeof buttonKinds)[number] 9 | 10 | export const buttonSizes = [ 11 | 'jumbo', 12 | 'large', 13 | 'medium', 14 | 'small', 15 | 'tiny' 16 | ] as const 17 | export type ButtonSize = (typeof buttonSizes)[number] 18 | -------------------------------------------------------------------------------- /icons/email.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/emc-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/network-speed-slow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/storm-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/404media-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/changellypro-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/coinranking-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/icn-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/mod-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/search-straighten.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/vega-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/window-bookmark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | ## Supported Versions 4 | 5 | Any version of Leo used in the current stable release version or above of Brave Browser, or in any other repo under https://github.com/brave. This includes [brave-core](https://github.com/brave/brave-core) and [brave-ios](https://github.com/brave/brave-ios). 6 | 7 | ## Reporting a Vulnerability 8 | 9 | See https://hackerone.com/brave for details. 10 | -------------------------------------------------------------------------------- /icons/eop-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/podium.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/xvc-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/navigation/navigationHeader.svelte: -------------------------------------------------------------------------------- 1 |
    2 | 3 | 4 |
    5 | 6 | 15 | -------------------------------------------------------------------------------- /src/tokens/transformation/android/colorName.js: -------------------------------------------------------------------------------- 1 | export default { 2 | type: 'name', 3 | matcher: function (token) { 4 | return token.type === 'color' 5 | }, 6 | transformer: function (token) { 7 | return token.name 8 | .replace('color_', '') 9 | .replace('light_', '') 10 | .replace('dark_', '') 11 | .replace('legacy_light_', '') 12 | .replace('legacy_dark_', '') 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /icons/close-circle-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/dock.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/medibloc-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/moac-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/star-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/techcrunch-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/warning-triangle-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/window-tab.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.storybook/argHelper.ts: -------------------------------------------------------------------------------- 1 | export const getStyleFromArgs = (args) => 2 | Object.entries(args) 3 | .filter(([key]) => key.startsWith('--leo-')) 4 | .reduce((prev, [key, value]) => prev + `${key}: ${value || 'unset'}; `, '') 5 | 6 | export const getNonStyleArgs = (args) => 7 | Object.entries(args) 8 | .filter(([key]) => !key.startsWith('--leo-')) 9 | .reduce((prev, [key, value]) => ({ ...prev, [key]: value }), {}) 10 | -------------------------------------------------------------------------------- /icons/basket.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/blockfi-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/disable-outline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/mouse-click-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/mouse-click-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/next-outline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/play-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/playing-sound.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/sidepanel-open.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/widevine-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/coinone-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/nio-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/previous-outline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/r-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/sidepanel-retract.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/container-social.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/desktop-vpn-on-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/nav-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/send.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/tokens/transformation/skia/name.ts: -------------------------------------------------------------------------------- 1 | // convert to chromium's pascalCase convention 2 | /** 3 | * @param {{ name: string }} Token 4 | * @returns The transformed name for the token 5 | */ 6 | export const transformName = ({ name }: { name: string }) => 7 | `k${name 8 | .split(/,|\-/) 9 | .map((s) => s.charAt(0).toUpperCase() + s.substring(1)) 10 | .join('') 11 | .replace('Light', '') 12 | .replace('Dark', '')}` 13 | -------------------------------------------------------------------------------- /icons/browser-mobile-bottom-toolbar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/container-shopping.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/dockdock-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/elec-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/lkk-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/note.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/pie-chart-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/readermode-column-wide.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/social-twitch.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/target-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/thorchain-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/window-tabs.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/example-ui-react/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
    11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /icons/binance-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/check-circle-outline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/forward-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/lrc-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/premium-indicator.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/rewind-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/social-medium.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/tablet.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/ark-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/gold-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/neos-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/readermode-column-default.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/caps-lock.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/container-work.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/cred-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/credit-card.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/desktop-vpn-error-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/dgd-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/window-search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/apex-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/ardr-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/book-closed.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/container-events.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/ftx-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/history.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/mir-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/sai-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/tablet-landscape.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/trash.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/xvg-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/drgn-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/heart-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/shield-done-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/text-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/window-tab-new.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/achain-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/chrome-cast.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/ltc-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/news-home.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/stack.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/tbx-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/window-focus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/tokens/transformation/web/webColorRef.js: -------------------------------------------------------------------------------- 1 | import { TinyColor } from '@ctrl/tinycolor' 2 | 3 | /** 4 | * @param {'tw' | 'leo'} ns 5 | * @param {string} colorString 6 | * @returns {string} 7 | */ 8 | export function formatColor(ns, colorString) { 9 | if (colorString.startsWith('$')) { 10 | const name = `--${ns}-` + colorString.substring(1).split('.').join('-') 11 | return `var(${name})` 12 | } 13 | return new TinyColor(colorString).toRgbString() 14 | } 15 | -------------------------------------------------------------------------------- /icons/battery-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/browser-home.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/browser-mobile-tab.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/celo-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/jpy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/vtc-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/tokens/transformation/web/webPadding.ts: -------------------------------------------------------------------------------- 1 | import { Transform } from 'style-dictionary' 2 | 3 | export default { 4 | type: 'value', 5 | matcher: function (token) { 6 | return token.type === 'custom-spacing' 7 | }, 8 | transformer: ({ value: { top, left, bottom, right } }) => { 9 | if ([bottom, left, right].every((v) => v === top)) { 10 | return `${top}px` 11 | } 12 | return `${top}px ${right}px ${bottom}px ${left}px` 13 | } 14 | } as Transform 15 | -------------------------------------------------------------------------------- /icons/arrow-circle-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/arrow-circle-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/arrow-circle-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/arrow-circle-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/browser-bookmark-normal.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/folder.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/mouse-two-buttons.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/social-vimeo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/trx-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/windows-open.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/xmx-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/bitfinex-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/browser-split-close-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/mouse-wheel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/smartphone.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/sort-desc.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/accessibility-mouse-down-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/accessibility-mouse-right-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/browser-mobile-tab-bar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/browser-split-close-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/browser-split-view-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/code.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/currencycom-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/hight-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/lend-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/ont-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/perplexity-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/shield-plus-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/accessibility-mouse-left-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/accessibility-mouse-up-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/browser-split-view-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/container-banking.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/ethereum-off.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/link-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/rss.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/smartphone-landscape.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/social-youtube.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/airplay-video.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/bnt-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/group-ungroup.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/list-bullet-mini.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/toggle-off.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/vtho-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/yahoo-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/close-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/flow-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/gas-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/lpt-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/med-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/neo-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/pie-chart-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/sc-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/shield.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/tnt-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/tzc-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/ubq-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/zerocollateraldai-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/browser-mobile-tab-ntp.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/laptop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/mistral-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/rap-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/sort-asc.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/theta-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/user.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/vet-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.github/workflows/cleanup.yml: -------------------------------------------------------------------------------- 1 | name: cleanup 2 | 3 | on: 4 | schedule: 5 | - cron: '30 5 * * 1' 6 | workflow_dispatch: 7 | 8 | permissions: 9 | contents: read 10 | id-token: write 11 | 12 | jobs: 13 | cleanup: 14 | uses: brave/devops-github-workflows/.github/workflows/cleanup_buckets.yml@main 15 | with: 16 | environment: staging 17 | secrets: 18 | AWS_REGION: us-west-2 19 | AWS_ROLE_ARN: ${{ secrets.AWS_ROLE_ARN }} 20 | S3_BUCKET_NAME: ${{ secrets.S3_BUCKET_NAME }} 21 | -------------------------------------------------------------------------------- /icons/backward.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/code-off.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/email-delete.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/jpy-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/luno-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/search-user.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/agenda-book.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/aspect-ratio.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/auction.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/biconomy-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/browser-add.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/busd-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/headphones.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/loop-off.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/ltc2-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/next-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/sort-settings.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/utk-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/warning-octagon-filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/window-compactmode.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/tokens/transformation/web/webSize.ts: -------------------------------------------------------------------------------- 1 | import { Transform } from 'style-dictionary' 2 | 3 | export default { 4 | type: 'value', 5 | matcher({ type }) { 6 | return type === 'number' 7 | }, 8 | transformer({ value, name }) { 9 | // Font weight doesn't have a unit - unfortunately we have no better 10 | // way of determining whether this is a font-weight than checking the name. 11 | const unit = name.endsWith('font-weight') ? '' : 'px' 12 | return `${value}${unit}` 13 | } 14 | } as Transform 15 | -------------------------------------------------------------------------------- /icons/crown.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/mkr-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/previous-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/spell-check.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/voice-mode.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/xrp-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/asterisk-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/edit-pencil.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/erase.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/flux-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/gmail-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/loading-spinner.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/lock-plain.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/ppc-color.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/reload.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/storyHelpers/ConditionalSwatchGroup.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | {#if shouldWrap} 7 |
    8 | 9 |
    10 | {:else} 11 | 12 | {/if} 13 | 14 | 22 | --------------------------------------------------------------------------------