init
This commit is contained in:
202
.opencode/skills/ui-styling/LICENSE.txt
Normal file
202
.opencode/skills/ui-styling/LICENSE.txt
Normal file
@@ -0,0 +1,202 @@
|
||||
|
||||
Apache License
|
||||
Version 2.0, January 2004
|
||||
http://www.apache.org/licenses/
|
||||
|
||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||
|
||||
1. Definitions.
|
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction,
|
||||
and distribution as defined by Sections 1 through 9 of this document.
|
||||
|
||||
"Licensor" shall mean the copyright owner or entity authorized by
|
||||
the copyright owner that is granting the License.
|
||||
|
||||
"Legal Entity" shall mean the union of the acting entity and all
|
||||
other entities that control, are controlled by, or are under common
|
||||
control with that entity. For the purposes of this definition,
|
||||
"control" means (i) the power, direct or indirect, to cause the
|
||||
direction or management of such entity, whether by contract or
|
||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||
|
||||
"You" (or "Your") shall mean an individual or Legal Entity
|
||||
exercising permissions granted by this License.
|
||||
|
||||
"Source" form shall mean the preferred form for making modifications,
|
||||
including but not limited to software source code, documentation
|
||||
source, and configuration files.
|
||||
|
||||
"Object" form shall mean any form resulting from mechanical
|
||||
transformation or translation of a Source form, including but
|
||||
not limited to compiled object code, generated documentation,
|
||||
and conversions to other media types.
|
||||
|
||||
"Work" shall mean the work of authorship, whether in Source or
|
||||
Object form, made available under the License, as indicated by a
|
||||
copyright notice that is included in or attached to the work
|
||||
(an example is provided in the Appendix below).
|
||||
|
||||
"Derivative Works" shall mean any work, whether in Source or Object
|
||||
form, that is based on (or derived from) the Work and for which the
|
||||
editorial revisions, annotations, elaborations, or other modifications
|
||||
represent, as a whole, an original work of authorship. For the purposes
|
||||
of this License, Derivative Works shall not include works that remain
|
||||
separable from, or merely link (or bind by name) to the interfaces of,
|
||||
the Work and Derivative Works thereof.
|
||||
|
||||
"Contribution" shall mean any work of authorship, including
|
||||
the original version of the Work and any modifications or additions
|
||||
to that Work or Derivative Works thereof, that is intentionally
|
||||
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||
or by an individual or Legal Entity authorized to submit on behalf of
|
||||
the copyright owner. For the purposes of this definition, "submitted"
|
||||
means any form of electronic, verbal, or written communication sent
|
||||
to the Licensor or its representatives, including but not limited to
|
||||
communication on electronic mailing lists, source code control systems,
|
||||
and issue tracking systems that are managed by, or on behalf of, the
|
||||
Licensor for the purpose of discussing and improving the Work, but
|
||||
excluding communication that is conspicuously marked or otherwise
|
||||
designated in writing by the copyright owner as "Not a Contribution."
|
||||
|
||||
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||
on behalf of whom a Contribution has been received by Licensor and
|
||||
subsequently incorporated within the Work.
|
||||
|
||||
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
copyright license to reproduce, prepare Derivative Works of,
|
||||
publicly display, publicly perform, sublicense, and distribute the
|
||||
Work and such Derivative Works in Source or Object form.
|
||||
|
||||
3. Grant of Patent License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
(except as stated in this section) patent license to make, have made,
|
||||
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||
where such license applies only to those patent claims licensable
|
||||
by such Contributor that are necessarily infringed by their
|
||||
Contribution(s) alone or by combination of their Contribution(s)
|
||||
with the Work to which such Contribution(s) was submitted. If You
|
||||
institute patent litigation against any entity (including a
|
||||
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||
or a Contribution incorporated within the Work constitutes direct
|
||||
or contributory patent infringement, then any patent licenses
|
||||
granted to You under this License for that Work shall terminate
|
||||
as of the date such litigation is filed.
|
||||
|
||||
4. Redistribution. You may reproduce and distribute copies of the
|
||||
Work or Derivative Works thereof in any medium, with or without
|
||||
modifications, and in Source or Object form, provided that You
|
||||
meet the following conditions:
|
||||
|
||||
(a) You must give any other recipients of the Work or
|
||||
Derivative Works a copy of this License; and
|
||||
|
||||
(b) You must cause any modified files to carry prominent notices
|
||||
stating that You changed the files; and
|
||||
|
||||
(c) You must retain, in the Source form of any Derivative Works
|
||||
that You distribute, all copyright, patent, trademark, and
|
||||
attribution notices from the Source form of the Work,
|
||||
excluding those notices that do not pertain to any part of
|
||||
the Derivative Works; and
|
||||
|
||||
(d) If the Work includes a "NOTICE" text file as part of its
|
||||
distribution, then any Derivative Works that You distribute must
|
||||
include a readable copy of the attribution notices contained
|
||||
within such NOTICE file, excluding those notices that do not
|
||||
pertain to any part of the Derivative Works, in at least one
|
||||
of the following places: within a NOTICE text file distributed
|
||||
as part of the Derivative Works; within the Source form or
|
||||
documentation, if provided along with the Derivative Works; or,
|
||||
within a display generated by the Derivative Works, if and
|
||||
wherever such third-party notices normally appear. The contents
|
||||
of the NOTICE file are for informational purposes only and
|
||||
do not modify the License. You may add Your own attribution
|
||||
notices within Derivative Works that You distribute, alongside
|
||||
or as an addendum to the NOTICE text from the Work, provided
|
||||
that such additional attribution notices cannot be construed
|
||||
as modifying the License.
|
||||
|
||||
You may add Your own copyright statement to Your modifications and
|
||||
may provide additional or different license terms and conditions
|
||||
for use, reproduction, or distribution of Your modifications, or
|
||||
for any such Derivative Works as a whole, provided Your use,
|
||||
reproduction, and distribution of the Work otherwise complies with
|
||||
the conditions stated in this License.
|
||||
|
||||
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||
any Contribution intentionally submitted for inclusion in the Work
|
||||
by You to the Licensor shall be under the terms and conditions of
|
||||
this License, without any additional terms or conditions.
|
||||
Notwithstanding the above, nothing herein shall supersede or modify
|
||||
the terms of any separate license agreement you may have executed
|
||||
with Licensor regarding such Contributions.
|
||||
|
||||
6. Trademarks. This License does not grant permission to use the trade
|
||||
names, trademarks, service marks, or product names of the Licensor,
|
||||
except as required for reasonable and customary use in describing the
|
||||
origin of the Work and reproducing the content of the NOTICE file.
|
||||
|
||||
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||
agreed to in writing, Licensor provides the Work (and each
|
||||
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||
implied, including, without limitation, any warranties or conditions
|
||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||
appropriateness of using or redistributing the Work and assume any
|
||||
risks associated with Your exercise of permissions under this License.
|
||||
|
||||
8. Limitation of Liability. In no event and under no legal theory,
|
||||
whether in tort (including negligence), contract, or otherwise,
|
||||
unless required by applicable law (such as deliberate and grossly
|
||||
negligent acts) or agreed to in writing, shall any Contributor be
|
||||
liable to You for damages, including any direct, indirect, special,
|
||||
incidental, or consequential damages of any character arising as a
|
||||
result of this License or out of the use or inability to use the
|
||||
Work (including but not limited to damages for loss of goodwill,
|
||||
work stoppage, computer failure or malfunction, or any and all
|
||||
other commercial damages or losses), even if such Contributor
|
||||
has been advised of the possibility of such damages.
|
||||
|
||||
9. Accepting Warranty or Additional Liability. While redistributing
|
||||
the Work or Derivative Works thereof, You may choose to offer,
|
||||
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||
or other liability obligations and/or rights consistent with this
|
||||
License. However, in accepting such obligations, You may act only
|
||||
on Your own behalf and on Your sole responsibility, not on behalf
|
||||
of any other Contributor, and only if You agree to indemnify,
|
||||
defend, and hold each Contributor harmless for any liability
|
||||
incurred by, or claims asserted against, such Contributor by reason
|
||||
of your accepting any such warranty or additional liability.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
APPENDIX: How to apply the Apache License to your work.
|
||||
|
||||
To apply the Apache License to your work, attach the following
|
||||
boilerplate notice, with the fields enclosed by brackets "[]"
|
||||
replaced with your own identifying information. (Don't include
|
||||
the brackets!) The text should be enclosed in the appropriate
|
||||
comment syntax for the file format. We also recommend that a
|
||||
file or class name and description of purpose be included on the
|
||||
same "printed page" as the copyright notice for easier
|
||||
identification within third-party archives.
|
||||
|
||||
Copyright [yyyy] [name of copyright owner]
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
324
.opencode/skills/ui-styling/SKILL.md
Normal file
324
.opencode/skills/ui-styling/SKILL.md
Normal file
@@ -0,0 +1,324 @@
|
||||
---
|
||||
name: ck:ui-styling
|
||||
description: Style UIs with shadcn/ui components (Radix UI + Tailwind CSS). Use for accessible components, themes, dark mode, responsive layouts, design systems, color customization.
|
||||
license: MIT
|
||||
argument-hint: "[component or layout]"
|
||||
metadata:
|
||||
author: claudekit
|
||||
version: "1.0.0"
|
||||
---
|
||||
|
||||
# UI Styling Skill
|
||||
|
||||
Comprehensive skill for creating beautiful, accessible user interfaces combining shadcn/ui components, Tailwind CSS utility styling, and canvas-based visual design systems.
|
||||
|
||||
## Reference
|
||||
|
||||
- shadcn/ui: https://ui.shadcn.com/llms.txt
|
||||
- Tailwind CSS: https://tailwindcss.com/docs
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
Use when:
|
||||
- Building UI with React-based frameworks (Next.js, Vite, Remix, Astro)
|
||||
- Implementing accessible components (dialogs, forms, tables, navigation)
|
||||
- Styling with utility-first CSS approach
|
||||
- Creating responsive, mobile-first layouts
|
||||
- Implementing dark mode and theme customization
|
||||
- Building design systems with consistent tokens
|
||||
- Generating visual designs, posters, or brand materials
|
||||
- Rapid prototyping with immediate visual feedback
|
||||
- Adding complex UI patterns (data tables, charts, command palettes)
|
||||
|
||||
## Core Stack
|
||||
|
||||
### Component Layer: shadcn/ui
|
||||
- Pre-built accessible components via Radix UI primitives
|
||||
- Copy-paste distribution model (components live in your codebase)
|
||||
- TypeScript-first with full type safety
|
||||
- Composable primitives for complex UIs
|
||||
- CLI-based installation and management
|
||||
|
||||
### Styling Layer: Tailwind CSS
|
||||
- Utility-first CSS framework
|
||||
- Build-time processing with zero runtime overhead
|
||||
- Mobile-first responsive design
|
||||
- Consistent design tokens (colors, spacing, typography)
|
||||
- Automatic dead code elimination
|
||||
|
||||
### Visual Design Layer: Canvas
|
||||
- Museum-quality visual compositions
|
||||
- Philosophy-driven design approach
|
||||
- Sophisticated visual communication
|
||||
- Minimal text, maximum visual impact
|
||||
- Systematic patterns and refined aesthetics
|
||||
|
||||
## Quick Start
|
||||
|
||||
### Component + Styling Setup
|
||||
|
||||
**Install shadcn/ui with Tailwind:**
|
||||
```bash
|
||||
npx shadcn@latest init
|
||||
```
|
||||
|
||||
CLI prompts for framework, TypeScript, paths, and theme preferences. This configures both shadcn/ui and Tailwind CSS.
|
||||
|
||||
**Add components:**
|
||||
```bash
|
||||
npx shadcn@latest add button card dialog form
|
||||
```
|
||||
|
||||
**Use components with utility styling:**
|
||||
```tsx
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
|
||||
|
||||
export function Dashboard() {
|
||||
return (
|
||||
<div className="container mx-auto p-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
<Card className="hover:shadow-lg transition-shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl font-bold">Analytics</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-muted-foreground">View your metrics</p>
|
||||
<Button variant="default" className="w-full">
|
||||
View Details
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Alternative: Tailwind-Only Setup
|
||||
|
||||
**Vite projects:**
|
||||
```bash
|
||||
npm install -D tailwindcss @tailwindcss/vite
|
||||
```
|
||||
|
||||
```javascript
|
||||
// vite.config.ts
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
export default { plugins: [tailwindcss()] }
|
||||
```
|
||||
|
||||
```css
|
||||
/* src/index.css */
|
||||
@import "tailwindcss";
|
||||
```
|
||||
|
||||
## Component Library Guide
|
||||
|
||||
**Comprehensive component catalog with usage patterns, installation, and composition examples.**
|
||||
|
||||
See: `references/shadcn-components.md`
|
||||
|
||||
Covers:
|
||||
- Form & input components (Button, Input, Select, Checkbox, Date Picker, Form validation)
|
||||
- Layout & navigation (Card, Tabs, Accordion, Navigation Menu)
|
||||
- Overlays & dialogs (Dialog, Drawer, Popover, Toast, Command)
|
||||
- Feedback & status (Alert, Progress, Skeleton)
|
||||
- Display components (Table, Data Table, Avatar, Badge)
|
||||
|
||||
## Theme & Customization
|
||||
|
||||
**Theme configuration, CSS variables, dark mode implementation, and component customization.**
|
||||
|
||||
See: `references/shadcn-theming.md`
|
||||
|
||||
Covers:
|
||||
- Dark mode setup with next-themes
|
||||
- CSS variable system
|
||||
- Color customization and palettes
|
||||
- Component variant customization
|
||||
- Theme toggle implementation
|
||||
|
||||
## Accessibility Patterns
|
||||
|
||||
**ARIA patterns, keyboard navigation, screen reader support, and accessible component usage.**
|
||||
|
||||
See: `references/shadcn-accessibility.md`
|
||||
|
||||
Covers:
|
||||
- Radix UI accessibility features
|
||||
- Keyboard navigation patterns
|
||||
- Focus management
|
||||
- Screen reader announcements
|
||||
- Form validation accessibility
|
||||
|
||||
## Tailwind Utilities
|
||||
|
||||
**Core utility classes for layout, spacing, typography, colors, borders, and shadows.**
|
||||
|
||||
See: `references/tailwind-utilities.md`
|
||||
|
||||
Covers:
|
||||
- Layout utilities (Flexbox, Grid, positioning)
|
||||
- Spacing system (padding, margin, gap)
|
||||
- Typography (font sizes, weights, alignment, line height)
|
||||
- Colors and backgrounds
|
||||
- Borders and shadows
|
||||
- Arbitrary values for custom styling
|
||||
|
||||
## Responsive Design
|
||||
|
||||
**Mobile-first breakpoints, responsive utilities, and adaptive layouts.**
|
||||
|
||||
See: `references/tailwind-responsive.md`
|
||||
|
||||
Covers:
|
||||
- Mobile-first approach
|
||||
- Breakpoint system (sm, md, lg, xl, 2xl)
|
||||
- Responsive utility patterns
|
||||
- Container queries
|
||||
- Max-width queries
|
||||
- Custom breakpoints
|
||||
|
||||
## Tailwind Customization
|
||||
|
||||
**Config file structure, custom utilities, plugins, and theme extensions.**
|
||||
|
||||
See: `references/tailwind-customization.md`
|
||||
|
||||
Covers:
|
||||
- @theme directive for custom tokens
|
||||
- Custom colors and fonts
|
||||
- Spacing and breakpoint extensions
|
||||
- Custom utility creation
|
||||
- Custom variants
|
||||
- Layer organization (@layer base, components, utilities)
|
||||
- Apply directive for component extraction
|
||||
|
||||
## Visual Design System
|
||||
|
||||
**Canvas-based design philosophy, visual communication principles, and sophisticated compositions.**
|
||||
|
||||
See: `references/canvas-design-system.md`
|
||||
|
||||
Covers:
|
||||
- Design philosophy approach
|
||||
- Visual communication over text
|
||||
- Systematic patterns and composition
|
||||
- Color, form, and spatial design
|
||||
- Minimal text integration
|
||||
- Museum-quality execution
|
||||
- Multi-page design systems
|
||||
|
||||
## Utility Scripts
|
||||
|
||||
**Python automation for component installation and configuration generation.**
|
||||
|
||||
### shadcn_add.py
|
||||
Add shadcn/ui components with dependency handling:
|
||||
```bash
|
||||
python scripts/shadcn_add.py button card dialog
|
||||
```
|
||||
|
||||
### tailwind_config_gen.py
|
||||
Generate tailwind.config.js with custom theme:
|
||||
```bash
|
||||
python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Component Composition**: Build complex UIs from simple, composable primitives
|
||||
2. **Utility-First Styling**: Use Tailwind classes directly; extract components only for true repetition
|
||||
3. **Mobile-First Responsive**: Start with mobile styles, layer responsive variants
|
||||
4. **Accessibility-First**: Leverage Radix UI primitives, add focus states, use semantic HTML
|
||||
5. **Design Tokens**: Use consistent spacing scale, color palettes, typography system
|
||||
6. **Dark Mode Consistency**: Apply dark variants to all themed elements
|
||||
7. **Performance**: Leverage automatic CSS purging, avoid dynamic class names
|
||||
8. **TypeScript**: Use full type safety for better DX
|
||||
9. **Visual Hierarchy**: Let composition guide attention, use spacing and color intentionally
|
||||
10. **Expert Craftsmanship**: Every detail matters - treat UI as a craft
|
||||
|
||||
## Reference Navigation
|
||||
|
||||
**Component Library**
|
||||
- `references/shadcn-components.md` - Complete component catalog
|
||||
- `references/shadcn-theming.md` - Theming and customization
|
||||
- `references/shadcn-accessibility.md` - Accessibility patterns
|
||||
|
||||
**Styling System**
|
||||
- `references/tailwind-utilities.md` - Core utility classes
|
||||
- `references/tailwind-responsive.md` - Responsive design
|
||||
- `references/tailwind-customization.md` - Configuration and extensions
|
||||
|
||||
**Visual Design**
|
||||
- `references/canvas-design-system.md` - Design philosophy and canvas workflows
|
||||
|
||||
**Automation**
|
||||
- `scripts/shadcn_add.py` - Component installation
|
||||
- `scripts/tailwind_config_gen.py` - Config generation
|
||||
|
||||
## Common Patterns
|
||||
|
||||
**Form with validation:**
|
||||
```tsx
|
||||
import { useForm } from "react-hook-form"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import * as z from "zod"
|
||||
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
const schema = z.object({
|
||||
email: z.string().email(),
|
||||
password: z.string().min(8)
|
||||
})
|
||||
|
||||
export function LoginForm() {
|
||||
const form = useForm({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: { email: "", password: "" }
|
||||
})
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(console.log)} className="space-y-6">
|
||||
<FormField control={form.control} name="email" render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Email</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="email" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)} />
|
||||
<Button type="submit" className="w-full">Sign In</Button>
|
||||
</form>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
**Responsive layout with dark mode:**
|
||||
```tsx
|
||||
<div className="min-h-screen bg-white dark:bg-gray-900">
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<Card className="bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700">
|
||||
<CardContent className="p-6">
|
||||
<h3 className="text-xl font-semibold text-gray-900 dark:text-white">
|
||||
Content
|
||||
</h3>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Resources
|
||||
|
||||
- shadcn/ui Docs: https://ui.shadcn.com
|
||||
- Tailwind CSS Docs: https://tailwindcss.com
|
||||
- Radix UI: https://radix-ui.com
|
||||
- Tailwind UI: https://tailwindui.com
|
||||
- Headless UI: https://headlessui.com
|
||||
- v0 (AI UI Generator): https://v0.dev
|
||||
93
.opencode/skills/ui-styling/canvas-fonts/ArsenalSC-OFL.txt
Normal file
93
.opencode/skills/ui-styling/canvas-fonts/ArsenalSC-OFL.txt
Normal file
@@ -0,0 +1,93 @@
|
||||
Copyright 2012 The Arsenal Project Authors (andrij.design@gmail.com)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
BIN
.opencode/skills/ui-styling/canvas-fonts/ArsenalSC-Regular.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/ArsenalSC-Regular.ttf
Normal file
Binary file not shown.
BIN
.opencode/skills/ui-styling/canvas-fonts/BigShoulders-Bold.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/BigShoulders-Bold.ttf
Normal file
Binary file not shown.
@@ -0,0 +1,93 @@
|
||||
Copyright 2019 The Big Shoulders Project Authors (https://github.com/xotypeco/big_shoulders)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
Binary file not shown.
93
.opencode/skills/ui-styling/canvas-fonts/Boldonse-OFL.txt
Normal file
93
.opencode/skills/ui-styling/canvas-fonts/Boldonse-OFL.txt
Normal file
@@ -0,0 +1,93 @@
|
||||
Copyright 2024 The Boldonse Project Authors (https://github.com/googlefonts/boldonse)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
BIN
.opencode/skills/ui-styling/canvas-fonts/Boldonse-Regular.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/Boldonse-Regular.ttf
Normal file
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,93 @@
|
||||
Copyright 2022 The Bricolage Grotesque Project Authors (https://github.com/ateliertriay/bricolage)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
Binary file not shown.
BIN
.opencode/skills/ui-styling/canvas-fonts/CrimsonPro-Bold.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/CrimsonPro-Bold.ttf
Normal file
Binary file not shown.
BIN
.opencode/skills/ui-styling/canvas-fonts/CrimsonPro-Italic.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/CrimsonPro-Italic.ttf
Normal file
Binary file not shown.
93
.opencode/skills/ui-styling/canvas-fonts/CrimsonPro-OFL.txt
Normal file
93
.opencode/skills/ui-styling/canvas-fonts/CrimsonPro-OFL.txt
Normal file
@@ -0,0 +1,93 @@
|
||||
Copyright 2018 The Crimson Pro Project Authors (https://github.com/Fonthausen/CrimsonPro)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
BIN
.opencode/skills/ui-styling/canvas-fonts/CrimsonPro-Regular.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/CrimsonPro-Regular.ttf
Normal file
Binary file not shown.
93
.opencode/skills/ui-styling/canvas-fonts/DMMono-OFL.txt
Normal file
93
.opencode/skills/ui-styling/canvas-fonts/DMMono-OFL.txt
Normal file
@@ -0,0 +1,93 @@
|
||||
Copyright 2020 The DM Mono Project Authors (https://www.github.com/googlefonts/dm-mono)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
BIN
.opencode/skills/ui-styling/canvas-fonts/DMMono-Regular.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/DMMono-Regular.ttf
Normal file
Binary file not shown.
94
.opencode/skills/ui-styling/canvas-fonts/EricaOne-OFL.txt
Normal file
94
.opencode/skills/ui-styling/canvas-fonts/EricaOne-OFL.txt
Normal file
@@ -0,0 +1,94 @@
|
||||
Copyright (c) 2011 by LatinoType Limitada (luciano@latinotype.com),
|
||||
with Reserved Font Names "Erica One"
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
BIN
.opencode/skills/ui-styling/canvas-fonts/EricaOne-Regular.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/EricaOne-Regular.ttf
Normal file
Binary file not shown.
BIN
.opencode/skills/ui-styling/canvas-fonts/GeistMono-Bold.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/GeistMono-Bold.ttf
Normal file
Binary file not shown.
93
.opencode/skills/ui-styling/canvas-fonts/GeistMono-OFL.txt
Normal file
93
.opencode/skills/ui-styling/canvas-fonts/GeistMono-OFL.txt
Normal file
@@ -0,0 +1,93 @@
|
||||
Copyright 2024 The Geist Project Authors (https://github.com/vercel/geist-font.git)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
BIN
.opencode/skills/ui-styling/canvas-fonts/GeistMono-Regular.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/GeistMono-Regular.ttf
Normal file
Binary file not shown.
93
.opencode/skills/ui-styling/canvas-fonts/Gloock-OFL.txt
Normal file
93
.opencode/skills/ui-styling/canvas-fonts/Gloock-OFL.txt
Normal file
@@ -0,0 +1,93 @@
|
||||
Copyright 2022 The Gloock Project Authors (https://github.com/duartp/gloock)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
BIN
.opencode/skills/ui-styling/canvas-fonts/Gloock-Regular.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/Gloock-Regular.ttf
Normal file
Binary file not shown.
BIN
.opencode/skills/ui-styling/canvas-fonts/IBMPlexMono-Bold.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/IBMPlexMono-Bold.ttf
Normal file
Binary file not shown.
93
.opencode/skills/ui-styling/canvas-fonts/IBMPlexMono-OFL.txt
Normal file
93
.opencode/skills/ui-styling/canvas-fonts/IBMPlexMono-OFL.txt
Normal file
@@ -0,0 +1,93 @@
|
||||
Copyright © 2017 IBM Corp. with Reserved Font Name "Plex"
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
BIN
.opencode/skills/ui-styling/canvas-fonts/IBMPlexMono-Regular.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/IBMPlexMono-Regular.ttf
Normal file
Binary file not shown.
BIN
.opencode/skills/ui-styling/canvas-fonts/IBMPlexSerif-Bold.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/IBMPlexSerif-Bold.ttf
Normal file
Binary file not shown.
Binary file not shown.
BIN
.opencode/skills/ui-styling/canvas-fonts/IBMPlexSerif-Italic.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/IBMPlexSerif-Italic.ttf
Normal file
Binary file not shown.
Binary file not shown.
BIN
.opencode/skills/ui-styling/canvas-fonts/InstrumentSans-Bold.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/InstrumentSans-Bold.ttf
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,93 @@
|
||||
Copyright 2022 The Instrument Sans Project Authors (https://github.com/Instrument/instrument-sans)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
93
.opencode/skills/ui-styling/canvas-fonts/Italiana-OFL.txt
Normal file
93
.opencode/skills/ui-styling/canvas-fonts/Italiana-OFL.txt
Normal file
@@ -0,0 +1,93 @@
|
||||
Copyright (c) 2011, Santiago Orozco (hi@typemade.mx), with Reserved Font Name "Italiana".
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
BIN
.opencode/skills/ui-styling/canvas-fonts/Italiana-Regular.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/Italiana-Regular.ttf
Normal file
Binary file not shown.
BIN
.opencode/skills/ui-styling/canvas-fonts/JetBrainsMono-Bold.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/JetBrainsMono-Bold.ttf
Normal file
Binary file not shown.
@@ -0,0 +1,93 @@
|
||||
Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
Binary file not shown.
BIN
.opencode/skills/ui-styling/canvas-fonts/Jura-Light.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/Jura-Light.ttf
Normal file
Binary file not shown.
BIN
.opencode/skills/ui-styling/canvas-fonts/Jura-Medium.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/Jura-Medium.ttf
Normal file
Binary file not shown.
93
.opencode/skills/ui-styling/canvas-fonts/Jura-OFL.txt
Normal file
93
.opencode/skills/ui-styling/canvas-fonts/Jura-OFL.txt
Normal file
@@ -0,0 +1,93 @@
|
||||
Copyright 2019 The Jura Project Authors (https://github.com/ossobuffo/jura)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
@@ -0,0 +1,93 @@
|
||||
Copyright 2012 The Libre Baskerville Project Authors (https://github.com/impallari/Libre-Baskerville) with Reserved Font Name Libre Baskerville.
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
Binary file not shown.
BIN
.opencode/skills/ui-styling/canvas-fonts/Lora-Bold.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/Lora-Bold.ttf
Normal file
Binary file not shown.
BIN
.opencode/skills/ui-styling/canvas-fonts/Lora-BoldItalic.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/Lora-BoldItalic.ttf
Normal file
Binary file not shown.
BIN
.opencode/skills/ui-styling/canvas-fonts/Lora-Italic.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/Lora-Italic.ttf
Normal file
Binary file not shown.
93
.opencode/skills/ui-styling/canvas-fonts/Lora-OFL.txt
Normal file
93
.opencode/skills/ui-styling/canvas-fonts/Lora-OFL.txt
Normal file
@@ -0,0 +1,93 @@
|
||||
Copyright 2011 The Lora Project Authors (https://github.com/cyrealtype/Lora-Cyrillic), with Reserved Font Name "Lora".
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
BIN
.opencode/skills/ui-styling/canvas-fonts/Lora-Regular.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/Lora-Regular.ttf
Normal file
Binary file not shown.
BIN
.opencode/skills/ui-styling/canvas-fonts/NationalPark-Bold.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/NationalPark-Bold.ttf
Normal file
Binary file not shown.
@@ -0,0 +1,93 @@
|
||||
Copyright 2025 The National Park Project Authors (https://github.com/benhoepner/National-Park)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
Binary file not shown.
@@ -0,0 +1,93 @@
|
||||
Copyright (c) 2010, Kimberly Geswein (kimberlygeswein.com)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
Binary file not shown.
BIN
.opencode/skills/ui-styling/canvas-fonts/Outfit-Bold.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/Outfit-Bold.ttf
Normal file
Binary file not shown.
93
.opencode/skills/ui-styling/canvas-fonts/Outfit-OFL.txt
Normal file
93
.opencode/skills/ui-styling/canvas-fonts/Outfit-OFL.txt
Normal file
@@ -0,0 +1,93 @@
|
||||
Copyright 2021 The Outfit Project Authors (https://github.com/Outfitio/Outfit-Fonts)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
BIN
.opencode/skills/ui-styling/canvas-fonts/Outfit-Regular.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/Outfit-Regular.ttf
Normal file
Binary file not shown.
BIN
.opencode/skills/ui-styling/canvas-fonts/PixelifySans-Medium.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/PixelifySans-Medium.ttf
Normal file
Binary file not shown.
@@ -0,0 +1,93 @@
|
||||
Copyright 2021 The Pixelify Sans Project Authors (https://github.com/eifetx/Pixelify-Sans)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
93
.opencode/skills/ui-styling/canvas-fonts/PoiretOne-OFL.txt
Normal file
93
.opencode/skills/ui-styling/canvas-fonts/PoiretOne-OFL.txt
Normal file
@@ -0,0 +1,93 @@
|
||||
Copyright (c) 2011, Denis Masharov (denis.masharov@gmail.com)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
BIN
.opencode/skills/ui-styling/canvas-fonts/PoiretOne-Regular.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/PoiretOne-Regular.ttf
Normal file
Binary file not shown.
BIN
.opencode/skills/ui-styling/canvas-fonts/RedHatMono-Bold.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/RedHatMono-Bold.ttf
Normal file
Binary file not shown.
93
.opencode/skills/ui-styling/canvas-fonts/RedHatMono-OFL.txt
Normal file
93
.opencode/skills/ui-styling/canvas-fonts/RedHatMono-OFL.txt
Normal file
@@ -0,0 +1,93 @@
|
||||
Copyright 2024 The Red Hat Project Authors (https://github.com/RedHatOfficial/RedHatFont)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
BIN
.opencode/skills/ui-styling/canvas-fonts/RedHatMono-Regular.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/RedHatMono-Regular.ttf
Normal file
Binary file not shown.
93
.opencode/skills/ui-styling/canvas-fonts/Silkscreen-OFL.txt
Normal file
93
.opencode/skills/ui-styling/canvas-fonts/Silkscreen-OFL.txt
Normal file
@@ -0,0 +1,93 @@
|
||||
Copyright 2001 The Silkscreen Project Authors (https://github.com/googlefonts/silkscreen)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
BIN
.opencode/skills/ui-styling/canvas-fonts/Silkscreen-Regular.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/Silkscreen-Regular.ttf
Normal file
Binary file not shown.
BIN
.opencode/skills/ui-styling/canvas-fonts/SmoochSans-Medium.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/SmoochSans-Medium.ttf
Normal file
Binary file not shown.
93
.opencode/skills/ui-styling/canvas-fonts/SmoochSans-OFL.txt
Normal file
93
.opencode/skills/ui-styling/canvas-fonts/SmoochSans-OFL.txt
Normal file
@@ -0,0 +1,93 @@
|
||||
Copyright 2016 The Smooch Sans Project Authors (https://github.com/googlefonts/smooch-sans)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
BIN
.opencode/skills/ui-styling/canvas-fonts/Tektur-Medium.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/Tektur-Medium.ttf
Normal file
Binary file not shown.
93
.opencode/skills/ui-styling/canvas-fonts/Tektur-OFL.txt
Normal file
93
.opencode/skills/ui-styling/canvas-fonts/Tektur-OFL.txt
Normal file
@@ -0,0 +1,93 @@
|
||||
Copyright 2023 The Tektur Project Authors (https://www.github.com/hyvyys/Tektur)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
BIN
.opencode/skills/ui-styling/canvas-fonts/Tektur-Regular.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/Tektur-Regular.ttf
Normal file
Binary file not shown.
BIN
.opencode/skills/ui-styling/canvas-fonts/WorkSans-Bold.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/WorkSans-Bold.ttf
Normal file
Binary file not shown.
BIN
.opencode/skills/ui-styling/canvas-fonts/WorkSans-BoldItalic.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/WorkSans-BoldItalic.ttf
Normal file
Binary file not shown.
BIN
.opencode/skills/ui-styling/canvas-fonts/WorkSans-Italic.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/WorkSans-Italic.ttf
Normal file
Binary file not shown.
93
.opencode/skills/ui-styling/canvas-fonts/WorkSans-OFL.txt
Normal file
93
.opencode/skills/ui-styling/canvas-fonts/WorkSans-OFL.txt
Normal file
@@ -0,0 +1,93 @@
|
||||
Copyright 2019 The Work Sans Project Authors (https://github.com/weiweihuanghuang/Work-Sans)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
BIN
.opencode/skills/ui-styling/canvas-fonts/WorkSans-Regular.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/WorkSans-Regular.ttf
Normal file
Binary file not shown.
93
.opencode/skills/ui-styling/canvas-fonts/YoungSerif-OFL.txt
Normal file
93
.opencode/skills/ui-styling/canvas-fonts/YoungSerif-OFL.txt
Normal file
@@ -0,0 +1,93 @@
|
||||
Copyright 2023 The Young Serif Project Authors (https://github.com/noirblancrouge/YoungSerif)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
BIN
.opencode/skills/ui-styling/canvas-fonts/YoungSerif-Regular.ttf
Normal file
BIN
.opencode/skills/ui-styling/canvas-fonts/YoungSerif-Regular.ttf
Normal file
Binary file not shown.
320
.opencode/skills/ui-styling/references/canvas-design-system.md
Normal file
320
.opencode/skills/ui-styling/references/canvas-design-system.md
Normal file
@@ -0,0 +1,320 @@
|
||||
# Canvas Design System
|
||||
|
||||
Visual design philosophy, systematic composition, and sophisticated visual communication.
|
||||
|
||||
## Design Philosophy Approach
|
||||
|
||||
Canvas design operates through two-phase process:
|
||||
|
||||
### Phase 1: Design Philosophy Creation
|
||||
|
||||
Create visual philosophy - aesthetic movement expressed through form, space, color, composition. Not layouts or templates, but pure visual philosophy.
|
||||
|
||||
**What is created:** Design manifesto emphasizing:
|
||||
- Visual expression over text
|
||||
- Spatial communication
|
||||
- Artistic interpretation
|
||||
- Minimal words as visual accent
|
||||
|
||||
**Philosophy structure (4-6 paragraphs):**
|
||||
- Space and form principles
|
||||
- Color and material approach
|
||||
- Scale and rhythm guidance
|
||||
- Composition and balance rules
|
||||
- Visual hierarchy system
|
||||
|
||||
### Phase 2: Visual Expression
|
||||
|
||||
Express philosophy through canvas artifacts:
|
||||
- 90% visual design
|
||||
- 10% essential text
|
||||
- Museum-quality execution
|
||||
- Systematic patterns
|
||||
- Sophisticated composition
|
||||
|
||||
## Core Principles
|
||||
|
||||
### 1. Visual Communication First
|
||||
|
||||
Information lives in design, not paragraphs. Express ideas through:
|
||||
- Color zones and fields
|
||||
- Geometric precision
|
||||
- Spatial relationships
|
||||
- Visual weight and tension
|
||||
- Form and structure
|
||||
|
||||
### 2. Minimal Text Integration
|
||||
|
||||
Text as rare, powerful gesture:
|
||||
- Never paragraphs
|
||||
- Only essential words
|
||||
- Integrated into visual architecture
|
||||
- Small labels, huge impact
|
||||
- Typography as visual element
|
||||
|
||||
### 3. Expert Craftsmanship
|
||||
|
||||
Work must appear:
|
||||
- Meticulously crafted
|
||||
- Labored over with care
|
||||
- Product of countless hours
|
||||
- From absolute top of field
|
||||
- Master-level execution
|
||||
|
||||
### 4. Systematic Patterns
|
||||
|
||||
Use scientific visual language:
|
||||
- Repeating patterns
|
||||
- Perfect shapes
|
||||
- Dense accumulation of marks
|
||||
- Layered elements
|
||||
- Patient repetition rewards sustained viewing
|
||||
|
||||
## Design Movement Examples
|
||||
|
||||
### Concrete Poetry
|
||||
**Philosophy:** Communication through monumental form and bold geometry.
|
||||
|
||||
**Expression:**
|
||||
- Massive color blocks
|
||||
- Sculptural typography (huge words, tiny labels)
|
||||
- Brutalist spatial divisions
|
||||
- Polish poster energy meets Le Corbusier
|
||||
- Ideas through visual weight and spatial tension
|
||||
- Text as rare, powerful gesture
|
||||
|
||||
### Chromatic Language
|
||||
**Philosophy:** Color as primary information system.
|
||||
|
||||
**Expression:**
|
||||
- Geometric precision
|
||||
- Color zones create meaning
|
||||
- Typography minimal - small sans-serif labels
|
||||
- Josef Albers' interaction meets data visualization
|
||||
- Information encoded spatially and chromatically
|
||||
- Words only anchor what color shows
|
||||
|
||||
### Analog Meditation
|
||||
**Philosophy:** Quiet visual contemplation through texture and breathing room.
|
||||
|
||||
**Expression:**
|
||||
- Paper grain, ink bleeds
|
||||
- Vast negative space
|
||||
- Photography and illustration dominate
|
||||
- Typography whispered (small, restrained)
|
||||
- Japanese photobook aesthetic
|
||||
- Images breathe across pages
|
||||
- Text appears sparingly - short phrases only
|
||||
|
||||
### Organic Systems
|
||||
**Philosophy:** Natural clustering and modular growth patterns.
|
||||
|
||||
**Expression:**
|
||||
- Rounded forms
|
||||
- Organic arrangements
|
||||
- Color from nature through architecture
|
||||
- Information through visual diagrams
|
||||
- Spatial relationships and iconography
|
||||
- Text only for key labels floating in space
|
||||
- Composition tells story through spatial orchestration
|
||||
|
||||
### Geometric Silence
|
||||
**Philosophy:** Pure order and restraint.
|
||||
|
||||
**Expression:**
|
||||
- Grid-based precision
|
||||
- Bold photography or stark graphics
|
||||
- Dramatic negative space
|
||||
- Typography precise but minimal
|
||||
- Small essential text, large quiet zones
|
||||
- Swiss formalism meets Brutalist material honesty
|
||||
- Structure communicates, not words
|
||||
- Every alignment from countless refinements
|
||||
|
||||
## Implementation Guidelines
|
||||
|
||||
### Subtle Reference Integration
|
||||
|
||||
Embed conceptual DNA without announcing:
|
||||
- Niche reference woven invisibly
|
||||
- Those who know feel it intuitively
|
||||
- Others experience masterful abstract composition
|
||||
- Like jazz musician quoting another song
|
||||
- Sophisticated, never literal
|
||||
- Reference enhances depth quietly
|
||||
|
||||
### Color Approach
|
||||
|
||||
**Intentional palette:**
|
||||
- Limited colors (2-5)
|
||||
- Cohesive system
|
||||
- Purposeful relationships
|
||||
- oklch color space for precision
|
||||
- Each shade carries meaning
|
||||
|
||||
**Example palette:**
|
||||
```
|
||||
--color-primary: oklch(0.55 0.22 264)
|
||||
--color-accent: oklch(0.75 0.18 45)
|
||||
--color-neutral: oklch(0.90 0.02 264)
|
||||
--color-dark: oklch(0.25 0.15 264)
|
||||
```
|
||||
|
||||
### Typography System
|
||||
|
||||
**Thin fonts preferred:**
|
||||
- Light weights (200-300)
|
||||
- Clean sans-serifs
|
||||
- Geometric precision
|
||||
- Small sizes for labels
|
||||
- Large sizes for impact moments
|
||||
|
||||
**Font integration:**
|
||||
- Search `./canvas-fonts` directory
|
||||
- Download needed fonts
|
||||
- Bring typography onto canvas
|
||||
- Part of art, not typeset digitally
|
||||
|
||||
### Composition Rules
|
||||
|
||||
**Systematic approach:**
|
||||
- Repeating patterns establish rhythm
|
||||
- Perfect geometric shapes
|
||||
- Clinical typography
|
||||
- Reference markers suggest imaginary discipline
|
||||
- Dense accumulation builds meaning
|
||||
- Layered patterns reward attention
|
||||
|
||||
**Spacing discipline:**
|
||||
- Nothing falls off page
|
||||
- Nothing overlaps
|
||||
- Every element within canvas boundaries
|
||||
- Proper margins non-negotiable
|
||||
- Breathing room and clear separation
|
||||
- Professional execution mandatory
|
||||
|
||||
### Canvas Boundaries
|
||||
|
||||
**Technical specs:**
|
||||
- Single page default (multi-page when requested)
|
||||
- PDF or PNG output
|
||||
- High resolution
|
||||
- Clean margins
|
||||
- Contained composition
|
||||
- Flawless formatting
|
||||
|
||||
## Multi-Page Design Systems
|
||||
|
||||
When creating multiple pages:
|
||||
|
||||
### Approach
|
||||
- Treat first page as single page in coffee table book
|
||||
- Create more pages along same philosophy
|
||||
- Distinctly different but cohesive
|
||||
- Pages tell story tastefully
|
||||
- Full creative freedom
|
||||
|
||||
### Consistency Elements
|
||||
- Shared color palette
|
||||
- Consistent typography system
|
||||
- Related compositional approach
|
||||
- Visual language continuity
|
||||
- Philosophical thread throughout
|
||||
|
||||
### Variation Strategy
|
||||
- Unique twist per page
|
||||
- Different focal points
|
||||
- Varied spatial arrangements
|
||||
- Complementary patterns
|
||||
- Progressive visual narrative
|
||||
|
||||
## Execution Checklist
|
||||
|
||||
Before finalizing:
|
||||
|
||||
- [ ] Philosophy guides every decision
|
||||
- [ ] 90% visual, 10% text maximum
|
||||
- [ ] Text minimal and integrated
|
||||
- [ ] Nothing overlaps or falls off page
|
||||
- [ ] Margins and spacing pristine
|
||||
- [ ] Composition cohesive with art
|
||||
- [ ] Appears meticulously crafted
|
||||
- [ ] Master-level execution evident
|
||||
- [ ] Sophisticated, never amateur
|
||||
- [ ] Could be displayed in museum
|
||||
- [ ] Proves undeniable expertise
|
||||
- [ ] Formatting flawless
|
||||
- [ ] Every detail perfect
|
||||
|
||||
## Quality Standards
|
||||
|
||||
### What to Avoid
|
||||
- Cartoony aesthetics
|
||||
- Amateur execution
|
||||
- Text-heavy composition
|
||||
- Random placement
|
||||
- Overlapping elements
|
||||
- Inconsistent spacing
|
||||
- Obvious AI generation
|
||||
- Lack of refinement
|
||||
|
||||
### What to Achieve
|
||||
- Museum quality
|
||||
- Magazine worthy
|
||||
- Art object status
|
||||
- Countless hours appearance
|
||||
- Top-of-field craftsmanship
|
||||
- Philosophical coherence
|
||||
- Visual sophistication
|
||||
- Systematic precision
|
||||
|
||||
## Refinement Process
|
||||
|
||||
### Initial Pass
|
||||
Create based on philosophy and principles.
|
||||
|
||||
### Second Pass (Critical)
|
||||
- Don't add more graphics
|
||||
- Refine what exists
|
||||
- Make extremely crisp
|
||||
- Respect minimalism philosophy
|
||||
- Increase cohesion with art
|
||||
- Make existing elements more artistic
|
||||
- Polish rather than expand
|
||||
|
||||
### Final Verification
|
||||
User already said: "It isn't perfect enough. Must be pristine, masterpiece of craftsmanship, as if about to be displayed in museum."
|
||||
|
||||
Apply this standard before delivery.
|
||||
|
||||
## Output Format
|
||||
|
||||
**Required files:**
|
||||
1. Design philosophy (.md file)
|
||||
2. Visual expression (.pdf or .png)
|
||||
|
||||
**Philosophy file contains:**
|
||||
- Movement name
|
||||
- 4-6 paragraph philosophy
|
||||
- Visual principles
|
||||
- Execution guidance
|
||||
|
||||
**Canvas file contains:**
|
||||
- Visual interpretation
|
||||
- Minimal text
|
||||
- Systematic composition
|
||||
- Expert-level execution
|
||||
|
||||
## Use Cases
|
||||
|
||||
Apply canvas design for:
|
||||
- Brand identity systems
|
||||
- Poster designs
|
||||
- Visual manifestos
|
||||
- Design system documentation
|
||||
- Art pieces and compositions
|
||||
- Conceptual visual frameworks
|
||||
- Editorial design
|
||||
- Exhibition materials
|
||||
- Coffee table books
|
||||
- Design philosophy demonstrations
|
||||
471
.opencode/skills/ui-styling/references/shadcn-accessibility.md
Normal file
471
.opencode/skills/ui-styling/references/shadcn-accessibility.md
Normal file
@@ -0,0 +1,471 @@
|
||||
# shadcn/ui Accessibility Patterns
|
||||
|
||||
ARIA patterns, keyboard navigation, screen reader support, and accessible component usage.
|
||||
|
||||
## Foundation: Radix UI Primitives
|
||||
|
||||
shadcn/ui built on Radix UI primitives - unstyled, accessible components following WAI-ARIA design patterns.
|
||||
|
||||
Benefits:
|
||||
- Keyboard navigation built-in
|
||||
- Screen reader announcements
|
||||
- Focus management
|
||||
- ARIA attributes automatically applied
|
||||
- Tested against accessibility standards
|
||||
|
||||
## Keyboard Navigation
|
||||
|
||||
### Focus Management
|
||||
|
||||
**Focus visible states:**
|
||||
```tsx
|
||||
<Button className="focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
|
||||
Accessible Button
|
||||
</Button>
|
||||
```
|
||||
|
||||
**Skip to content:**
|
||||
```tsx
|
||||
<a href="#main-content" className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2">
|
||||
Skip to content
|
||||
</a>
|
||||
|
||||
<main id="main-content">
|
||||
{/* Content */}
|
||||
</main>
|
||||
```
|
||||
|
||||
### Dialog/Modal Navigation
|
||||
|
||||
Dialogs trap focus automatically via Radix Dialog primitive:
|
||||
|
||||
```tsx
|
||||
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"
|
||||
|
||||
<Dialog>
|
||||
<DialogTrigger>Open</DialogTrigger>
|
||||
<DialogContent>
|
||||
{/* Focus trapped here */}
|
||||
<input /> {/* Auto-focused */}
|
||||
<Button>Action</Button>
|
||||
{/* Esc to close, Tab to navigate */}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
```
|
||||
|
||||
Features:
|
||||
- Focus trapped within dialog
|
||||
- Esc key closes
|
||||
- Tab cycles through focusable elements
|
||||
- Focus returns to trigger on close
|
||||
|
||||
### Dropdown/Menu Navigation
|
||||
|
||||
```tsx
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger>Open</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem>Profile</DropdownMenuItem>
|
||||
<DropdownMenuItem>Settings</DropdownMenuItem>
|
||||
<DropdownMenuItem>Logout</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
```
|
||||
|
||||
Keyboard shortcuts:
|
||||
- `Space/Enter`: Open menu
|
||||
- `Arrow Up/Down`: Navigate items
|
||||
- `Esc`: Close menu
|
||||
- `Tab`: Close and move focus
|
||||
|
||||
### Command Palette Navigation
|
||||
|
||||
```tsx
|
||||
import { Command } from "@/components/ui/command"
|
||||
|
||||
<Command>
|
||||
<CommandInput placeholder="Search..." />
|
||||
<CommandList>
|
||||
<CommandGroup heading="Suggestions">
|
||||
<CommandItem>Calendar</CommandItem>
|
||||
<CommandItem>Search</CommandItem>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
```
|
||||
|
||||
Features:
|
||||
- Type to filter
|
||||
- Arrow keys to navigate
|
||||
- Enter to select
|
||||
- Esc to close
|
||||
|
||||
## Screen Reader Support
|
||||
|
||||
### Semantic HTML
|
||||
|
||||
Use proper HTML elements:
|
||||
|
||||
```tsx
|
||||
// Good: Semantic HTML
|
||||
<button>Click me</button>
|
||||
<nav><a href="/">Home</a></nav>
|
||||
|
||||
// Avoid: Div soup
|
||||
<div onClick={handler}>Click me</div>
|
||||
```
|
||||
|
||||
### ARIA Labels
|
||||
|
||||
**Label interactive elements:**
|
||||
```tsx
|
||||
<Button aria-label="Close dialog">
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
<Input aria-label="Email address" type="email" />
|
||||
```
|
||||
|
||||
**Describe elements:**
|
||||
```tsx
|
||||
<Button aria-describedby="delete-description">
|
||||
Delete Account
|
||||
</Button>
|
||||
<p id="delete-description" className="sr-only">
|
||||
This action permanently deletes your account and cannot be undone
|
||||
</p>
|
||||
```
|
||||
|
||||
### Screen Reader Only Text
|
||||
|
||||
Use `sr-only` class for screen reader only content:
|
||||
|
||||
```tsx
|
||||
<Button>
|
||||
<Trash className="h-4 w-4" />
|
||||
<span className="sr-only">Delete item</span>
|
||||
</Button>
|
||||
|
||||
// CSS for sr-only
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
```
|
||||
|
||||
### Live Regions
|
||||
|
||||
Announce dynamic content:
|
||||
|
||||
```tsx
|
||||
<div aria-live="polite" aria-atomic="true">
|
||||
{message}
|
||||
</div>
|
||||
|
||||
// For urgent updates
|
||||
<div aria-live="assertive">
|
||||
{error}
|
||||
</div>
|
||||
```
|
||||
|
||||
Toast component includes live region:
|
||||
```tsx
|
||||
const { toast } = useToast()
|
||||
|
||||
toast({
|
||||
title: "Success",
|
||||
description: "Profile updated"
|
||||
})
|
||||
// Announced to screen readers automatically
|
||||
```
|
||||
|
||||
## Form Accessibility
|
||||
|
||||
### Labels and Descriptions
|
||||
|
||||
**Always label inputs:**
|
||||
```tsx
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Input } from "@/components/ui/input"
|
||||
|
||||
<div>
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input id="email" type="email" />
|
||||
</div>
|
||||
```
|
||||
|
||||
**Add descriptions:**
|
||||
```tsx
|
||||
import { FormDescription, FormMessage } from "@/components/ui/form"
|
||||
|
||||
<FormItem>
|
||||
<FormLabel>Username</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Your public display name
|
||||
</FormDescription>
|
||||
<FormMessage /> {/* Error messages */}
|
||||
</FormItem>
|
||||
```
|
||||
|
||||
### Error Handling
|
||||
|
||||
Announce errors to screen readers:
|
||||
|
||||
```tsx
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="email"
|
||||
render={({ field, fieldState }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Email</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
aria-invalid={!!fieldState.error}
|
||||
aria-describedby={fieldState.error ? "email-error" : undefined}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage id="email-error" />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
```
|
||||
|
||||
### Required Fields
|
||||
|
||||
Indicate required fields:
|
||||
|
||||
```tsx
|
||||
<Label htmlFor="name">
|
||||
Name <span className="text-destructive">*</span>
|
||||
<span className="sr-only">(required)</span>
|
||||
</Label>
|
||||
<Input id="name" required />
|
||||
```
|
||||
|
||||
### Fieldset and Legend
|
||||
|
||||
Group related fields:
|
||||
|
||||
```tsx
|
||||
<fieldset>
|
||||
<legend className="text-lg font-semibold mb-4">
|
||||
Contact Information
|
||||
</legend>
|
||||
<div className="space-y-4">
|
||||
<FormField name="email" />
|
||||
<FormField name="phone" />
|
||||
</div>
|
||||
</fieldset>
|
||||
```
|
||||
|
||||
## Component-Specific Patterns
|
||||
|
||||
### Accordion
|
||||
|
||||
```tsx
|
||||
import { Accordion } from "@/components/ui/accordion"
|
||||
|
||||
<Accordion type="single" collapsible>
|
||||
<AccordionItem value="item-1">
|
||||
<AccordionTrigger>
|
||||
{/* Includes aria-expanded, aria-controls automatically */}
|
||||
Is it accessible?
|
||||
</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
{/* Hidden when collapsed, announced when expanded */}
|
||||
Yes. Follows WAI-ARIA design pattern.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
```
|
||||
|
||||
### Tabs
|
||||
|
||||
```tsx
|
||||
import { Tabs } from "@/components/ui/tabs"
|
||||
|
||||
<Tabs defaultValue="account">
|
||||
<TabsList role="tablist">
|
||||
{/* Arrow keys navigate, Space/Enter activates */}
|
||||
<TabsTrigger value="account">Account</TabsTrigger>
|
||||
<TabsTrigger value="password">Password</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="account">
|
||||
{/* Hidden unless selected, aria-labelledby links to trigger */}
|
||||
Account content
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
### Select
|
||||
|
||||
```tsx
|
||||
import { Select } from "@/components/ui/select"
|
||||
|
||||
<Select>
|
||||
<SelectTrigger aria-label="Choose theme">
|
||||
<SelectValue placeholder="Theme" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{/* Keyboard navigable, announced to screen readers */}
|
||||
<SelectItem value="light">Light</SelectItem>
|
||||
<SelectItem value="dark">Dark</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
```
|
||||
|
||||
### Checkbox and Radio
|
||||
|
||||
```tsx
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { Label } from "@/components/ui/label"
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox id="terms" aria-describedby="terms-description" />
|
||||
<Label htmlFor="terms">Accept terms</Label>
|
||||
</div>
|
||||
<p id="terms-description" className="text-sm text-muted-foreground">
|
||||
You agree to our Terms of Service and Privacy Policy
|
||||
</p>
|
||||
```
|
||||
|
||||
### Alert
|
||||
|
||||
```tsx
|
||||
import { Alert } from "@/components/ui/alert"
|
||||
|
||||
<Alert role="alert">
|
||||
{/* Announced immediately to screen readers */}
|
||||
<AlertTitle>Error</AlertTitle>
|
||||
<AlertDescription>
|
||||
Your session has expired
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
```
|
||||
|
||||
## Color Contrast
|
||||
|
||||
Ensure sufficient contrast between text and background.
|
||||
|
||||
**WCAG Requirements:**
|
||||
- **AA**: 4.5:1 for normal text, 3:1 for large text
|
||||
- **AAA**: 7:1 for normal text, 4.5:1 for large text
|
||||
|
||||
**Check defaults:**
|
||||
```tsx
|
||||
// Good: High contrast
|
||||
<p className="text-gray-900 dark:text-gray-100">Text</p>
|
||||
|
||||
// Avoid: Low contrast
|
||||
<p className="text-gray-400 dark:text-gray-600">Hard to read</p>
|
||||
```
|
||||
|
||||
**Muted text:**
|
||||
```tsx
|
||||
// Use semantic muted foreground
|
||||
<p className="text-muted-foreground">
|
||||
Secondary text with accessible contrast
|
||||
</p>
|
||||
```
|
||||
|
||||
## Focus Indicators
|
||||
|
||||
Always provide visible focus indicators:
|
||||
|
||||
**Default focus ring:**
|
||||
```tsx
|
||||
<Button className="focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
|
||||
Button
|
||||
</Button>
|
||||
```
|
||||
|
||||
**Custom focus styles:**
|
||||
```tsx
|
||||
<a href="#" className="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:underline">
|
||||
Link
|
||||
</a>
|
||||
```
|
||||
|
||||
**Don't remove focus styles:**
|
||||
```tsx
|
||||
// Avoid
|
||||
<button className="focus:outline-none">Bad</button>
|
||||
|
||||
// Use focus-visible instead
|
||||
<button className="focus-visible:ring-2">Good</button>
|
||||
```
|
||||
|
||||
## Motion and Animation
|
||||
|
||||
Respect reduced motion preference:
|
||||
|
||||
```css
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
In components:
|
||||
```tsx
|
||||
<div className="transition-all motion-reduce:transition-none">
|
||||
Respects user preference
|
||||
</div>
|
||||
```
|
||||
|
||||
## Testing Checklist
|
||||
|
||||
- [ ] All interactive elements keyboard accessible
|
||||
- [ ] Focus indicators visible
|
||||
- [ ] Screen reader announces all content correctly
|
||||
- [ ] Form errors announced and associated
|
||||
- [ ] Color contrast meets WCAG AA
|
||||
- [ ] Semantic HTML used
|
||||
- [ ] ARIA labels provided for icon-only buttons
|
||||
- [ ] Modal/dialog focus trap works
|
||||
- [ ] Dropdown/select keyboard navigable
|
||||
- [ ] Live regions announce updates
|
||||
- [ ] Respects reduced motion preference
|
||||
- [ ] Works with browser zoom up to 200%
|
||||
- [ ] Tab order logical
|
||||
- [ ] Skip links provided for navigation
|
||||
|
||||
## Tools
|
||||
|
||||
**Testing tools:**
|
||||
- Lighthouse accessibility audit
|
||||
- axe DevTools browser extension
|
||||
- NVDA/JAWS screen readers
|
||||
- Keyboard-only navigation testing
|
||||
- Color contrast checkers (Contrast Ratio, WebAIM)
|
||||
|
||||
**Automated testing:**
|
||||
```bash
|
||||
npm install -D @axe-core/react
|
||||
```
|
||||
|
||||
```tsx
|
||||
import { useEffect } from 'react'
|
||||
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
import('@axe-core/react').then((axe) => {
|
||||
axe.default(React, ReactDOM, 1000)
|
||||
})
|
||||
}
|
||||
```
|
||||
424
.opencode/skills/ui-styling/references/shadcn-components.md
Normal file
424
.opencode/skills/ui-styling/references/shadcn-components.md
Normal file
@@ -0,0 +1,424 @@
|
||||
# shadcn/ui Component Reference
|
||||
|
||||
Complete catalog of shadcn/ui components with usage patterns and installation.
|
||||
|
||||
## Installation
|
||||
|
||||
**Add specific components:**
|
||||
```bash
|
||||
npx shadcn@latest add button
|
||||
npx shadcn@latest add button card dialog # Multiple
|
||||
npx shadcn@latest add --all # All components
|
||||
```
|
||||
|
||||
Components install to `components/ui/` with automatic dependency management.
|
||||
|
||||
## Form & Input Components
|
||||
|
||||
### Button
|
||||
```tsx
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
<Button variant="default">Default</Button>
|
||||
<Button variant="destructive">Delete</Button>
|
||||
<Button variant="outline" size="sm">Small Outline</Button>
|
||||
<Button variant="ghost" size="icon"><Icon /></Button>
|
||||
<Button variant="link">Link Style</Button>
|
||||
```
|
||||
|
||||
Variants: `default | destructive | outline | secondary | ghost | link`
|
||||
Sizes: `default | sm | lg | icon`
|
||||
|
||||
### Input
|
||||
```tsx
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input id="email" type="email" placeholder="you@example.com" />
|
||||
</div>
|
||||
```
|
||||
|
||||
### Form (with React Hook Form + Zod)
|
||||
```tsx
|
||||
import { useForm } from "react-hook-form"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import * as z from "zod"
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
const schema = z.object({
|
||||
username: z.string().min(2).max(50),
|
||||
email: z.string().email()
|
||||
})
|
||||
|
||||
function ProfileForm() {
|
||||
const form = useForm({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: { username: "", email: "" }
|
||||
})
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(console.log)} className="space-y-8">
|
||||
<FormField control={form.control} name="username" render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Username</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="shadcn" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)} />
|
||||
<Button type="submit">Submit</Button>
|
||||
</form>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Select
|
||||
```tsx
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
|
||||
<Select>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue placeholder="Theme" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="light">Light</SelectItem>
|
||||
<SelectItem value="dark">Dark</SelectItem>
|
||||
<SelectItem value="system">System</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
```
|
||||
|
||||
### Checkbox
|
||||
```tsx
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { Label } from "@/components/ui/label"
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox id="terms" />
|
||||
<Label htmlFor="terms">Accept terms</Label>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Radio Group
|
||||
```tsx
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
|
||||
import { Label } from "@/components/ui/label"
|
||||
|
||||
<RadioGroup defaultValue="option-one">
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="option-one" id="option-one" />
|
||||
<Label htmlFor="option-one">Option One</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="option-two" id="option-two" />
|
||||
<Label htmlFor="option-two">Option Two</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
```
|
||||
|
||||
### Textarea
|
||||
```tsx
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
|
||||
<Textarea placeholder="Type your message here." />
|
||||
```
|
||||
|
||||
### Switch
|
||||
```tsx
|
||||
import { Switch } from "@/components/ui/switch"
|
||||
import { Label } from "@/components/ui/label"
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch id="airplane-mode" />
|
||||
<Label htmlFor="airplane-mode">Airplane Mode</Label>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Date Picker
|
||||
```tsx
|
||||
import { Calendar } from "@/components/ui/calendar"
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { CalendarIcon } from "lucide-react"
|
||||
import { format } from "date-fns"
|
||||
import { useState } from "react"
|
||||
|
||||
const [date, setDate] = useState<Date>()
|
||||
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button variant="outline">
|
||||
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||
{date ? format(date, "PPP") : "Pick a date"}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0">
|
||||
<Calendar mode="single" selected={date} onSelect={setDate} />
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
```
|
||||
|
||||
## Layout & Navigation
|
||||
|
||||
### Card
|
||||
```tsx
|
||||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Card Title</CardTitle>
|
||||
<CardDescription>Card Description</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p>Card Content</p>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button>Action</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
```
|
||||
|
||||
### Tabs
|
||||
```tsx
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
|
||||
<Tabs defaultValue="account">
|
||||
<TabsList>
|
||||
<TabsTrigger value="account">Account</TabsTrigger>
|
||||
<TabsTrigger value="password">Password</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="account">Account settings</TabsContent>
|
||||
<TabsContent value="password">Password settings</TabsContent>
|
||||
</Tabs>
|
||||
```
|
||||
|
||||
### Accordion
|
||||
```tsx
|
||||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
|
||||
|
||||
<Accordion type="single" collapsible>
|
||||
<AccordionItem value="item-1">
|
||||
<AccordionTrigger>Is it accessible?</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
Yes. It adheres to WAI-ARIA design pattern.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
<AccordionItem value="item-2">
|
||||
<AccordionTrigger>Is it styled?</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
Yes. Comes with default styles customizable with Tailwind.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
```
|
||||
|
||||
### Navigation Menu
|
||||
```tsx
|
||||
import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger } from "@/components/ui/navigation-menu"
|
||||
|
||||
<NavigationMenu>
|
||||
<NavigationMenuList>
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>
|
||||
<NavigationMenuContent>
|
||||
<NavigationMenuLink>Introduction</NavigationMenuLink>
|
||||
<NavigationMenuLink>Installation</NavigationMenuLink>
|
||||
</NavigationMenuContent>
|
||||
</NavigationMenuItem>
|
||||
</NavigationMenuList>
|
||||
</NavigationMenu>
|
||||
```
|
||||
|
||||
## Overlays & Dialogs
|
||||
|
||||
### Dialog
|
||||
```tsx
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
|
||||
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button>Open</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Are you sure?</DialogTitle>
|
||||
<DialogDescription>This action cannot be undone.</DialogDescription>
|
||||
</DialogHeader>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
```
|
||||
|
||||
### Drawer
|
||||
```tsx
|
||||
import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "@/components/ui/drawer"
|
||||
|
||||
<Drawer>
|
||||
<DrawerTrigger>Open</DrawerTrigger>
|
||||
<DrawerContent>
|
||||
<DrawerHeader>
|
||||
<DrawerTitle>Title</DrawerTitle>
|
||||
<DrawerDescription>Description</DrawerDescription>
|
||||
</DrawerHeader>
|
||||
<DrawerFooter>
|
||||
<Button>Submit</Button>
|
||||
<DrawerClose>Cancel</DrawerClose>
|
||||
</DrawerFooter>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
```
|
||||
|
||||
### Popover
|
||||
```tsx
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
|
||||
|
||||
<Popover>
|
||||
<PopoverTrigger>Open</PopoverTrigger>
|
||||
<PopoverContent>Content here</PopoverContent>
|
||||
</Popover>
|
||||
```
|
||||
|
||||
### Toast
|
||||
```tsx
|
||||
import { useToast } from "@/hooks/use-toast"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
const { toast } = useToast()
|
||||
|
||||
<Button onClick={() => {
|
||||
toast({
|
||||
title: "Scheduled: Catch up",
|
||||
description: "Friday, February 10, 2023 at 5:57 PM"
|
||||
})
|
||||
}}>
|
||||
Show Toast
|
||||
</Button>
|
||||
```
|
||||
|
||||
### Command
|
||||
```tsx
|
||||
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
|
||||
|
||||
<Command>
|
||||
<CommandInput placeholder="Type a command or search..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No results found.</CommandEmpty>
|
||||
<CommandGroup heading="Suggestions">
|
||||
<CommandItem>Calendar</CommandItem>
|
||||
<CommandItem>Search Emoji</CommandItem>
|
||||
<CommandItem>Calculator</CommandItem>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
```
|
||||
|
||||
### Alert Dialog
|
||||
```tsx
|
||||
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog"
|
||||
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button variant="destructive">Delete</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Absolutely sure?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
This permanently deletes your account and removes data from servers.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction>Continue</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
```
|
||||
|
||||
## Feedback & Status
|
||||
|
||||
### Alert
|
||||
```tsx
|
||||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
|
||||
|
||||
<Alert>
|
||||
<AlertTitle>Heads up!</AlertTitle>
|
||||
<AlertDescription>You can add components using CLI.</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<Alert variant="destructive">
|
||||
<AlertTitle>Error</AlertTitle>
|
||||
<AlertDescription>Session expired. Please log in.</AlertDescription>
|
||||
</Alert>
|
||||
```
|
||||
|
||||
### Progress
|
||||
```tsx
|
||||
import { Progress } from "@/components/ui/progress"
|
||||
|
||||
<Progress value={33} />
|
||||
```
|
||||
|
||||
### Skeleton
|
||||
```tsx
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
<Skeleton className="h-12 w-12 rounded-full" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-[250px]" />
|
||||
<Skeleton className="h-4 w-[200px]" />
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Display Components
|
||||
|
||||
### Table
|
||||
```tsx
|
||||
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
||||
|
||||
<Table>
|
||||
<TableCaption>Recent invoices</TableCaption>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Invoice</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Amount</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell>INV001</TableCell>
|
||||
<TableCell>Paid</TableCell>
|
||||
<TableCell>$250.00</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
```
|
||||
|
||||
### Avatar
|
||||
```tsx
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
||||
|
||||
<Avatar>
|
||||
<AvatarImage src="https://github.com/shadcn.png" />
|
||||
<AvatarFallback>CN</AvatarFallback>
|
||||
</Avatar>
|
||||
```
|
||||
|
||||
### Badge
|
||||
```tsx
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
|
||||
<Badge>Default</Badge>
|
||||
<Badge variant="secondary">Secondary</Badge>
|
||||
<Badge variant="destructive">Destructive</Badge>
|
||||
<Badge variant="outline">Outline</Badge>
|
||||
```
|
||||
373
.opencode/skills/ui-styling/references/shadcn-theming.md
Normal file
373
.opencode/skills/ui-styling/references/shadcn-theming.md
Normal file
@@ -0,0 +1,373 @@
|
||||
# shadcn/ui Theming & Customization
|
||||
|
||||
Theme configuration, CSS variables, dark mode, and component customization.
|
||||
|
||||
## Dark Mode Setup
|
||||
|
||||
### Next.js App Router
|
||||
|
||||
**1. Install next-themes:**
|
||||
```bash
|
||||
npm install next-themes
|
||||
```
|
||||
|
||||
**2. Create theme provider:**
|
||||
```tsx
|
||||
// components/theme-provider.tsx
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { ThemeProvider as NextThemesProvider } from "next-themes"
|
||||
|
||||
export function ThemeProvider({
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof NextThemesProvider>) {
|
||||
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
|
||||
}
|
||||
```
|
||||
|
||||
**3. Wrap app:**
|
||||
```tsx
|
||||
// app/layout.tsx
|
||||
import { ThemeProvider } from "@/components/theme-provider"
|
||||
|
||||
export default function RootLayout({ children }) {
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<body>
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
defaultTheme="system"
|
||||
enableSystem
|
||||
disableTransitionOnChange
|
||||
>
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
**4. Theme toggle component:**
|
||||
```tsx
|
||||
import { Moon, Sun } from "lucide-react"
|
||||
import { useTheme } from "next-themes"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
export function ThemeToggle() {
|
||||
const { setTheme, theme } = useTheme()
|
||||
|
||||
return (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setTheme(theme === "light" ? "dark" : "light")}
|
||||
>
|
||||
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
||||
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
||||
<span className="sr-only">Toggle theme</span>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Vite / Other Frameworks
|
||||
|
||||
Use similar approach with next-themes or implement custom solution:
|
||||
|
||||
```javascript
|
||||
// Store preference
|
||||
function toggleDarkMode() {
|
||||
const isDark = document.documentElement.classList.toggle('dark')
|
||||
localStorage.setItem('theme', isDark ? 'dark' : 'light')
|
||||
}
|
||||
|
||||
// Initialize on load
|
||||
if (localStorage.theme === 'dark' ||
|
||||
(!('theme' in localStorage) &&
|
||||
window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
document.documentElement.classList.add('dark')
|
||||
}
|
||||
```
|
||||
|
||||
## CSS Variable System
|
||||
|
||||
shadcn/ui uses CSS variables for theming. Variables defined in `globals.css`:
|
||||
|
||||
```css
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 222.2 84% 4.9%;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
--primary: 210 40% 98%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 212.7 26.8% 83.9%;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Color Format
|
||||
|
||||
Values use HSL format without `hsl()` wrapper for better opacity control:
|
||||
```css
|
||||
--primary: 222.2 47.4% 11.2%; /* H S L */
|
||||
```
|
||||
|
||||
Usage in Tailwind:
|
||||
```css
|
||||
background: hsl(var(--primary));
|
||||
background: hsl(var(--primary) / 0.5); /* 50% opacity */
|
||||
```
|
||||
|
||||
## Tailwind Configuration
|
||||
|
||||
Map CSS variables to Tailwind utilities:
|
||||
|
||||
```ts
|
||||
// tailwind.config.ts
|
||||
export default {
|
||||
darkMode: ["class"],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
border: "hsl(var(--border))",
|
||||
input: "hsl(var(--input))",
|
||||
ring: "hsl(var(--ring))",
|
||||
background: "hsl(var(--background))",
|
||||
foreground: "hsl(var(--foreground))",
|
||||
primary: {
|
||||
DEFAULT: "hsl(var(--primary))",
|
||||
foreground: "hsl(var(--primary-foreground))",
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: "hsl(var(--secondary))",
|
||||
foreground: "hsl(var(--secondary-foreground))",
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: "hsl(var(--destructive))",
|
||||
foreground: "hsl(var(--destructive-foreground))",
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: "hsl(var(--muted))",
|
||||
foreground: "hsl(var(--muted-foreground))",
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: "hsl(var(--accent))",
|
||||
foreground: "hsl(var(--accent-foreground))",
|
||||
},
|
||||
},
|
||||
borderRadius: {
|
||||
lg: "var(--radius)",
|
||||
md: "calc(var(--radius) - 2px)",
|
||||
sm: "calc(var(--radius) - 4px)",
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
## Color Customization
|
||||
|
||||
### Method 1: Update CSS Variables
|
||||
|
||||
Change colors by modifying CSS variables in `globals.css`:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--primary: 262.1 83.3% 57.8%; /* Purple */
|
||||
--primary-foreground: 210 20% 98%;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--primary: 263.4 70% 50.4%; /* Darker purple */
|
||||
--primary-foreground: 210 20% 98%;
|
||||
}
|
||||
```
|
||||
|
||||
### Method 2: Theme Generator
|
||||
|
||||
Use shadcn/ui theme generator: https://ui.shadcn.com/themes
|
||||
|
||||
Select base color, generate theme, copy CSS variables.
|
||||
|
||||
### Method 3: Multiple Themes
|
||||
|
||||
Create theme variants with data attributes:
|
||||
|
||||
```css
|
||||
[data-theme="violet"] {
|
||||
--primary: 262.1 83.3% 57.8%;
|
||||
--primary-foreground: 210 20% 98%;
|
||||
}
|
||||
|
||||
[data-theme="rose"] {
|
||||
--primary: 346.8 77.2% 49.8%;
|
||||
--primary-foreground: 355.7 100% 97.3%;
|
||||
}
|
||||
```
|
||||
|
||||
Apply theme:
|
||||
```tsx
|
||||
<div data-theme="violet">
|
||||
<Button>Violet theme</Button>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Component Customization
|
||||
|
||||
Components live in your codebase - modify directly.
|
||||
|
||||
### Customize Variants
|
||||
|
||||
```tsx
|
||||
// components/ui/button.tsx
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center rounded-md text-sm font-medium",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground",
|
||||
destructive: "bg-destructive text-destructive-foreground",
|
||||
outline: "border border-input bg-background",
|
||||
// Add custom variant
|
||||
gradient: "bg-gradient-to-r from-purple-500 to-pink-500 text-white",
|
||||
},
|
||||
size: {
|
||||
default: "h-10 px-4 py-2",
|
||||
sm: "h-9 rounded-md px-3",
|
||||
lg: "h-11 rounded-md px-8",
|
||||
// Add custom size
|
||||
xl: "h-14 rounded-md px-10 text-lg",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
```
|
||||
|
||||
Usage:
|
||||
```tsx
|
||||
<Button variant="gradient" size="xl">Custom Button</Button>
|
||||
```
|
||||
|
||||
### Customize Styles
|
||||
|
||||
Modify base styles in component:
|
||||
|
||||
```tsx
|
||||
// components/ui/card.tsx
|
||||
const Card = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"rounded-xl border bg-card text-card-foreground shadow-lg", // Modified
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
```
|
||||
|
||||
### Override with className
|
||||
|
||||
Pass additional classes to override:
|
||||
|
||||
```tsx
|
||||
<Card className="border-2 border-purple-500 shadow-2xl hover:scale-105 transition-transform">
|
||||
Custom styled card
|
||||
</Card>
|
||||
```
|
||||
|
||||
## Base Color Presets
|
||||
|
||||
shadcn/ui provides base color presets during `init`:
|
||||
|
||||
- **Slate**: Cool gray tones
|
||||
- **Gray**: Neutral gray
|
||||
- **Zinc**: Warm gray
|
||||
- **Neutral**: Balanced gray
|
||||
- **Stone**: Earthy gray
|
||||
|
||||
Select during setup or change later by updating CSS variables.
|
||||
|
||||
## Style Variants
|
||||
|
||||
Two component styles available:
|
||||
|
||||
- **Default**: Softer, more rounded
|
||||
- **New York**: Sharp, more contrast
|
||||
|
||||
Select during `init` or in `components.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"style": "new-york",
|
||||
"tailwind": {
|
||||
"cssVariables": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Radius Customization
|
||||
|
||||
Control border radius globally:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--radius: 0.5rem; /* Default */
|
||||
--radius: 0rem; /* Sharp corners */
|
||||
--radius: 1rem; /* Rounded */
|
||||
}
|
||||
```
|
||||
|
||||
Components use radius variable:
|
||||
```tsx
|
||||
className="rounded-lg" /* Uses var(--radius) */
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Use CSS Variables**: Enables runtime theme switching
|
||||
2. **Consistent Foreground Colors**: Pair each color with appropriate foreground
|
||||
3. **Test Both Themes**: Verify components in light and dark modes
|
||||
4. **Semantic Naming**: Use `destructive` not `red`, `muted` not `gray`
|
||||
5. **Accessibility**: Maintain sufficient color contrast (WCAG AA minimum)
|
||||
6. **Component Overrides**: Use `className` prop for one-off customization
|
||||
7. **Extract Patterns**: Create custom variants for repeated customizations
|
||||
483
.opencode/skills/ui-styling/references/tailwind-customization.md
Normal file
483
.opencode/skills/ui-styling/references/tailwind-customization.md
Normal file
@@ -0,0 +1,483 @@
|
||||
# Tailwind CSS Customization
|
||||
|
||||
Config file structure, custom utilities, plugins, and theme extensions.
|
||||
|
||||
## @theme Directive
|
||||
|
||||
Modern approach to customize Tailwind using CSS:
|
||||
|
||||
```css
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
/* Custom colors */
|
||||
--color-brand-50: oklch(0.97 0.02 264);
|
||||
--color-brand-500: oklch(0.55 0.22 264);
|
||||
--color-brand-900: oklch(0.25 0.15 264);
|
||||
|
||||
/* Custom fonts */
|
||||
--font-display: "Satoshi", "Inter", sans-serif;
|
||||
--font-body: "Inter", system-ui, sans-serif;
|
||||
|
||||
/* Custom spacing */
|
||||
--spacing-18: calc(var(--spacing) * 18);
|
||||
--spacing-navbar: 4.5rem;
|
||||
|
||||
/* Custom breakpoints */
|
||||
--breakpoint-3xl: 120rem;
|
||||
--breakpoint-tablet: 48rem;
|
||||
|
||||
/* Custom shadows */
|
||||
--shadow-glow: 0 0 20px rgba(139, 92, 246, 0.3);
|
||||
|
||||
/* Custom radius */
|
||||
--radius-large: 1.5rem;
|
||||
}
|
||||
```
|
||||
|
||||
**Usage:**
|
||||
```html
|
||||
<div class="bg-brand-500 font-display shadow-glow rounded-large">
|
||||
Custom themed element
|
||||
</div>
|
||||
|
||||
<div class="tablet:grid-cols-2 3xl:grid-cols-6">
|
||||
Custom breakpoints
|
||||
</div>
|
||||
```
|
||||
|
||||
## Color Customization
|
||||
|
||||
### Custom Color Palette
|
||||
|
||||
```css
|
||||
@theme {
|
||||
/* Full color scale */
|
||||
--color-primary-50: oklch(0.98 0.02 250);
|
||||
--color-primary-100: oklch(0.95 0.05 250);
|
||||
--color-primary-200: oklch(0.90 0.10 250);
|
||||
--color-primary-300: oklch(0.85 0.15 250);
|
||||
--color-primary-400: oklch(0.75 0.18 250);
|
||||
--color-primary-500: oklch(0.65 0.22 250);
|
||||
--color-primary-600: oklch(0.55 0.22 250);
|
||||
--color-primary-700: oklch(0.45 0.20 250);
|
||||
--color-primary-800: oklch(0.35 0.18 250);
|
||||
--color-primary-900: oklch(0.25 0.15 250);
|
||||
--color-primary-950: oklch(0.15 0.10 250);
|
||||
}
|
||||
```
|
||||
|
||||
### Semantic Colors
|
||||
|
||||
```css
|
||||
@theme {
|
||||
--color-success: oklch(0.65 0.18 145);
|
||||
--color-warning: oklch(0.75 0.15 85);
|
||||
--color-error: oklch(0.60 0.22 25);
|
||||
--color-info: oklch(0.65 0.18 240);
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
<div class="bg-success text-white">Success message</div>
|
||||
<div class="border-error">Error state</div>
|
||||
```
|
||||
|
||||
## Typography Customization
|
||||
|
||||
### Custom Fonts
|
||||
|
||||
```css
|
||||
@theme {
|
||||
--font-sans: "Inter", system-ui, sans-serif;
|
||||
--font-serif: "Merriweather", Georgia, serif;
|
||||
--font-mono: "JetBrains Mono", Consolas, monospace;
|
||||
--font-display: "Playfair Display", serif;
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
<h1 class="font-display">Display heading</h1>
|
||||
<p class="font-sans">Body text</p>
|
||||
<code class="font-mono">Code block</code>
|
||||
```
|
||||
|
||||
### Custom Font Sizes
|
||||
|
||||
```css
|
||||
@theme {
|
||||
--font-size-xs: 0.75rem;
|
||||
--font-size-sm: 0.875rem;
|
||||
--font-size-base: 1rem;
|
||||
--font-size-lg: 1.125rem;
|
||||
--font-size-xl: 1.25rem;
|
||||
--font-size-2xl: 1.5rem;
|
||||
--font-size-3xl: 1.875rem;
|
||||
--font-size-4xl: 2.25rem;
|
||||
--font-size-5xl: 3rem;
|
||||
--font-size-jumbo: 4rem;
|
||||
}
|
||||
```
|
||||
|
||||
## Spacing Customization
|
||||
|
||||
```css
|
||||
@theme {
|
||||
/* Add custom spacing values */
|
||||
--spacing-13: calc(var(--spacing) * 13);
|
||||
--spacing-15: calc(var(--spacing) * 15);
|
||||
--spacing-18: calc(var(--spacing) * 18);
|
||||
|
||||
/* Named spacing */
|
||||
--spacing-header: 4rem;
|
||||
--spacing-footer: 3rem;
|
||||
--spacing-section: 6rem;
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
<div class="p-18">Custom padding</div>
|
||||
<section class="py-section">Section spacing</section>
|
||||
```
|
||||
|
||||
## Custom Utilities
|
||||
|
||||
Create reusable utility classes:
|
||||
|
||||
```css
|
||||
@utility content-auto {
|
||||
content-visibility: auto;
|
||||
}
|
||||
|
||||
@utility tab-* {
|
||||
tab-size: var(--tab-size-*);
|
||||
}
|
||||
|
||||
@utility glass {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
```
|
||||
|
||||
**Usage:**
|
||||
```html
|
||||
<div class="content-auto">Optimized rendering</div>
|
||||
<pre class="tab-4">Code with 4-space tabs</pre>
|
||||
<div class="glass">Glassmorphism effect</div>
|
||||
```
|
||||
|
||||
## Custom Variants
|
||||
|
||||
Create custom state variants:
|
||||
|
||||
```css
|
||||
@custom-variant theme-midnight (&:where([data-theme="midnight"] *));
|
||||
@custom-variant aria-checked (&[aria-checked="true"]);
|
||||
@custom-variant required (&:required);
|
||||
```
|
||||
|
||||
**Usage:**
|
||||
```html
|
||||
<div data-theme="midnight">
|
||||
<div class="theme-midnight:bg-navy-900">
|
||||
Applies in midnight theme
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input class="required:border-red-500" required />
|
||||
```
|
||||
|
||||
## Layer Organization
|
||||
|
||||
Organize CSS into layers:
|
||||
|
||||
```css
|
||||
@layer base {
|
||||
h1 {
|
||||
@apply text-4xl font-bold tracking-tight;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply text-3xl font-semibold;
|
||||
}
|
||||
|
||||
a {
|
||||
@apply text-blue-600 hover:text-blue-700 underline-offset-4 hover:underline;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground antialiased;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.btn {
|
||||
@apply px-4 py-2 rounded-lg font-medium transition-colors;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@apply bg-blue-600 text-white hover:bg-blue-700;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply bg-gray-200 text-gray-900 hover:bg-gray-300;
|
||||
}
|
||||
|
||||
.card {
|
||||
@apply bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-shadow;
|
||||
}
|
||||
|
||||
.input {
|
||||
@apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.scrollbar-hide {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## @apply Directive
|
||||
|
||||
Extract repeated utility patterns:
|
||||
|
||||
```css
|
||||
.btn-primary {
|
||||
@apply bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white font-semibold px-6 py-3 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-blue-300;
|
||||
}
|
||||
|
||||
.input-field {
|
||||
@apply w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed;
|
||||
}
|
||||
|
||||
.section-container {
|
||||
@apply container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl;
|
||||
}
|
||||
```
|
||||
|
||||
**Usage:**
|
||||
```html
|
||||
<button class="btn-primary">Click me</button>
|
||||
<input class="input-field" />
|
||||
<div class="section-container">Content</div>
|
||||
```
|
||||
|
||||
## Plugins
|
||||
|
||||
### Official Plugins
|
||||
|
||||
```bash
|
||||
npm install -D @tailwindcss/typography @tailwindcss/forms @tailwindcss/container-queries
|
||||
```
|
||||
|
||||
```javascript
|
||||
// tailwind.config.js
|
||||
export default {
|
||||
plugins: [
|
||||
require('@tailwindcss/typography'),
|
||||
require('@tailwindcss/forms'),
|
||||
require('@tailwindcss/container-queries'),
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
**Typography plugin:**
|
||||
```html
|
||||
<article class="prose lg:prose-xl">
|
||||
<h1>Styled article</h1>
|
||||
<p>Automatically styled prose content</p>
|
||||
</article>
|
||||
```
|
||||
|
||||
**Forms plugin:**
|
||||
```html
|
||||
<!-- Automatically styled form elements -->
|
||||
<input type="text" />
|
||||
<select></select>
|
||||
<textarea></textarea>
|
||||
```
|
||||
|
||||
### Custom Plugin
|
||||
|
||||
```javascript
|
||||
// tailwind.config.js
|
||||
const plugin = require('tailwindcss/plugin')
|
||||
|
||||
export default {
|
||||
plugins: [
|
||||
plugin(function({ addUtilities, addComponents, theme }) {
|
||||
// Add utilities
|
||||
addUtilities({
|
||||
'.text-shadow': {
|
||||
textShadow: '2px 2px 4px rgba(0, 0, 0, 0.1)',
|
||||
},
|
||||
'.text-shadow-lg': {
|
||||
textShadow: '4px 4px 8px rgba(0, 0, 0, 0.2)',
|
||||
},
|
||||
})
|
||||
|
||||
// Add components
|
||||
addComponents({
|
||||
'.card-custom': {
|
||||
backgroundColor: theme('colors.white'),
|
||||
borderRadius: theme('borderRadius.lg'),
|
||||
padding: theme('spacing.6'),
|
||||
boxShadow: theme('boxShadow.md'),
|
||||
},
|
||||
})
|
||||
}),
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
## Configuration Examples
|
||||
|
||||
### Complete Tailwind Config
|
||||
|
||||
```javascript
|
||||
// tailwind.config.ts
|
||||
import type { Config } from 'tailwindcss'
|
||||
|
||||
const config: Config = {
|
||||
darkMode: ["class"],
|
||||
content: [
|
||||
'./pages/**/*.{ts,tsx}',
|
||||
'./components/**/*.{ts,tsx}',
|
||||
'./app/**/*.{ts,tsx}',
|
||||
],
|
||||
theme: {
|
||||
container: {
|
||||
center: true,
|
||||
padding: "2rem",
|
||||
screens: {
|
||||
"2xl": "1400px",
|
||||
},
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
border: "hsl(var(--border))",
|
||||
input: "hsl(var(--input))",
|
||||
ring: "hsl(var(--ring))",
|
||||
background: "hsl(var(--background))",
|
||||
foreground: "hsl(var(--foreground))",
|
||||
primary: {
|
||||
DEFAULT: "hsl(var(--primary))",
|
||||
foreground: "hsl(var(--primary-foreground))",
|
||||
},
|
||||
brand: {
|
||||
50: '#f0f9ff',
|
||||
500: '#3b82f6',
|
||||
900: '#1e3a8a',
|
||||
},
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
||||
display: ['Playfair Display', 'serif'],
|
||||
},
|
||||
spacing: {
|
||||
'18': '4.5rem',
|
||||
'88': '22rem',
|
||||
'128': '32rem',
|
||||
},
|
||||
borderRadius: {
|
||||
lg: "var(--radius)",
|
||||
md: "calc(var(--radius) - 2px)",
|
||||
sm: "calc(var(--radius) - 4px)",
|
||||
},
|
||||
keyframes: {
|
||||
"slide-in": {
|
||||
"0%": { transform: "translateX(-100%)" },
|
||||
"100%": { transform: "translateX(0)" },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
"slide-in": "slide-in 0.5s ease-out",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [require("tailwindcss-animate")],
|
||||
}
|
||||
|
||||
export default config
|
||||
```
|
||||
|
||||
## Dark Mode Configuration
|
||||
|
||||
```javascript
|
||||
// tailwind.config.js
|
||||
export default {
|
||||
darkMode: ["class"], // or "media" for automatic
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
**Usage:**
|
||||
```html
|
||||
<!-- Class-based -->
|
||||
<html class="dark">
|
||||
<div class="bg-white dark:bg-gray-900">
|
||||
Responds to .dark class
|
||||
</div>
|
||||
</html>
|
||||
|
||||
<!-- Media query-based -->
|
||||
<div class="bg-white dark:bg-gray-900">
|
||||
Responds to system preference automatically
|
||||
</div>
|
||||
```
|
||||
|
||||
## Content Configuration
|
||||
|
||||
Specify files to scan for classes:
|
||||
|
||||
```javascript
|
||||
// tailwind.config.js
|
||||
export default {
|
||||
content: [
|
||||
"./src/**/*.{js,jsx,ts,tsx}",
|
||||
"./app/**/*.{js,jsx,ts,tsx}",
|
||||
"./components/**/*.{js,jsx,ts,tsx}",
|
||||
"./pages/**/*.{js,jsx,ts,tsx}",
|
||||
],
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
### Safelist
|
||||
|
||||
Preserve dynamic classes:
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
safelist: [
|
||||
'bg-red-500',
|
||||
'bg-green-500',
|
||||
'bg-blue-500',
|
||||
{
|
||||
pattern: /bg-(red|green|blue)-(100|500|900)/,
|
||||
},
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Use @theme for simple customizations**: Prefer CSS-based customization
|
||||
2. **Extract components sparingly**: Use @apply only for truly repeated patterns
|
||||
3. **Leverage design tokens**: Define custom tokens in @theme
|
||||
4. **Layer organization**: Keep base, components, and utilities separate
|
||||
5. **Plugin for complex logic**: Use plugins for advanced customizations
|
||||
6. **Test dark mode**: Ensure custom colors work in both themes
|
||||
7. **Document custom utilities**: Add comments explaining custom classes
|
||||
8. **Semantic naming**: Use descriptive names (primary not blue)
|
||||
382
.opencode/skills/ui-styling/references/tailwind-responsive.md
Normal file
382
.opencode/skills/ui-styling/references/tailwind-responsive.md
Normal file
@@ -0,0 +1,382 @@
|
||||
# Tailwind CSS Responsive Design
|
||||
|
||||
Mobile-first breakpoints, responsive utilities, and adaptive layouts.
|
||||
|
||||
## Mobile-First Approach
|
||||
|
||||
Tailwind uses mobile-first responsive design. Base styles apply to all screen sizes, then use breakpoint prefixes to override at larger sizes.
|
||||
|
||||
```html
|
||||
<!-- Base: 1 column (mobile)
|
||||
sm: 2 columns (tablet)
|
||||
lg: 4 columns (desktop) -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<div>Item 1</div>
|
||||
<div>Item 2</div>
|
||||
<div>Item 3</div>
|
||||
<div>Item 4</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Breakpoint System
|
||||
|
||||
**Default breakpoints:**
|
||||
|
||||
| Prefix | Min Width | CSS Media Query |
|
||||
|--------|-----------|-----------------|
|
||||
| `sm:` | 640px | `@media (min-width: 640px)` |
|
||||
| `md:` | 768px | `@media (min-width: 768px)` |
|
||||
| `lg:` | 1024px | `@media (min-width: 1024px)` |
|
||||
| `xl:` | 1280px | `@media (min-width: 1280px)` |
|
||||
| `2xl:` | 1536px | `@media (min-width: 1536px)` |
|
||||
|
||||
## Responsive Patterns
|
||||
|
||||
### Layout Changes
|
||||
|
||||
```html
|
||||
<!-- Vertical on mobile, horizontal on desktop -->
|
||||
<div class="flex flex-col lg:flex-row gap-4">
|
||||
<div>Left</div>
|
||||
<div>Right</div>
|
||||
</div>
|
||||
|
||||
<!-- 1 column -> 2 columns -> 3 columns -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
|
||||
<div>Item 1</div>
|
||||
<div>Item 2</div>
|
||||
<div>Item 3</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Visibility
|
||||
|
||||
```html
|
||||
<!-- Hide on mobile, show on desktop -->
|
||||
<div class="hidden lg:block">
|
||||
Desktop only content
|
||||
</div>
|
||||
|
||||
<!-- Show on mobile, hide on desktop -->
|
||||
<div class="block lg:hidden">
|
||||
Mobile only content
|
||||
</div>
|
||||
|
||||
<!-- Different content per breakpoint -->
|
||||
<div class="lg:hidden">Mobile menu</div>
|
||||
<div class="hidden lg:flex">Desktop navigation</div>
|
||||
```
|
||||
|
||||
### Typography
|
||||
|
||||
```html
|
||||
<!-- Responsive text sizes -->
|
||||
<h1 class="text-2xl md:text-4xl lg:text-6xl font-bold">
|
||||
Heading scales with screen size
|
||||
</h1>
|
||||
|
||||
<p class="text-sm md:text-base lg:text-lg">
|
||||
Body text scales appropriately
|
||||
</p>
|
||||
```
|
||||
|
||||
### Spacing
|
||||
|
||||
```html
|
||||
<!-- Responsive padding -->
|
||||
<div class="p-4 md:p-6 lg:p-8">
|
||||
More padding on larger screens
|
||||
</div>
|
||||
|
||||
<!-- Responsive gap -->
|
||||
<div class="flex gap-2 md:gap-4 lg:gap-6">
|
||||
<div>Item 1</div>
|
||||
<div>Item 2</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Width
|
||||
|
||||
```html
|
||||
<!-- Full width on mobile, constrained on desktop -->
|
||||
<div class="w-full lg:w-1/2 xl:w-1/3">
|
||||
Responsive width
|
||||
</div>
|
||||
|
||||
<!-- Responsive max-width -->
|
||||
<div class="max-w-sm md:max-w-2xl lg:max-w-4xl mx-auto">
|
||||
Centered with responsive max width
|
||||
</div>
|
||||
```
|
||||
|
||||
## Common Responsive Layouts
|
||||
|
||||
### Sidebar Layout
|
||||
|
||||
```html
|
||||
<div class="flex flex-col lg:flex-row min-h-screen">
|
||||
<!-- Sidebar: Full width on mobile, fixed on desktop -->
|
||||
<aside class="w-full lg:w-64 bg-gray-100 p-4">
|
||||
Sidebar
|
||||
</aside>
|
||||
|
||||
<!-- Main content -->
|
||||
<main class="flex-1 p-4 md:p-8">
|
||||
Main content
|
||||
</main>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Card Grid
|
||||
|
||||
```html
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6">
|
||||
<div class="bg-white rounded-lg shadow p-6">Card 1</div>
|
||||
<div class="bg-white rounded-lg shadow p-6">Card 2</div>
|
||||
<div class="bg-white rounded-lg shadow p-6">Card 3</div>
|
||||
<div class="bg-white rounded-lg shadow p-6">Card 4</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Hero Section
|
||||
|
||||
```html
|
||||
<section class="py-12 md:py-20 lg:py-32">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex flex-col lg:flex-row items-center gap-8 lg:gap-12">
|
||||
<div class="flex-1 text-center lg:text-left">
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-4">
|
||||
Hero Title
|
||||
</h1>
|
||||
<p class="text-lg md:text-xl mb-6">
|
||||
Hero description
|
||||
</p>
|
||||
<button class="px-6 py-3 md:px-8 md:py-4">
|
||||
CTA Button
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<img src="hero.jpg" class="w-full rounded-lg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
### Navigation
|
||||
|
||||
```html
|
||||
<nav class="bg-white shadow">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<div class="text-xl font-bold">Logo</div>
|
||||
|
||||
<!-- Desktop navigation -->
|
||||
<div class="hidden md:flex gap-6">
|
||||
<a href="#">Home</a>
|
||||
<a href="#">About</a>
|
||||
<a href="#">Services</a>
|
||||
<a href="#">Contact</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<button class="md:hidden">
|
||||
<svg class="w-6 h-6">...</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
```
|
||||
|
||||
## Max-Width Queries
|
||||
|
||||
Apply styles only below certain breakpoint using `max-*:` prefix:
|
||||
|
||||
```html
|
||||
<!-- Only on mobile and tablet (below 1024px) -->
|
||||
<div class="max-lg:text-center">
|
||||
Centered on mobile/tablet, left-aligned on desktop
|
||||
</div>
|
||||
|
||||
<!-- Only on mobile (below 640px) -->
|
||||
<div class="max-sm:hidden">
|
||||
Hidden only on mobile
|
||||
</div>
|
||||
```
|
||||
|
||||
Available: `max-sm:` `max-md:` `max-lg:` `max-xl:` `max-2xl:`
|
||||
|
||||
## Range Queries
|
||||
|
||||
Apply styles between breakpoints:
|
||||
|
||||
```html
|
||||
<!-- Only on tablets (between md and lg) -->
|
||||
<div class="md:block lg:hidden">
|
||||
Visible only on tablets
|
||||
</div>
|
||||
|
||||
<!-- Between sm and xl -->
|
||||
<div class="sm:grid-cols-2 xl:grid-cols-4">
|
||||
2 columns on tablet, 4 on extra large
|
||||
</div>
|
||||
```
|
||||
|
||||
## Container Queries
|
||||
|
||||
Style elements based on parent container width:
|
||||
|
||||
```html
|
||||
<div class="@container">
|
||||
<div class="@md:grid-cols-2 @lg:grid-cols-3">
|
||||
Responds to parent width, not viewport
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Container query breakpoints: `@sm:` `@md:` `@lg:` `@xl:` `@2xl:`
|
||||
|
||||
## Custom Breakpoints
|
||||
|
||||
Define custom breakpoints in theme:
|
||||
|
||||
```css
|
||||
@theme {
|
||||
--breakpoint-3xl: 120rem; /* 1920px */
|
||||
--breakpoint-tablet: 48rem; /* 768px */
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
<div class="tablet:grid-cols-2 3xl:grid-cols-6">
|
||||
Uses custom breakpoints
|
||||
</div>
|
||||
```
|
||||
|
||||
## Responsive State Variants
|
||||
|
||||
Combine responsive with hover/focus:
|
||||
|
||||
```html
|
||||
<!-- Hover effect only on desktop -->
|
||||
<button class="lg:hover:scale-105">
|
||||
Scale on hover (desktop only)
|
||||
</button>
|
||||
|
||||
<!-- Different hover colors per breakpoint -->
|
||||
<a class="hover:text-blue-600 lg:hover:text-purple-600">
|
||||
Link
|
||||
</a>
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
### 1. Mobile-First Design
|
||||
|
||||
Start with mobile styles, add complexity at larger breakpoints:
|
||||
|
||||
```html
|
||||
<!-- Good: Mobile first -->
|
||||
<div class="text-base md:text-lg lg:text-xl">
|
||||
|
||||
<!-- Avoid: Desktop first -->
|
||||
<div class="text-xl lg:text-base">
|
||||
```
|
||||
|
||||
### 2. Consistent Breakpoint Usage
|
||||
|
||||
Use same breakpoints across related elements:
|
||||
|
||||
```html
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 lg:gap-8">
|
||||
Spacing scales with layout
|
||||
</div>
|
||||
```
|
||||
|
||||
### 3. Test at Breakpoint Boundaries
|
||||
|
||||
Test at exact breakpoint widths (640px, 768px, 1024px, etc.) to catch edge cases.
|
||||
|
||||
### 4. Use Container for Content Width
|
||||
|
||||
```html
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl">
|
||||
Content with consistent max width
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### 5. Progressive Enhancement
|
||||
|
||||
Ensure core functionality works on mobile, enhance for larger screens:
|
||||
|
||||
```html
|
||||
<!-- Core layout works on mobile -->
|
||||
<div class="p-4">
|
||||
<!-- Enhanced spacing on desktop -->
|
||||
<div class="lg:p-8">
|
||||
Content
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### 6. Avoid Too Many Breakpoints
|
||||
|
||||
Use 2-3 breakpoints per element for maintainability:
|
||||
|
||||
```html
|
||||
<!-- Good: 2 breakpoints -->
|
||||
<div class="grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
|
||||
|
||||
<!-- Avoid: Too many breakpoints -->
|
||||
<div class="grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6">
|
||||
```
|
||||
|
||||
## Common Responsive Utilities
|
||||
|
||||
### Responsive Display
|
||||
|
||||
```html
|
||||
<div class="block md:flex lg:grid">
|
||||
Changes display type per breakpoint
|
||||
</div>
|
||||
```
|
||||
|
||||
### Responsive Position
|
||||
|
||||
```html
|
||||
<div class="relative lg:absolute">
|
||||
Positioned differently per breakpoint
|
||||
</div>
|
||||
```
|
||||
|
||||
### Responsive Order
|
||||
|
||||
```html
|
||||
<div class="flex flex-col">
|
||||
<div class="order-2 lg:order-1">First on desktop</div>
|
||||
<div class="order-1 lg:order-2">First on mobile</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Responsive Overflow
|
||||
|
||||
```html
|
||||
<div class="overflow-auto lg:overflow-visible">
|
||||
Scrollable on mobile, expanded on desktop
|
||||
</div>
|
||||
```
|
||||
|
||||
## Testing Checklist
|
||||
|
||||
- [ ] Test at 320px (small mobile)
|
||||
- [ ] Test at 640px (mobile breakpoint)
|
||||
- [ ] Test at 768px (tablet breakpoint)
|
||||
- [ ] Test at 1024px (desktop breakpoint)
|
||||
- [ ] Test at 1280px (large desktop breakpoint)
|
||||
- [ ] Test landscape orientation
|
||||
- [ ] Verify touch targets (min 44x44px)
|
||||
- [ ] Check text readability at all sizes
|
||||
- [ ] Verify navigation works on mobile
|
||||
- [ ] Test with browser zoom
|
||||
455
.opencode/skills/ui-styling/references/tailwind-utilities.md
Normal file
455
.opencode/skills/ui-styling/references/tailwind-utilities.md
Normal file
@@ -0,0 +1,455 @@
|
||||
# Tailwind CSS Utility Reference
|
||||
|
||||
Core utility classes for layout, spacing, typography, colors, borders, and shadows.
|
||||
|
||||
## Layout Utilities
|
||||
|
||||
### Display
|
||||
|
||||
```html
|
||||
<div class="block">Block</div>
|
||||
<div class="inline-block">Inline Block</div>
|
||||
<div class="inline">Inline</div>
|
||||
<div class="flex">Flexbox</div>
|
||||
<div class="inline-flex">Inline Flex</div>
|
||||
<div class="grid">Grid</div>
|
||||
<div class="inline-grid">Inline Grid</div>
|
||||
<div class="hidden">Hidden</div>
|
||||
```
|
||||
|
||||
### Flexbox
|
||||
|
||||
**Container:**
|
||||
```html
|
||||
<div class="flex flex-row">Row (default)</div>
|
||||
<div class="flex flex-col">Column</div>
|
||||
<div class="flex flex-row-reverse">Reverse row</div>
|
||||
<div class="flex flex-col-reverse">Reverse column</div>
|
||||
```
|
||||
|
||||
**Justify (main axis):**
|
||||
```html
|
||||
<div class="flex justify-start">Start</div>
|
||||
<div class="flex justify-center">Center</div>
|
||||
<div class="flex justify-end">End</div>
|
||||
<div class="flex justify-between">Space between</div>
|
||||
<div class="flex justify-around">Space around</div>
|
||||
<div class="flex justify-evenly">Space evenly</div>
|
||||
```
|
||||
|
||||
**Align (cross axis):**
|
||||
```html
|
||||
<div class="flex items-start">Start</div>
|
||||
<div class="flex items-center">Center</div>
|
||||
<div class="flex items-end">End</div>
|
||||
<div class="flex items-baseline">Baseline</div>
|
||||
<div class="flex items-stretch">Stretch</div>
|
||||
```
|
||||
|
||||
**Gap:**
|
||||
```html
|
||||
<div class="flex gap-4">All sides</div>
|
||||
<div class="flex gap-x-6 gap-y-2">X and Y</div>
|
||||
```
|
||||
|
||||
**Wrap:**
|
||||
```html
|
||||
<div class="flex flex-wrap">Wrap</div>
|
||||
<div class="flex flex-nowrap">No wrap</div>
|
||||
```
|
||||
|
||||
### Grid
|
||||
|
||||
**Columns:**
|
||||
```html
|
||||
<div class="grid grid-cols-1">1 column</div>
|
||||
<div class="grid grid-cols-2">2 columns</div>
|
||||
<div class="grid grid-cols-3">3 columns</div>
|
||||
<div class="grid grid-cols-4">4 columns</div>
|
||||
<div class="grid grid-cols-12">12 columns</div>
|
||||
<div class="grid grid-cols-[1fr_500px_2fr]">Custom</div>
|
||||
```
|
||||
|
||||
**Rows:**
|
||||
```html
|
||||
<div class="grid grid-rows-3">3 rows</div>
|
||||
<div class="grid grid-rows-[auto_1fr_auto]">Custom</div>
|
||||
```
|
||||
|
||||
**Span:**
|
||||
```html
|
||||
<div class="col-span-2">Span 2 columns</div>
|
||||
<div class="row-span-3">Span 3 rows</div>
|
||||
```
|
||||
|
||||
**Gap:**
|
||||
```html
|
||||
<div class="grid gap-4">All sides</div>
|
||||
<div class="grid gap-x-8 gap-y-4">X and Y</div>
|
||||
```
|
||||
|
||||
### Positioning
|
||||
|
||||
```html
|
||||
<div class="static">Static (default)</div>
|
||||
<div class="relative">Relative</div>
|
||||
<div class="absolute">Absolute</div>
|
||||
<div class="fixed">Fixed</div>
|
||||
<div class="sticky">Sticky</div>
|
||||
|
||||
<!-- Position values -->
|
||||
<div class="absolute top-0 right-0">Top right</div>
|
||||
<div class="absolute inset-0">All sides 0</div>
|
||||
<div class="absolute inset-x-4">Left/right 4</div>
|
||||
<div class="absolute inset-y-8">Top/bottom 8</div>
|
||||
```
|
||||
|
||||
### Z-Index
|
||||
|
||||
```html
|
||||
<div class="z-0">z-index: 0</div>
|
||||
<div class="z-10">z-index: 10</div>
|
||||
<div class="z-20">z-index: 20</div>
|
||||
<div class="z-50">z-index: 50</div>
|
||||
```
|
||||
|
||||
## Spacing Utilities
|
||||
|
||||
### Padding
|
||||
|
||||
```html
|
||||
<div class="p-4">All sides</div>
|
||||
<div class="px-6">Left and right</div>
|
||||
<div class="py-3">Top and bottom</div>
|
||||
<div class="pt-8">Top</div>
|
||||
<div class="pr-4">Right</div>
|
||||
<div class="pb-2">Bottom</div>
|
||||
<div class="pl-6">Left</div>
|
||||
```
|
||||
|
||||
### Margin
|
||||
|
||||
```html
|
||||
<div class="m-4">All sides</div>
|
||||
<div class="mx-auto">Center horizontally</div>
|
||||
<div class="my-6">Top and bottom</div>
|
||||
<div class="mt-8">Top</div>
|
||||
<div class="-mt-4">Negative top</div>
|
||||
<div class="ml-auto">Push to right</div>
|
||||
```
|
||||
|
||||
### Space Between
|
||||
|
||||
```html
|
||||
<div class="space-x-4">Horizontal spacing</div>
|
||||
<div class="space-y-6">Vertical spacing</div>
|
||||
```
|
||||
|
||||
### Spacing Scale
|
||||
|
||||
- `0`: 0px
|
||||
- `px`: 1px
|
||||
- `0.5`: 0.125rem (2px)
|
||||
- `1`: 0.25rem (4px)
|
||||
- `2`: 0.5rem (8px)
|
||||
- `3`: 0.75rem (12px)
|
||||
- `4`: 1rem (16px)
|
||||
- `6`: 1.5rem (24px)
|
||||
- `8`: 2rem (32px)
|
||||
- `12`: 3rem (48px)
|
||||
- `16`: 4rem (64px)
|
||||
- `24`: 6rem (96px)
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Size
|
||||
|
||||
```html
|
||||
<p class="text-xs">Extra small (12px)</p>
|
||||
<p class="text-sm">Small (14px)</p>
|
||||
<p class="text-base">Base (16px)</p>
|
||||
<p class="text-lg">Large (18px)</p>
|
||||
<p class="text-xl">XL (20px)</p>
|
||||
<p class="text-2xl">2XL (24px)</p>
|
||||
<p class="text-3xl">3XL (30px)</p>
|
||||
<p class="text-4xl">4XL (36px)</p>
|
||||
<p class="text-5xl">5XL (48px)</p>
|
||||
```
|
||||
|
||||
### Font Weight
|
||||
|
||||
```html
|
||||
<p class="font-thin">Thin (100)</p>
|
||||
<p class="font-light">Light (300)</p>
|
||||
<p class="font-normal">Normal (400)</p>
|
||||
<p class="font-medium">Medium (500)</p>
|
||||
<p class="font-semibold">Semibold (600)</p>
|
||||
<p class="font-bold">Bold (700)</p>
|
||||
<p class="font-black">Black (900)</p>
|
||||
```
|
||||
|
||||
### Text Alignment
|
||||
|
||||
```html
|
||||
<p class="text-left">Left</p>
|
||||
<p class="text-center">Center</p>
|
||||
<p class="text-right">Right</p>
|
||||
<p class="text-justify">Justify</p>
|
||||
```
|
||||
|
||||
### Line Height
|
||||
|
||||
```html
|
||||
<p class="leading-none">1</p>
|
||||
<p class="leading-tight">1.25</p>
|
||||
<p class="leading-normal">1.5</p>
|
||||
<p class="leading-relaxed">1.75</p>
|
||||
<p class="leading-loose">2</p>
|
||||
```
|
||||
|
||||
### Combined Font Utilities
|
||||
|
||||
```html
|
||||
<h1 class="text-4xl/tight font-bold">
|
||||
Font size 4xl with tight line height
|
||||
</h1>
|
||||
```
|
||||
|
||||
### Text Transform
|
||||
|
||||
```html
|
||||
<p class="uppercase">UPPERCASE</p>
|
||||
<p class="lowercase">lowercase</p>
|
||||
<p class="capitalize">Capitalize</p>
|
||||
<p class="normal-case">Normal</p>
|
||||
```
|
||||
|
||||
### Text Decoration
|
||||
|
||||
```html
|
||||
<p class="underline">Underline</p>
|
||||
<p class="line-through">Line through</p>
|
||||
<p class="no-underline">No underline</p>
|
||||
```
|
||||
|
||||
### Text Overflow
|
||||
|
||||
```html
|
||||
<p class="truncate">Truncate with ellipsis...</p>
|
||||
<p class="line-clamp-3">Clamp to 3 lines...</p>
|
||||
<p class="text-ellipsis overflow-hidden">Ellipsis</p>
|
||||
```
|
||||
|
||||
## Colors
|
||||
|
||||
### Text Colors
|
||||
|
||||
```html
|
||||
<p class="text-black">Black</p>
|
||||
<p class="text-white">White</p>
|
||||
<p class="text-gray-500">Gray 500</p>
|
||||
<p class="text-red-600">Red 600</p>
|
||||
<p class="text-blue-500">Blue 500</p>
|
||||
<p class="text-green-600">Green 600</p>
|
||||
```
|
||||
|
||||
### Background Colors
|
||||
|
||||
```html
|
||||
<div class="bg-white">White</div>
|
||||
<div class="bg-gray-100">Gray 100</div>
|
||||
<div class="bg-blue-500">Blue 500</div>
|
||||
<div class="bg-red-600">Red 600</div>
|
||||
```
|
||||
|
||||
### Color Scale
|
||||
|
||||
Each color has 11 shades (50-950):
|
||||
- `50`: Lightest
|
||||
- `100-400`: Light variations
|
||||
- `500`: Base color
|
||||
- `600-800`: Dark variations
|
||||
- `950`: Darkest
|
||||
|
||||
### Opacity Modifiers
|
||||
|
||||
```html
|
||||
<div class="bg-black/75">75% opacity</div>
|
||||
<div class="text-blue-500/30">30% opacity</div>
|
||||
<div class="bg-purple-500/[0.87]">87% opacity</div>
|
||||
```
|
||||
|
||||
### Gradients
|
||||
|
||||
```html
|
||||
<div class="bg-gradient-to-r from-blue-500 to-purple-600">
|
||||
Left to right gradient
|
||||
</div>
|
||||
<div class="bg-gradient-to-br from-pink-500 via-red-500 to-yellow-500">
|
||||
With via color
|
||||
</div>
|
||||
```
|
||||
|
||||
Directions: `to-t | to-tr | to-r | to-br | to-b | to-bl | to-l | to-tl`
|
||||
|
||||
## Borders
|
||||
|
||||
### Border Width
|
||||
|
||||
```html
|
||||
<div class="border">1px all sides</div>
|
||||
<div class="border-2">2px all sides</div>
|
||||
<div class="border-t">Top only</div>
|
||||
<div class="border-r-4">Right 4px</div>
|
||||
<div class="border-b-2">Bottom 2px</div>
|
||||
<div class="border-l">Left only</div>
|
||||
<div class="border-0">No border</div>
|
||||
```
|
||||
|
||||
### Border Color
|
||||
|
||||
```html
|
||||
<div class="border border-gray-300">Gray</div>
|
||||
<div class="border-2 border-blue-500">Blue</div>
|
||||
<div class="border border-red-600/50">Red with opacity</div>
|
||||
```
|
||||
|
||||
### Border Radius
|
||||
|
||||
```html
|
||||
<div class="rounded">0.25rem</div>
|
||||
<div class="rounded-md">0.375rem</div>
|
||||
<div class="rounded-lg">0.5rem</div>
|
||||
<div class="rounded-xl">0.75rem</div>
|
||||
<div class="rounded-2xl">1rem</div>
|
||||
<div class="rounded-full">9999px</div>
|
||||
|
||||
<!-- Individual corners -->
|
||||
<div class="rounded-t-lg">Top corners</div>
|
||||
<div class="rounded-br-xl">Bottom right</div>
|
||||
```
|
||||
|
||||
### Border Style
|
||||
|
||||
```html
|
||||
<div class="border border-solid">Solid</div>
|
||||
<div class="border-2 border-dashed">Dashed</div>
|
||||
<div class="border border-dotted">Dotted</div>
|
||||
```
|
||||
|
||||
## Shadows
|
||||
|
||||
```html
|
||||
<div class="shadow-sm">Small</div>
|
||||
<div class="shadow">Default</div>
|
||||
<div class="shadow-md">Medium</div>
|
||||
<div class="shadow-lg">Large</div>
|
||||
<div class="shadow-xl">Extra large</div>
|
||||
<div class="shadow-2xl">2XL</div>
|
||||
<div class="shadow-none">No shadow</div>
|
||||
```
|
||||
|
||||
### Colored Shadows
|
||||
|
||||
```html
|
||||
<div class="shadow-lg shadow-blue-500/50">Blue shadow</div>
|
||||
```
|
||||
|
||||
## Width & Height
|
||||
|
||||
### Width
|
||||
|
||||
```html
|
||||
<div class="w-full">100%</div>
|
||||
<div class="w-1/2">50%</div>
|
||||
<div class="w-1/3">33.333%</div>
|
||||
<div class="w-64">16rem</div>
|
||||
<div class="w-[500px]">500px</div>
|
||||
<div class="w-screen">100vw</div>
|
||||
|
||||
<!-- Min/Max width -->
|
||||
<div class="min-w-0">min-width: 0</div>
|
||||
<div class="max-w-md">max-width: 28rem</div>
|
||||
<div class="max-w-screen-xl">max-width: 1280px</div>
|
||||
```
|
||||
|
||||
### Height
|
||||
|
||||
```html
|
||||
<div class="h-full">100%</div>
|
||||
<div class="h-screen">100vh</div>
|
||||
<div class="h-64">16rem</div>
|
||||
<div class="h-[500px]">500px</div>
|
||||
|
||||
<!-- Min/Max height -->
|
||||
<div class="min-h-screen">min-height: 100vh</div>
|
||||
<div class="max-h-96">max-height: 24rem</div>
|
||||
```
|
||||
|
||||
## Arbitrary Values
|
||||
|
||||
Use square brackets for custom values:
|
||||
|
||||
```html
|
||||
<!-- Spacing -->
|
||||
<div class="p-[17px]">Custom padding</div>
|
||||
<div class="top-[117px]">Custom position</div>
|
||||
|
||||
<!-- Colors -->
|
||||
<div class="bg-[#bada55]">Hex color</div>
|
||||
<div class="text-[rgb(123,45,67)]">RGB</div>
|
||||
|
||||
<!-- Sizes -->
|
||||
<div class="w-[500px]">Custom width</div>
|
||||
<div class="text-[22px]">Custom font size</div>
|
||||
|
||||
<!-- CSS variables -->
|
||||
<div class="bg-[var(--brand-color)]">CSS var</div>
|
||||
|
||||
<!-- Complex values -->
|
||||
<div class="grid-cols-[1fr_500px_2fr]">Custom grid</div>
|
||||
```
|
||||
|
||||
## Aspect Ratio
|
||||
|
||||
```html
|
||||
<div class="aspect-square">1:1</div>
|
||||
<div class="aspect-video">16:9</div>
|
||||
<div class="aspect-[4/3]">4:3</div>
|
||||
```
|
||||
|
||||
## Overflow
|
||||
|
||||
```html
|
||||
<div class="overflow-auto">Auto scroll</div>
|
||||
<div class="overflow-hidden">Hidden</div>
|
||||
<div class="overflow-scroll">Always scroll</div>
|
||||
<div class="overflow-x-auto">Horizontal scroll</div>
|
||||
<div class="overflow-y-hidden">No vertical scroll</div>
|
||||
```
|
||||
|
||||
## Opacity
|
||||
|
||||
```html
|
||||
<div class="opacity-0">0%</div>
|
||||
<div class="opacity-50">50%</div>
|
||||
<div class="opacity-75">75%</div>
|
||||
<div class="opacity-100">100%</div>
|
||||
```
|
||||
|
||||
## Cursor
|
||||
|
||||
```html
|
||||
<div class="cursor-pointer">Pointer</div>
|
||||
<div class="cursor-wait">Wait</div>
|
||||
<div class="cursor-not-allowed">Not allowed</div>
|
||||
<div class="cursor-default">Default</div>
|
||||
```
|
||||
|
||||
## User Select
|
||||
|
||||
```html
|
||||
<div class="select-none">No select</div>
|
||||
<div class="select-text">Text selectable</div>
|
||||
<div class="select-all">Select all</div>
|
||||
```
|
||||
BIN
.opencode/skills/ui-styling/scripts/.coverage
Normal file
BIN
.opencode/skills/ui-styling/scripts/.coverage
Normal file
Binary file not shown.
17
.opencode/skills/ui-styling/scripts/requirements.txt
Normal file
17
.opencode/skills/ui-styling/scripts/requirements.txt
Normal file
@@ -0,0 +1,17 @@
|
||||
# UI Styling Skill Dependencies
|
||||
# Python 3.10+ required
|
||||
|
||||
# No Python package dependencies - uses only standard library
|
||||
|
||||
# Testing dependencies (dev)
|
||||
pytest>=8.0.0
|
||||
pytest-cov>=4.1.0
|
||||
pytest-mock>=3.12.0
|
||||
|
||||
# Note: This skill works with shadcn/ui and Tailwind CSS
|
||||
# Requires Node.js and package managers:
|
||||
# - Node.js 18+: https://nodejs.org/
|
||||
# - npm (comes with Node.js)
|
||||
#
|
||||
# shadcn/ui CLI is installed per-project:
|
||||
# npx shadcn-ui@latest init
|
||||
292
.opencode/skills/ui-styling/scripts/shadcn_add.py
Executable file
292
.opencode/skills/ui-styling/scripts/shadcn_add.py
Executable file
@@ -0,0 +1,292 @@
|
||||
#!/usr/bin/env python3
|
||||
"""
|
||||
shadcn/ui Component Installer
|
||||
|
||||
Add shadcn/ui components to project with automatic dependency handling.
|
||||
Wraps shadcn CLI for programmatic component installation.
|
||||
"""
|
||||
|
||||
import argparse
|
||||
import json
|
||||
import subprocess
|
||||
import sys
|
||||
from pathlib import Path
|
||||
from typing import List, Optional
|
||||
|
||||
|
||||
class ShadcnInstaller:
|
||||
"""Handle shadcn/ui component installation."""
|
||||
|
||||
def __init__(self, project_root: Optional[Path] = None, dry_run: bool = False):
|
||||
"""
|
||||
Initialize installer.
|
||||
|
||||
Args:
|
||||
project_root: Project root directory (default: current directory)
|
||||
dry_run: If True, show actions without executing
|
||||
"""
|
||||
self.project_root = project_root or Path.cwd()
|
||||
self.dry_run = dry_run
|
||||
self.components_json = self.project_root / "components.json"
|
||||
|
||||
def check_shadcn_config(self) -> bool:
|
||||
"""
|
||||
Check if shadcn is initialized in project.
|
||||
|
||||
Returns:
|
||||
True if components.json exists
|
||||
"""
|
||||
return self.components_json.exists()
|
||||
|
||||
def get_installed_components(self) -> List[str]:
|
||||
"""
|
||||
Get list of already installed components.
|
||||
|
||||
Returns:
|
||||
List of installed component names
|
||||
"""
|
||||
if not self.check_shadcn_config():
|
||||
return []
|
||||
|
||||
try:
|
||||
with open(self.components_json) as f:
|
||||
config = json.load(f)
|
||||
|
||||
components_dir = self.project_root / config.get("aliases", {}).get(
|
||||
"components", "components"
|
||||
).replace("@/", "")
|
||||
ui_dir = components_dir / "ui"
|
||||
|
||||
if not ui_dir.exists():
|
||||
return []
|
||||
|
||||
return [f.stem for f in ui_dir.glob("*.tsx") if f.is_file()]
|
||||
except (json.JSONDecodeError, KeyError, OSError):
|
||||
return []
|
||||
|
||||
def add_components(
|
||||
self, components: List[str], overwrite: bool = False
|
||||
) -> tuple[bool, str]:
|
||||
"""
|
||||
Add shadcn/ui components.
|
||||
|
||||
Args:
|
||||
components: List of component names to add
|
||||
overwrite: If True, overwrite existing components
|
||||
|
||||
Returns:
|
||||
Tuple of (success, message)
|
||||
"""
|
||||
if not components:
|
||||
return False, "No components specified"
|
||||
|
||||
if not self.check_shadcn_config():
|
||||
return (
|
||||
False,
|
||||
"shadcn not initialized. Run 'npx shadcn@latest init' first",
|
||||
)
|
||||
|
||||
# Check which components already exist
|
||||
installed = self.get_installed_components()
|
||||
already_installed = [c for c in components if c in installed]
|
||||
|
||||
if already_installed and not overwrite:
|
||||
return (
|
||||
False,
|
||||
f"Components already installed: {', '.join(already_installed)}. "
|
||||
"Use --overwrite to reinstall",
|
||||
)
|
||||
|
||||
# Build command
|
||||
cmd = ["npx", "shadcn@latest", "add"] + components
|
||||
|
||||
if overwrite:
|
||||
cmd.append("--overwrite")
|
||||
|
||||
if self.dry_run:
|
||||
return True, f"Would run: {' '.join(cmd)}"
|
||||
|
||||
# Execute command
|
||||
try:
|
||||
result = subprocess.run(
|
||||
cmd,
|
||||
cwd=self.project_root,
|
||||
capture_output=True,
|
||||
text=True,
|
||||
check=True,
|
||||
)
|
||||
|
||||
success_msg = f"Successfully added components: {', '.join(components)}"
|
||||
if result.stdout:
|
||||
success_msg += f"\n\nOutput:\n{result.stdout}"
|
||||
|
||||
return True, success_msg
|
||||
|
||||
except subprocess.CalledProcessError as e:
|
||||
error_msg = f"Failed to add components: {e.stderr or e.stdout or str(e)}"
|
||||
return False, error_msg
|
||||
except FileNotFoundError:
|
||||
return False, "npx not found. Ensure Node.js is installed"
|
||||
|
||||
def add_all_components(self, overwrite: bool = False) -> tuple[bool, str]:
|
||||
"""
|
||||
Add all available shadcn/ui components.
|
||||
|
||||
Args:
|
||||
overwrite: If True, overwrite existing components
|
||||
|
||||
Returns:
|
||||
Tuple of (success, message)
|
||||
"""
|
||||
if not self.check_shadcn_config():
|
||||
return (
|
||||
False,
|
||||
"shadcn not initialized. Run 'npx shadcn@latest init' first",
|
||||
)
|
||||
|
||||
cmd = ["npx", "shadcn@latest", "add", "--all"]
|
||||
|
||||
if overwrite:
|
||||
cmd.append("--overwrite")
|
||||
|
||||
if self.dry_run:
|
||||
return True, f"Would run: {' '.join(cmd)}"
|
||||
|
||||
try:
|
||||
result = subprocess.run(
|
||||
cmd,
|
||||
cwd=self.project_root,
|
||||
capture_output=True,
|
||||
text=True,
|
||||
check=True,
|
||||
)
|
||||
|
||||
success_msg = "Successfully added all components"
|
||||
if result.stdout:
|
||||
success_msg += f"\n\nOutput:\n{result.stdout}"
|
||||
|
||||
return True, success_msg
|
||||
|
||||
except subprocess.CalledProcessError as e:
|
||||
error_msg = f"Failed to add all components: {e.stderr or e.stdout or str(e)}"
|
||||
return False, error_msg
|
||||
except FileNotFoundError:
|
||||
return False, "npx not found. Ensure Node.js is installed"
|
||||
|
||||
def list_installed(self) -> tuple[bool, str]:
|
||||
"""
|
||||
List installed components.
|
||||
|
||||
Returns:
|
||||
Tuple of (success, message with component list)
|
||||
"""
|
||||
if not self.check_shadcn_config():
|
||||
return False, "shadcn not initialized"
|
||||
|
||||
installed = self.get_installed_components()
|
||||
|
||||
if not installed:
|
||||
return True, "No components installed"
|
||||
|
||||
return True, f"Installed components:\n" + "\n".join(f" - {c}" for c in sorted(installed))
|
||||
|
||||
|
||||
def main():
|
||||
"""CLI entry point."""
|
||||
parser = argparse.ArgumentParser(
|
||||
description="Add shadcn/ui components to your project",
|
||||
formatter_class=argparse.RawDescriptionHelpFormatter,
|
||||
epilog="""
|
||||
Examples:
|
||||
# Add single component
|
||||
python shadcn_add.py button
|
||||
|
||||
# Add multiple components
|
||||
python shadcn_add.py button card dialog
|
||||
|
||||
# Add all components
|
||||
python shadcn_add.py --all
|
||||
|
||||
# Overwrite existing components
|
||||
python shadcn_add.py button --overwrite
|
||||
|
||||
# Dry run (show what would be done)
|
||||
python shadcn_add.py button card --dry-run
|
||||
|
||||
# List installed components
|
||||
python shadcn_add.py --list
|
||||
""",
|
||||
)
|
||||
|
||||
parser.add_argument(
|
||||
"components",
|
||||
nargs="*",
|
||||
help="Component names to add (e.g., button, card, dialog)",
|
||||
)
|
||||
|
||||
parser.add_argument(
|
||||
"--all",
|
||||
action="store_true",
|
||||
help="Add all available components",
|
||||
)
|
||||
|
||||
parser.add_argument(
|
||||
"--overwrite",
|
||||
action="store_true",
|
||||
help="Overwrite existing components",
|
||||
)
|
||||
|
||||
parser.add_argument(
|
||||
"--dry-run",
|
||||
action="store_true",
|
||||
help="Show what would be done without executing",
|
||||
)
|
||||
|
||||
parser.add_argument(
|
||||
"--list",
|
||||
action="store_true",
|
||||
help="List installed components",
|
||||
)
|
||||
|
||||
parser.add_argument(
|
||||
"--project-root",
|
||||
type=Path,
|
||||
help="Project root directory (default: current directory)",
|
||||
)
|
||||
|
||||
args = parser.parse_args()
|
||||
|
||||
# Initialize installer
|
||||
installer = ShadcnInstaller(
|
||||
project_root=args.project_root,
|
||||
dry_run=args.dry_run,
|
||||
)
|
||||
|
||||
# Handle list command
|
||||
if args.list:
|
||||
success, message = installer.list_installed()
|
||||
print(message)
|
||||
sys.exit(0 if success else 1)
|
||||
|
||||
# Handle add all command
|
||||
if args.all:
|
||||
success, message = installer.add_all_components(overwrite=args.overwrite)
|
||||
print(message)
|
||||
sys.exit(0 if success else 1)
|
||||
|
||||
# Handle add specific components
|
||||
if not args.components:
|
||||
parser.print_help()
|
||||
sys.exit(1)
|
||||
|
||||
success, message = installer.add_components(
|
||||
args.components,
|
||||
overwrite=args.overwrite,
|
||||
)
|
||||
|
||||
print(message)
|
||||
sys.exit(0 if success else 1)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
456
.opencode/skills/ui-styling/scripts/tailwind_config_gen.py
Executable file
456
.opencode/skills/ui-styling/scripts/tailwind_config_gen.py
Executable file
@@ -0,0 +1,456 @@
|
||||
#!/usr/bin/env python3
|
||||
"""
|
||||
Tailwind CSS Configuration Generator
|
||||
|
||||
Generate tailwind.config.js/ts with custom theme configuration.
|
||||
Supports colors, fonts, spacing, breakpoints, and plugin recommendations.
|
||||
"""
|
||||
|
||||
import argparse
|
||||
import json
|
||||
import sys
|
||||
from pathlib import Path
|
||||
from typing import Any, Dict, List, Optional
|
||||
|
||||
|
||||
class TailwindConfigGenerator:
|
||||
"""Generate Tailwind CSS configuration files."""
|
||||
|
||||
def __init__(
|
||||
self,
|
||||
typescript: bool = True,
|
||||
framework: str = "react",
|
||||
output_path: Optional[Path] = None,
|
||||
):
|
||||
"""
|
||||
Initialize generator.
|
||||
|
||||
Args:
|
||||
typescript: If True, generate .ts config, else .js
|
||||
framework: Framework name (react, vue, svelte, nextjs)
|
||||
output_path: Output file path (default: auto-detect)
|
||||
"""
|
||||
self.typescript = typescript
|
||||
self.framework = framework
|
||||
self.output_path = output_path or self._default_output_path()
|
||||
self.config: Dict[str, Any] = self._base_config()
|
||||
|
||||
def _default_output_path(self) -> Path:
|
||||
"""Determine default output path."""
|
||||
ext = "ts" if self.typescript else "js"
|
||||
return Path.cwd() / f"tailwind.config.{ext}"
|
||||
|
||||
def _base_config(self) -> Dict[str, Any]:
|
||||
"""Create base configuration structure."""
|
||||
return {
|
||||
"darkMode": ["class"],
|
||||
"content": self._default_content_paths(),
|
||||
"theme": {
|
||||
"extend": {}
|
||||
},
|
||||
"plugins": []
|
||||
}
|
||||
|
||||
def _default_content_paths(self) -> List[str]:
|
||||
"""Get default content paths for framework."""
|
||||
paths = {
|
||||
"react": [
|
||||
"./src/**/*.{js,jsx,ts,tsx}",
|
||||
"./index.html",
|
||||
],
|
||||
"vue": [
|
||||
"./src/**/*.{vue,js,ts,jsx,tsx}",
|
||||
"./index.html",
|
||||
],
|
||||
"svelte": [
|
||||
"./src/**/*.{svelte,js,ts}",
|
||||
"./src/app.html",
|
||||
],
|
||||
"nextjs": [
|
||||
"./app/**/*.{js,ts,jsx,tsx}",
|
||||
"./pages/**/*.{js,ts,jsx,tsx}",
|
||||
"./components/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
}
|
||||
return paths.get(self.framework, paths["react"])
|
||||
|
||||
def add_colors(self, colors: Dict[str, str]) -> None:
|
||||
"""
|
||||
Add custom colors to theme.
|
||||
|
||||
Args:
|
||||
colors: Dict of color_name: color_value
|
||||
Value can be hex (#3b82f6) or variable (hsl(var(--primary)))
|
||||
"""
|
||||
if "colors" not in self.config["theme"]["extend"]:
|
||||
self.config["theme"]["extend"]["colors"] = {}
|
||||
|
||||
self.config["theme"]["extend"]["colors"].update(colors)
|
||||
|
||||
def add_color_palette(self, name: str, base_color: str) -> None:
|
||||
"""
|
||||
Add full color palette (50-950 shades) for a base color.
|
||||
|
||||
Args:
|
||||
name: Color name (e.g., 'brand', 'primary')
|
||||
base_color: Base color in oklch format or hex
|
||||
"""
|
||||
# For simplicity, use CSS variable approach
|
||||
if "colors" not in self.config["theme"]["extend"]:
|
||||
self.config["theme"]["extend"]["colors"] = {}
|
||||
|
||||
self.config["theme"]["extend"]["colors"][name] = {
|
||||
"50": f"var(--color-{name}-50)",
|
||||
"100": f"var(--color-{name}-100)",
|
||||
"200": f"var(--color-{name}-200)",
|
||||
"300": f"var(--color-{name}-300)",
|
||||
"400": f"var(--color-{name}-400)",
|
||||
"500": f"var(--color-{name}-500)",
|
||||
"600": f"var(--color-{name}-600)",
|
||||
"700": f"var(--color-{name}-700)",
|
||||
"800": f"var(--color-{name}-800)",
|
||||
"900": f"var(--color-{name}-900)",
|
||||
"950": f"var(--color-{name}-950)",
|
||||
}
|
||||
|
||||
def add_fonts(self, fonts: Dict[str, List[str]]) -> None:
|
||||
"""
|
||||
Add custom font families.
|
||||
|
||||
Args:
|
||||
fonts: Dict of font_type: [font_names]
|
||||
e.g., {'sans': ['Inter', 'system-ui', 'sans-serif']}
|
||||
"""
|
||||
if "fontFamily" not in self.config["theme"]["extend"]:
|
||||
self.config["theme"]["extend"]["fontFamily"] = {}
|
||||
|
||||
self.config["theme"]["extend"]["fontFamily"].update(fonts)
|
||||
|
||||
def add_spacing(self, spacing: Dict[str, str]) -> None:
|
||||
"""
|
||||
Add custom spacing values.
|
||||
|
||||
Args:
|
||||
spacing: Dict of name: value
|
||||
e.g., {'18': '4.5rem', 'navbar': '4rem'}
|
||||
"""
|
||||
if "spacing" not in self.config["theme"]["extend"]:
|
||||
self.config["theme"]["extend"]["spacing"] = {}
|
||||
|
||||
self.config["theme"]["extend"]["spacing"].update(spacing)
|
||||
|
||||
def add_breakpoints(self, breakpoints: Dict[str, str]) -> None:
|
||||
"""
|
||||
Add custom breakpoints.
|
||||
|
||||
Args:
|
||||
breakpoints: Dict of name: width
|
||||
e.g., {'3xl': '1920px', 'tablet': '768px'}
|
||||
"""
|
||||
if "screens" not in self.config["theme"]["extend"]:
|
||||
self.config["theme"]["extend"]["screens"] = {}
|
||||
|
||||
self.config["theme"]["extend"]["screens"].update(breakpoints)
|
||||
|
||||
def add_plugins(self, plugins: List[str]) -> None:
|
||||
"""
|
||||
Add plugin requirements.
|
||||
|
||||
Args:
|
||||
plugins: List of plugin names
|
||||
e.g., ['@tailwindcss/typography', '@tailwindcss/forms']
|
||||
"""
|
||||
for plugin in plugins:
|
||||
if plugin not in self.config["plugins"]:
|
||||
self.config["plugins"].append(plugin)
|
||||
|
||||
def recommend_plugins(self) -> List[str]:
|
||||
"""
|
||||
Get plugin recommendations based on configuration.
|
||||
|
||||
Returns:
|
||||
List of recommended plugin package names
|
||||
"""
|
||||
recommendations = []
|
||||
|
||||
# Always recommend animation plugin
|
||||
recommendations.append("tailwindcss-animate")
|
||||
|
||||
# Framework-specific recommendations
|
||||
if self.framework == "nextjs":
|
||||
recommendations.append("@tailwindcss/typography")
|
||||
|
||||
return recommendations
|
||||
|
||||
def generate_config_string(self) -> str:
|
||||
"""
|
||||
Generate configuration file content.
|
||||
|
||||
Returns:
|
||||
Configuration file as string
|
||||
"""
|
||||
if self.typescript:
|
||||
return self._generate_typescript()
|
||||
return self._generate_javascript()
|
||||
|
||||
def _generate_typescript(self) -> str:
|
||||
"""Generate TypeScript configuration."""
|
||||
plugins_str = self._format_plugins()
|
||||
|
||||
config_json = json.dumps(self.config, indent=2)
|
||||
|
||||
# Remove plugin array from JSON (we'll add it with require())
|
||||
config_obj = self.config.copy()
|
||||
config_obj.pop("plugins", None)
|
||||
config_json = json.dumps(config_obj, indent=2)
|
||||
|
||||
return f"""import type {{ Config }} from 'tailwindcss'
|
||||
|
||||
const config: Config = {{
|
||||
{self._indent_json(config_json, 1)}
|
||||
plugins: [{plugins_str}],
|
||||
}}
|
||||
|
||||
export default config
|
||||
"""
|
||||
|
||||
def _generate_javascript(self) -> str:
|
||||
"""Generate JavaScript configuration."""
|
||||
plugins_str = self._format_plugins()
|
||||
|
||||
config_obj = self.config.copy()
|
||||
config_obj.pop("plugins", None)
|
||||
config_json = json.dumps(config_obj, indent=2)
|
||||
|
||||
return f"""/** @type {{import('tailwindcss').Config}} */
|
||||
module.exports = {{
|
||||
{self._indent_json(config_json, 1)}
|
||||
plugins: [{plugins_str}],
|
||||
}}
|
||||
"""
|
||||
|
||||
def _format_plugins(self) -> str:
|
||||
"""Format plugins array for config."""
|
||||
if not self.config["plugins"]:
|
||||
return ""
|
||||
|
||||
plugin_requires = [
|
||||
f"require('{plugin}')" for plugin in self.config["plugins"]
|
||||
]
|
||||
return ", ".join(plugin_requires)
|
||||
|
||||
def _indent_json(self, json_str: str, level: int) -> str:
|
||||
"""Add indentation to JSON string."""
|
||||
indent = " " * level
|
||||
lines = json_str.split("\n")
|
||||
# Skip first and last lines (braces)
|
||||
indented = [indent + line for line in lines[1:-1]]
|
||||
return "\n".join(indented)
|
||||
|
||||
def write_config(self) -> tuple[bool, str]:
|
||||
"""
|
||||
Write configuration to file.
|
||||
|
||||
Returns:
|
||||
Tuple of (success, message)
|
||||
"""
|
||||
try:
|
||||
config_content = self.generate_config_string()
|
||||
|
||||
self.output_path.write_text(config_content, encoding='utf-8')
|
||||
|
||||
return True, f"Configuration written to {self.output_path}"
|
||||
|
||||
except OSError as e:
|
||||
return False, f"Failed to write config: {e}"
|
||||
|
||||
def validate_config(self) -> tuple[bool, str]:
|
||||
"""
|
||||
Validate configuration.
|
||||
|
||||
Returns:
|
||||
Tuple of (valid, message)
|
||||
"""
|
||||
# Check content paths exist
|
||||
if not self.config["content"]:
|
||||
return False, "No content paths specified"
|
||||
|
||||
# Check if extending empty theme
|
||||
if not self.config["theme"]["extend"]:
|
||||
return True, "Warning: No theme extensions defined"
|
||||
|
||||
return True, "Configuration valid"
|
||||
|
||||
|
||||
def main():
|
||||
"""CLI entry point."""
|
||||
parser = argparse.ArgumentParser(
|
||||
description="Generate Tailwind CSS configuration",
|
||||
formatter_class=argparse.RawDescriptionHelpFormatter,
|
||||
epilog="""
|
||||
Examples:
|
||||
# Generate TypeScript config for Next.js
|
||||
python tailwind_config_gen.py --framework nextjs
|
||||
|
||||
# Generate JavaScript config with custom colors
|
||||
python tailwind_config_gen.py --js --colors brand:#3b82f6 accent:#8b5cf6
|
||||
|
||||
# Add custom fonts
|
||||
python tailwind_config_gen.py --fonts display:"Playfair Display,serif"
|
||||
|
||||
# Add custom spacing and breakpoints
|
||||
python tailwind_config_gen.py --spacing navbar:4rem --breakpoints 3xl:1920px
|
||||
|
||||
# Add recommended plugins
|
||||
python tailwind_config_gen.py --plugins
|
||||
""",
|
||||
)
|
||||
|
||||
parser.add_argument(
|
||||
"--framework",
|
||||
choices=["react", "vue", "svelte", "nextjs"],
|
||||
default="react",
|
||||
help="Target framework (default: react)",
|
||||
)
|
||||
|
||||
parser.add_argument(
|
||||
"--js",
|
||||
action="store_true",
|
||||
help="Generate JavaScript config instead of TypeScript",
|
||||
)
|
||||
|
||||
parser.add_argument(
|
||||
"--output",
|
||||
type=Path,
|
||||
help="Output file path",
|
||||
)
|
||||
|
||||
parser.add_argument(
|
||||
"--colors",
|
||||
nargs="*",
|
||||
metavar="NAME:VALUE",
|
||||
help="Custom colors (e.g., brand:#3b82f6)",
|
||||
)
|
||||
|
||||
parser.add_argument(
|
||||
"--fonts",
|
||||
nargs="*",
|
||||
metavar="TYPE:FAMILY",
|
||||
help="Custom fonts (e.g., sans:'Inter,system-ui')",
|
||||
)
|
||||
|
||||
parser.add_argument(
|
||||
"--spacing",
|
||||
nargs="*",
|
||||
metavar="NAME:VALUE",
|
||||
help="Custom spacing (e.g., navbar:4rem)",
|
||||
)
|
||||
|
||||
parser.add_argument(
|
||||
"--breakpoints",
|
||||
nargs="*",
|
||||
metavar="NAME:WIDTH",
|
||||
help="Custom breakpoints (e.g., 3xl:1920px)",
|
||||
)
|
||||
|
||||
parser.add_argument(
|
||||
"--plugins",
|
||||
action="store_true",
|
||||
help="Add recommended plugins",
|
||||
)
|
||||
|
||||
parser.add_argument(
|
||||
"--validate-only",
|
||||
action="store_true",
|
||||
help="Validate config without writing file",
|
||||
)
|
||||
|
||||
args = parser.parse_args()
|
||||
|
||||
# Initialize generator
|
||||
generator = TailwindConfigGenerator(
|
||||
typescript=not args.js,
|
||||
framework=args.framework,
|
||||
output_path=args.output,
|
||||
)
|
||||
|
||||
# Add custom colors
|
||||
if args.colors:
|
||||
colors = {}
|
||||
for color_spec in args.colors:
|
||||
try:
|
||||
name, value = color_spec.split(":", 1)
|
||||
colors[name] = value
|
||||
except ValueError:
|
||||
print(f"Invalid color spec: {color_spec}", file=sys.stderr)
|
||||
sys.exit(1)
|
||||
generator.add_colors(colors)
|
||||
|
||||
# Add custom fonts
|
||||
if args.fonts:
|
||||
fonts = {}
|
||||
for font_spec in args.fonts:
|
||||
try:
|
||||
font_type, family = font_spec.split(":", 1)
|
||||
fonts[font_type] = [f.strip().strip("'\"") for f in family.split(",")]
|
||||
except ValueError:
|
||||
print(f"Invalid font spec: {font_spec}", file=sys.stderr)
|
||||
sys.exit(1)
|
||||
generator.add_fonts(fonts)
|
||||
|
||||
# Add custom spacing
|
||||
if args.spacing:
|
||||
spacing = {}
|
||||
for spacing_spec in args.spacing:
|
||||
try:
|
||||
name, value = spacing_spec.split(":", 1)
|
||||
spacing[name] = value
|
||||
except ValueError:
|
||||
print(f"Invalid spacing spec: {spacing_spec}", file=sys.stderr)
|
||||
sys.exit(1)
|
||||
generator.add_spacing(spacing)
|
||||
|
||||
# Add custom breakpoints
|
||||
if args.breakpoints:
|
||||
breakpoints = {}
|
||||
for bp_spec in args.breakpoints:
|
||||
try:
|
||||
name, width = bp_spec.split(":", 1)
|
||||
breakpoints[name] = width
|
||||
except ValueError:
|
||||
print(f"Invalid breakpoint spec: {bp_spec}", file=sys.stderr)
|
||||
sys.exit(1)
|
||||
generator.add_breakpoints(breakpoints)
|
||||
|
||||
# Add recommended plugins
|
||||
if args.plugins:
|
||||
recommended = generator.recommend_plugins()
|
||||
generator.add_plugins(recommended)
|
||||
print(f"Added recommended plugins: {', '.join(recommended)}")
|
||||
print("\nInstall with:")
|
||||
print(f" npm install -D {' '.join(recommended)}")
|
||||
|
||||
# Validate
|
||||
valid, message = generator.validate_config()
|
||||
if not valid:
|
||||
print(f"Validation failed: {message}", file=sys.stderr)
|
||||
sys.exit(1)
|
||||
|
||||
if message.startswith("Warning"):
|
||||
print(message)
|
||||
|
||||
# Validate only mode
|
||||
if args.validate_only:
|
||||
print("Configuration valid")
|
||||
print("\nGenerated config:")
|
||||
print(generator.generate_config_string())
|
||||
sys.exit(0)
|
||||
|
||||
# Write config
|
||||
success, message = generator.write_config()
|
||||
print(message)
|
||||
sys.exit(0 if success else 1)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
|
||||
pytest>=7.4.0
|
||||
pytest-cov>=4.1.0
|
||||
pytest-mock>=3.11.1
|
||||
266
.opencode/skills/ui-styling/scripts/tests/test_shadcn_add.py
Normal file
266
.opencode/skills/ui-styling/scripts/tests/test_shadcn_add.py
Normal file
@@ -0,0 +1,266 @@
|
||||
"""Tests for shadcn_add.py"""
|
||||
|
||||
import json
|
||||
import subprocess
|
||||
from pathlib import Path
|
||||
from unittest.mock import MagicMock, mock_open, patch
|
||||
|
||||
import pytest
|
||||
|
||||
# Add parent directory to path for imports
|
||||
import sys
|
||||
sys.path.insert(0, str(Path(__file__).parent.parent))
|
||||
|
||||
from shadcn_add import ShadcnInstaller
|
||||
|
||||
|
||||
class TestShadcnInstaller:
|
||||
"""Test ShadcnInstaller class."""
|
||||
|
||||
@pytest.fixture
|
||||
def temp_project(self, tmp_path):
|
||||
"""Create temporary project structure."""
|
||||
project_root = tmp_path / "test-project"
|
||||
project_root.mkdir()
|
||||
|
||||
# Create components.json
|
||||
components_json = project_root / "components.json"
|
||||
components_json.write_text(
|
||||
json.dumps({
|
||||
"style": "new-york",
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils"
|
||||
}
|
||||
})
|
||||
)
|
||||
|
||||
# Create components directory
|
||||
ui_dir = project_root / "components" / "ui"
|
||||
ui_dir.mkdir(parents=True)
|
||||
|
||||
return project_root
|
||||
|
||||
def test_init_default_project_root(self):
|
||||
"""Test initialization with default project root."""
|
||||
installer = ShadcnInstaller()
|
||||
assert installer.project_root == Path.cwd()
|
||||
assert installer.dry_run is False
|
||||
|
||||
def test_init_custom_project_root(self, tmp_path):
|
||||
"""Test initialization with custom project root."""
|
||||
installer = ShadcnInstaller(project_root=tmp_path)
|
||||
assert installer.project_root == tmp_path
|
||||
|
||||
def test_init_dry_run(self):
|
||||
"""Test initialization with dry run mode."""
|
||||
installer = ShadcnInstaller(dry_run=True)
|
||||
assert installer.dry_run is True
|
||||
|
||||
def test_check_shadcn_config_exists(self, temp_project):
|
||||
"""Test checking for existing shadcn config."""
|
||||
installer = ShadcnInstaller(project_root=temp_project)
|
||||
assert installer.check_shadcn_config() is True
|
||||
|
||||
def test_check_shadcn_config_not_exists(self, tmp_path):
|
||||
"""Test checking for non-existent shadcn config."""
|
||||
installer = ShadcnInstaller(project_root=tmp_path)
|
||||
assert installer.check_shadcn_config() is False
|
||||
|
||||
def test_get_installed_components_empty(self, temp_project):
|
||||
"""Test getting installed components when none exist."""
|
||||
installer = ShadcnInstaller(project_root=temp_project)
|
||||
installed = installer.get_installed_components()
|
||||
assert installed == []
|
||||
|
||||
def test_get_installed_components_with_files(self, temp_project):
|
||||
"""Test getting installed components when files exist."""
|
||||
ui_dir = temp_project / "components" / "ui"
|
||||
|
||||
# Create component files
|
||||
(ui_dir / "button.tsx").write_text("export const Button = () => {}")
|
||||
(ui_dir / "card.tsx").write_text("export const Card = () => {}")
|
||||
|
||||
installer = ShadcnInstaller(project_root=temp_project)
|
||||
installed = installer.get_installed_components()
|
||||
|
||||
assert sorted(installed) == ["button", "card"]
|
||||
|
||||
def test_get_installed_components_no_config(self, tmp_path):
|
||||
"""Test getting installed components without config."""
|
||||
installer = ShadcnInstaller(project_root=tmp_path)
|
||||
installed = installer.get_installed_components()
|
||||
assert installed == []
|
||||
|
||||
def test_add_components_no_components(self, temp_project):
|
||||
"""Test adding components with empty list."""
|
||||
installer = ShadcnInstaller(project_root=temp_project)
|
||||
success, message = installer.add_components([])
|
||||
|
||||
assert success is False
|
||||
assert "No components specified" in message
|
||||
|
||||
def test_add_components_no_config(self, tmp_path):
|
||||
"""Test adding components without shadcn config."""
|
||||
installer = ShadcnInstaller(project_root=tmp_path)
|
||||
success, message = installer.add_components(["button"])
|
||||
|
||||
assert success is False
|
||||
assert "not initialized" in message
|
||||
|
||||
def test_add_components_already_installed(self, temp_project):
|
||||
"""Test adding components that are already installed."""
|
||||
ui_dir = temp_project / "components" / "ui"
|
||||
(ui_dir / "button.tsx").write_text("export const Button = () => {}")
|
||||
|
||||
installer = ShadcnInstaller(project_root=temp_project)
|
||||
success, message = installer.add_components(["button"])
|
||||
|
||||
assert success is False
|
||||
assert "already installed" in message
|
||||
assert "button" in message
|
||||
|
||||
def test_add_components_with_overwrite(self, temp_project):
|
||||
"""Test adding components with overwrite flag."""
|
||||
ui_dir = temp_project / "components" / "ui"
|
||||
(ui_dir / "button.tsx").write_text("export const Button = () => {}")
|
||||
|
||||
installer = ShadcnInstaller(project_root=temp_project)
|
||||
|
||||
with patch("subprocess.run") as mock_run:
|
||||
mock_run.return_value = MagicMock(
|
||||
stdout="Component added successfully",
|
||||
returncode=0
|
||||
)
|
||||
|
||||
success, message = installer.add_components(["button"], overwrite=True)
|
||||
|
||||
assert success is True
|
||||
assert "Successfully added" in message
|
||||
mock_run.assert_called_once()
|
||||
|
||||
# Verify --overwrite flag was passed
|
||||
call_args = mock_run.call_args[0][0]
|
||||
assert "--overwrite" in call_args
|
||||
|
||||
def test_add_components_dry_run(self, temp_project):
|
||||
"""Test adding components in dry run mode."""
|
||||
installer = ShadcnInstaller(project_root=temp_project, dry_run=True)
|
||||
success, message = installer.add_components(["button", "card"])
|
||||
|
||||
assert success is True
|
||||
assert "Would run:" in message
|
||||
assert "button" in message
|
||||
assert "card" in message
|
||||
|
||||
@patch("subprocess.run")
|
||||
def test_add_components_success(self, mock_run, temp_project):
|
||||
"""Test successful component addition."""
|
||||
mock_run.return_value = MagicMock(
|
||||
stdout="Components added successfully",
|
||||
stderr="",
|
||||
returncode=0
|
||||
)
|
||||
|
||||
installer = ShadcnInstaller(project_root=temp_project)
|
||||
success, message = installer.add_components(["button", "card"])
|
||||
|
||||
assert success is True
|
||||
assert "Successfully added" in message
|
||||
assert "button" in message
|
||||
assert "card" in message
|
||||
|
||||
# Verify correct command was called
|
||||
mock_run.assert_called_once()
|
||||
call_args = mock_run.call_args[0][0]
|
||||
assert call_args[:3] == ["npx", "shadcn@latest", "add"]
|
||||
assert "button" in call_args
|
||||
assert "card" in call_args
|
||||
|
||||
@patch("subprocess.run")
|
||||
def test_add_components_subprocess_error(self, mock_run, temp_project):
|
||||
"""Test component addition with subprocess error."""
|
||||
mock_run.side_effect = subprocess.CalledProcessError(
|
||||
1, "cmd", stderr="Error occurred"
|
||||
)
|
||||
|
||||
installer = ShadcnInstaller(project_root=temp_project)
|
||||
success, message = installer.add_components(["button"])
|
||||
|
||||
assert success is False
|
||||
assert "Failed to add" in message
|
||||
|
||||
@patch("subprocess.run")
|
||||
def test_add_components_npx_not_found(self, mock_run, temp_project):
|
||||
"""Test component addition when npx is not found."""
|
||||
mock_run.side_effect = FileNotFoundError()
|
||||
|
||||
installer = ShadcnInstaller(project_root=temp_project)
|
||||
success, message = installer.add_components(["button"])
|
||||
|
||||
assert success is False
|
||||
assert "npx not found" in message
|
||||
|
||||
def test_add_all_components_no_config(self, tmp_path):
|
||||
"""Test adding all components without config."""
|
||||
installer = ShadcnInstaller(project_root=tmp_path)
|
||||
success, message = installer.add_all_components()
|
||||
|
||||
assert success is False
|
||||
assert "not initialized" in message
|
||||
|
||||
def test_add_all_components_dry_run(self, temp_project):
|
||||
"""Test adding all components in dry run mode."""
|
||||
installer = ShadcnInstaller(project_root=temp_project, dry_run=True)
|
||||
success, message = installer.add_all_components()
|
||||
|
||||
assert success is True
|
||||
assert "Would run:" in message
|
||||
assert "--all" in message
|
||||
|
||||
@patch("subprocess.run")
|
||||
def test_add_all_components_success(self, mock_run, temp_project):
|
||||
"""Test successful addition of all components."""
|
||||
mock_run.return_value = MagicMock(
|
||||
stdout="All components added",
|
||||
returncode=0
|
||||
)
|
||||
|
||||
installer = ShadcnInstaller(project_root=temp_project)
|
||||
success, message = installer.add_all_components()
|
||||
|
||||
assert success is True
|
||||
assert "Successfully added all" in message
|
||||
|
||||
# Verify --all flag was passed
|
||||
call_args = mock_run.call_args[0][0]
|
||||
assert "--all" in call_args
|
||||
|
||||
def test_list_installed_no_config(self, tmp_path):
|
||||
"""Test listing installed components without config."""
|
||||
installer = ShadcnInstaller(project_root=tmp_path)
|
||||
success, message = installer.list_installed()
|
||||
|
||||
assert success is False
|
||||
assert "not initialized" in message
|
||||
|
||||
def test_list_installed_empty(self, temp_project):
|
||||
"""Test listing installed components when none exist."""
|
||||
installer = ShadcnInstaller(project_root=temp_project)
|
||||
success, message = installer.list_installed()
|
||||
|
||||
assert success is True
|
||||
assert "No components installed" in message
|
||||
|
||||
def test_list_installed_with_components(self, temp_project):
|
||||
"""Test listing installed components when they exist."""
|
||||
ui_dir = temp_project / "components" / "ui"
|
||||
(ui_dir / "button.tsx").write_text("export const Button = () => {}")
|
||||
(ui_dir / "card.tsx").write_text("export const Card = () => {}")
|
||||
|
||||
installer = ShadcnInstaller(project_root=temp_project)
|
||||
success, message = installer.list_installed()
|
||||
|
||||
assert success is True
|
||||
assert "button" in message
|
||||
assert "card" in message
|
||||
@@ -0,0 +1,336 @@
|
||||
"""Tests for tailwind_config_gen.py"""
|
||||
|
||||
from pathlib import Path
|
||||
|
||||
import pytest
|
||||
|
||||
# Add parent directory to path for imports
|
||||
import sys
|
||||
sys.path.insert(0, str(Path(__file__).parent.parent))
|
||||
|
||||
from tailwind_config_gen import TailwindConfigGenerator
|
||||
|
||||
|
||||
class TestTailwindConfigGenerator:
|
||||
"""Test TailwindConfigGenerator class."""
|
||||
|
||||
def test_init_default_typescript(self):
|
||||
"""Test initialization with default settings."""
|
||||
generator = TailwindConfigGenerator()
|
||||
assert generator.typescript is True
|
||||
assert generator.framework == "react"
|
||||
|
||||
def test_init_javascript(self):
|
||||
"""Test initialization for JavaScript config."""
|
||||
generator = TailwindConfigGenerator(typescript=False)
|
||||
assert generator.typescript is False
|
||||
|
||||
def test_init_framework(self):
|
||||
"""Test initialization with different frameworks."""
|
||||
for framework in ["react", "vue", "svelte", "nextjs"]:
|
||||
generator = TailwindConfigGenerator(framework=framework)
|
||||
assert generator.framework == framework
|
||||
|
||||
def test_default_output_path_typescript(self):
|
||||
"""Test default output path for TypeScript."""
|
||||
generator = TailwindConfigGenerator(typescript=True)
|
||||
assert generator.output_path.name == "tailwind.config.ts"
|
||||
|
||||
def test_default_output_path_javascript(self):
|
||||
"""Test default output path for JavaScript."""
|
||||
generator = TailwindConfigGenerator(typescript=False)
|
||||
assert generator.output_path.name == "tailwind.config.js"
|
||||
|
||||
def test_custom_output_path(self, tmp_path):
|
||||
"""Test custom output path."""
|
||||
custom_path = tmp_path / "custom-config.ts"
|
||||
generator = TailwindConfigGenerator(output_path=custom_path)
|
||||
assert generator.output_path == custom_path
|
||||
|
||||
def test_base_config_structure(self):
|
||||
"""Test base configuration structure."""
|
||||
generator = TailwindConfigGenerator()
|
||||
config = generator.config
|
||||
|
||||
assert "darkMode" in config
|
||||
assert "content" in config
|
||||
assert "theme" in config
|
||||
assert "plugins" in config
|
||||
assert "extend" in config["theme"]
|
||||
|
||||
def test_default_content_paths_react(self):
|
||||
"""Test default content paths for React."""
|
||||
generator = TailwindConfigGenerator(framework="react")
|
||||
paths = generator.config["content"]
|
||||
|
||||
assert any("src/**/*.{js,jsx,ts,tsx}" in p for p in paths)
|
||||
assert any("index.html" in p for p in paths)
|
||||
|
||||
def test_default_content_paths_nextjs(self):
|
||||
"""Test default content paths for Next.js."""
|
||||
generator = TailwindConfigGenerator(framework="nextjs")
|
||||
paths = generator.config["content"]
|
||||
|
||||
assert any("app/**" in p for p in paths)
|
||||
assert any("pages/**" in p for p in paths)
|
||||
assert any("components/**" in p for p in paths)
|
||||
|
||||
def test_default_content_paths_vue(self):
|
||||
"""Test default content paths for Vue."""
|
||||
generator = TailwindConfigGenerator(framework="vue")
|
||||
paths = generator.config["content"]
|
||||
|
||||
assert any("vue" in p for p in paths)
|
||||
|
||||
def test_add_colors(self):
|
||||
"""Test adding custom colors."""
|
||||
generator = TailwindConfigGenerator()
|
||||
colors = {
|
||||
"brand": "#3b82f6",
|
||||
"accent": "#8b5cf6"
|
||||
}
|
||||
generator.add_colors(colors)
|
||||
|
||||
assert "colors" in generator.config["theme"]["extend"]
|
||||
assert generator.config["theme"]["extend"]["colors"]["brand"] == "#3b82f6"
|
||||
assert generator.config["theme"]["extend"]["colors"]["accent"] == "#8b5cf6"
|
||||
|
||||
def test_add_colors_multiple_times(self):
|
||||
"""Test adding colors multiple times."""
|
||||
generator = TailwindConfigGenerator()
|
||||
|
||||
generator.add_colors({"brand": "#3b82f6"})
|
||||
generator.add_colors({"accent": "#8b5cf6"})
|
||||
|
||||
colors = generator.config["theme"]["extend"]["colors"]
|
||||
assert "brand" in colors
|
||||
assert "accent" in colors
|
||||
|
||||
def test_add_color_palette(self):
|
||||
"""Test adding full color palette."""
|
||||
generator = TailwindConfigGenerator()
|
||||
generator.add_color_palette("brand", "#3b82f6")
|
||||
|
||||
brand = generator.config["theme"]["extend"]["colors"]["brand"]
|
||||
|
||||
assert isinstance(brand, dict)
|
||||
assert "50" in brand
|
||||
assert "500" in brand
|
||||
assert "950" in brand
|
||||
assert "var(--color-brand" in brand["500"]
|
||||
|
||||
def test_add_fonts(self):
|
||||
"""Test adding custom fonts."""
|
||||
generator = TailwindConfigGenerator()
|
||||
fonts = {
|
||||
"sans": ["Inter", "system-ui", "sans-serif"],
|
||||
"display": ["Playfair Display", "serif"]
|
||||
}
|
||||
generator.add_fonts(fonts)
|
||||
|
||||
font_family = generator.config["theme"]["extend"]["fontFamily"]
|
||||
assert font_family["sans"] == ["Inter", "system-ui", "sans-serif"]
|
||||
assert font_family["display"] == ["Playfair Display", "serif"]
|
||||
|
||||
def test_add_spacing(self):
|
||||
"""Test adding custom spacing."""
|
||||
generator = TailwindConfigGenerator()
|
||||
spacing = {
|
||||
"18": "4.5rem",
|
||||
"navbar": "4rem"
|
||||
}
|
||||
generator.add_spacing(spacing)
|
||||
|
||||
spacing_config = generator.config["theme"]["extend"]["spacing"]
|
||||
assert spacing_config["18"] == "4.5rem"
|
||||
assert spacing_config["navbar"] == "4rem"
|
||||
|
||||
def test_add_breakpoints(self):
|
||||
"""Test adding custom breakpoints."""
|
||||
generator = TailwindConfigGenerator()
|
||||
breakpoints = {
|
||||
"3xl": "1920px",
|
||||
"tablet": "768px"
|
||||
}
|
||||
generator.add_breakpoints(breakpoints)
|
||||
|
||||
screens = generator.config["theme"]["extend"]["screens"]
|
||||
assert screens["3xl"] == "1920px"
|
||||
assert screens["tablet"] == "768px"
|
||||
|
||||
def test_add_plugins(self):
|
||||
"""Test adding plugins."""
|
||||
generator = TailwindConfigGenerator()
|
||||
plugins = ["@tailwindcss/typography", "@tailwindcss/forms"]
|
||||
generator.add_plugins(plugins)
|
||||
|
||||
assert "@tailwindcss/typography" in generator.config["plugins"]
|
||||
assert "@tailwindcss/forms" in generator.config["plugins"]
|
||||
|
||||
def test_add_plugins_no_duplicates(self):
|
||||
"""Test that adding same plugin twice doesn't duplicate."""
|
||||
generator = TailwindConfigGenerator()
|
||||
generator.add_plugins(["@tailwindcss/typography"])
|
||||
generator.add_plugins(["@tailwindcss/typography"])
|
||||
|
||||
count = generator.config["plugins"].count("@tailwindcss/typography")
|
||||
assert count == 1
|
||||
|
||||
def test_recommend_plugins(self):
|
||||
"""Test plugin recommendations."""
|
||||
generator = TailwindConfigGenerator()
|
||||
recommendations = generator.recommend_plugins()
|
||||
|
||||
assert isinstance(recommendations, list)
|
||||
assert "tailwindcss-animate" in recommendations
|
||||
|
||||
def test_recommend_plugins_nextjs(self):
|
||||
"""Test plugin recommendations for Next.js."""
|
||||
generator = TailwindConfigGenerator(framework="nextjs")
|
||||
recommendations = generator.recommend_plugins()
|
||||
|
||||
assert "@tailwindcss/typography" in recommendations
|
||||
|
||||
def test_generate_typescript_config(self):
|
||||
"""Test generating TypeScript configuration."""
|
||||
generator = TailwindConfigGenerator(typescript=True)
|
||||
config = generator.generate_config_string()
|
||||
|
||||
assert "import type { Config } from 'tailwindcss'" in config
|
||||
assert "const config: Config" in config
|
||||
assert "export default config" in config
|
||||
|
||||
def test_generate_javascript_config(self):
|
||||
"""Test generating JavaScript configuration."""
|
||||
generator = TailwindConfigGenerator(typescript=False)
|
||||
config = generator.generate_config_string()
|
||||
|
||||
assert "module.exports" in config
|
||||
assert "@type" in config
|
||||
|
||||
def test_generate_config_with_colors(self):
|
||||
"""Test generating config with custom colors."""
|
||||
generator = TailwindConfigGenerator()
|
||||
generator.add_colors({"brand": "#3b82f6"})
|
||||
config = generator.generate_config_string()
|
||||
|
||||
assert "colors" in config
|
||||
assert "brand" in config
|
||||
|
||||
def test_generate_config_with_plugins(self):
|
||||
"""Test generating config with plugins."""
|
||||
generator = TailwindConfigGenerator()
|
||||
generator.add_plugins(["tailwindcss-animate"])
|
||||
config = generator.generate_config_string()
|
||||
|
||||
assert "plugins:" in config
|
||||
assert "require('tailwindcss-animate')" in config
|
||||
|
||||
def test_validate_config_valid(self):
|
||||
"""Test validating valid configuration."""
|
||||
generator = TailwindConfigGenerator()
|
||||
valid, message = generator.validate_config()
|
||||
|
||||
assert valid is True
|
||||
|
||||
def test_validate_config_no_content(self):
|
||||
"""Test validating config with no content paths."""
|
||||
generator = TailwindConfigGenerator()
|
||||
generator.config["content"] = []
|
||||
|
||||
valid, message = generator.validate_config()
|
||||
|
||||
assert valid is False
|
||||
assert "No content paths" in message
|
||||
|
||||
def test_validate_config_empty_theme(self):
|
||||
"""Test validating config with empty theme extensions."""
|
||||
generator = TailwindConfigGenerator()
|
||||
# Default has empty theme.extend
|
||||
|
||||
valid, message = generator.validate_config()
|
||||
|
||||
assert valid is True
|
||||
assert "Warning" in message
|
||||
|
||||
def test_write_config(self, tmp_path):
|
||||
"""Test writing configuration to file."""
|
||||
output_path = tmp_path / "tailwind.config.ts"
|
||||
generator = TailwindConfigGenerator(output_path=output_path)
|
||||
|
||||
success, message = generator.write_config()
|
||||
|
||||
assert success is True
|
||||
assert output_path.exists()
|
||||
assert "written to" in message
|
||||
|
||||
def test_write_config_creates_content(self, tmp_path):
|
||||
"""Test that written config contains expected content."""
|
||||
output_path = tmp_path / "tailwind.config.ts"
|
||||
generator = TailwindConfigGenerator(output_path=output_path)
|
||||
generator.add_colors({"brand": "#3b82f6"})
|
||||
|
||||
generator.write_config()
|
||||
|
||||
content = output_path.read_text()
|
||||
assert "import type { Config }" in content
|
||||
assert "brand" in content
|
||||
|
||||
def test_write_config_invalid_path(self):
|
||||
"""Test writing config to invalid path."""
|
||||
generator = TailwindConfigGenerator(output_path=Path("/invalid/path/config.ts"))
|
||||
|
||||
success, message = generator.write_config()
|
||||
|
||||
assert success is False
|
||||
assert "Failed to write" in message
|
||||
|
||||
def test_full_configuration_typescript(self, tmp_path):
|
||||
"""Test generating complete TypeScript configuration."""
|
||||
output_path = tmp_path / "tailwind.config.ts"
|
||||
generator = TailwindConfigGenerator(
|
||||
typescript=True,
|
||||
framework="nextjs",
|
||||
output_path=output_path
|
||||
)
|
||||
|
||||
# Add various customizations
|
||||
generator.add_colors({"brand": "#3b82f6", "accent": "#8b5cf6"})
|
||||
generator.add_fonts({"sans": ["Inter", "sans-serif"]})
|
||||
generator.add_spacing({"navbar": "4rem"})
|
||||
generator.add_breakpoints({"3xl": "1920px"})
|
||||
generator.add_plugins(["tailwindcss-animate"])
|
||||
|
||||
success, _ = generator.write_config()
|
||||
assert success is True
|
||||
|
||||
content = output_path.read_text()
|
||||
|
||||
# Verify all customizations are present
|
||||
assert "brand" in content
|
||||
assert "accent" in content
|
||||
assert "Inter" in content
|
||||
assert "navbar" in content
|
||||
assert "3xl" in content
|
||||
assert "tailwindcss-animate" in content
|
||||
|
||||
def test_full_configuration_javascript(self, tmp_path):
|
||||
"""Test generating complete JavaScript configuration."""
|
||||
output_path = tmp_path / "tailwind.config.js"
|
||||
generator = TailwindConfigGenerator(
|
||||
typescript=False,
|
||||
framework="react",
|
||||
output_path=output_path
|
||||
)
|
||||
|
||||
generator.add_colors({"primary": "#3b82f6"})
|
||||
generator.add_plugins(["@tailwindcss/forms"])
|
||||
|
||||
success, _ = generator.write_config()
|
||||
assert success is True
|
||||
|
||||
content = output_path.read_text()
|
||||
|
||||
assert "module.exports" in content
|
||||
assert "primary" in content
|
||||
assert "@tailwindcss/forms" in content
|
||||
Reference in New Issue
Block a user