dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-05 09:25:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore: Expand prettier commands to also run on packages (#32550)

Browse Source 
* Run prettier on packages too.

* Add the generated files for icons to prettierignore.

* Format all files in the packages folder.

* Minor fix.
This commit is contained in:
Ivan Vasilov authored and GitHub committed 2025-01-03 16:23:32 +01:00
1 parent 71fc66981c
commit a4acebe1bc
41 files changed
+1109 -1153
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.prettierignore
+3 -1
View File
@@ -16,4 +16,6 @@ apps/docs/pages/guides/integrations/*.mdx
apps/studio/public
apps/**/.turbo
apps/docs/CONTRIBUTING.md
apps/design-system/__registry__
apps/design-system/__registry__
packages/icons/__registry__
packages/icons/src/icons/*.ts
package.json
+2 -2
View File
@@ -20,8 +20,8 @@
"dev:design-system": "turbo run dev --filter=design-system --parallel",
"lint": "turbo run lint",
"typecheck": "turbo --continue typecheck",
"test:prettier": "prettier -c 'apps/**/*.{js,jsx,ts,tsx,css,md,mdx,json}'",
"format": "prettier --write \"apps/**/*.{js,jsx,ts,tsx,css,md,mdx,json}\" \"packages/pg-meta/**/*.ts\"",
"test:prettier": "prettier -c '{apps,packages}/**/*.{js,jsx,ts,tsx,css,md,mdx,json}'",
"format": "prettier --write '{apps,packages}/**/*.{js,jsx,ts,tsx,css,md,mdx,json}'",
"docker:dev": "cd docker && docker compose -f docker-compose.yml -f ./dev/docker-compose.dev.yml up --renew-anon-volumes",
"docker:up": "cd docker && docker compose up",
"docker:down": "cd docker && docker compose -f docker-compose.yml -f ./dev/docker-compose.dev.yml down --remove-orphans",
packages/ai-commands/test/sql-util.ts
+2 -3
View File
@@ -17,9 +17,8 @@ type ExtractKeys<T> = T extends T ? keyof T : never
/**
* Unwraps a Node to get its underlying value.
*/
type NodeValue<T extends Node, U extends ExtractKeys<Node>> = T extends Record<U, infer V>
? V
: never
type NodeValue<T extends Node, U extends ExtractKeys<Node>> =
T extends Record<U, infer V> ? V : never
export class AssertionError extends Error {
constructor(message: string) {
packages/ai-commands/tsconfig.json
+4 -12
View File
@@ -1,16 +1,8 @@
{
"extends": "tsconfig/react-library.json",
"include": [
"."
],
"exclude": [
"dist",
"build",
"node_modules"
],
"include": ["."],
"exclude": ["dist", "build", "node_modules"],
"compilerOptions": {
"types": [
"./test/extensions.d.ts"
]
"types": ["./test/extensions.d.ts"]
}
}
}
packages/common/database-types.ts
+64 -79
View File
@@ -1,10 +1,4 @@
export type Json =
| string
| number
| boolean
| null
| { [key: string]: Json | undefined }
| Json[]
export type Json = string | number | boolean | null | { [key: string]: Json | undefined } | Json[]
export type Database = {
graphql_public: {
@@ -40,21 +34,21 @@ export type Database = {
id: number
metadata: Json | null
page: string
vote: Database["public"]["Enums"]["feedback_vote"]
vote: Database['public']['Enums']['feedback_vote']
}
Insert: {
date_created?: string
id?: never
metadata?: Json | null
page: string
vote: Database["public"]["Enums"]["feedback_vote"]
vote: Database['public']['Enums']['feedback_vote']
}
Update: {
date_created?: string
id?: never
metadata?: Json | null
page?: string
vote?: Database["public"]["Enums"]["feedback_vote"]
vote?: Database['public']['Enums']['feedback_vote']
}
Relationships: []
}
@@ -145,11 +139,11 @@ export type Database = {
}
Relationships: [
{
foreignKeyName: "meetups_launch_week_fkey"
columns: ["launch_week"]
foreignKeyName: 'meetups_launch_week_fkey'
columns: ['launch_week']
isOneToOne: false
referencedRelation: "launch_weeks"
referencedColumns: ["id"]
referencedRelation: 'launch_weeks'
referencedColumns: ['id']
},
]
}
@@ -228,11 +222,11 @@ export type Database = {
}
Relationships: [
{
foreignKeyName: "page_section_page_id_fkey"
columns: ["page_id"]
foreignKeyName: 'page_section_page_id_fkey'
columns: ['page_id']
isOneToOne: false
referencedRelation: "page"
referencedColumns: ["id"]
referencedRelation: 'page'
referencedColumns: ['id']
},
]
}
@@ -293,25 +287,25 @@ export type Database = {
}
Relationships: [
{
foreignKeyName: "public_tickets_id_fkey"
columns: ["user_id"]
foreignKeyName: 'public_tickets_id_fkey'
columns: ['user_id']
isOneToOne: false
referencedRelation: "users"
referencedColumns: ["id"]
referencedRelation: 'users'
referencedColumns: ['id']
},
{
foreignKeyName: "tickets_launch_week_fkey"
columns: ["launch_week"]
foreignKeyName: 'tickets_launch_week_fkey'
columns: ['launch_week']
isOneToOne: false
referencedRelation: "launch_weeks"
referencedColumns: ["id"]
referencedRelation: 'launch_weeks'
referencedColumns: ['id']
},
{
foreignKeyName: "tickets_user_id_fkey"
columns: ["user_id"]
foreignKeyName: 'tickets_user_id_fkey'
columns: ['user_id']
isOneToOne: false
referencedRelation: "users"
referencedColumns: ["id"]
referencedRelation: 'users'
referencedColumns: ['id']
},
]
}
@@ -397,11 +391,11 @@ export type Database = {
}
Relationships: [
{
foreignKeyName: "tickets_launch_week_fkey"
columns: ["launch_week"]
foreignKeyName: 'tickets_launch_week_fkey'
columns: ['launch_week']
isOneToOne: false
referencedRelation: "launch_weeks"
referencedColumns: ["id"]
referencedRelation: 'launch_weeks'
referencedColumns: ['id']
},
]
}
@@ -451,7 +445,7 @@ export type Database = {
}
hnswhandler: {
Args: {
"": unknown
'': unknown
}
Returns: unknown
}
@@ -466,7 +460,7 @@ export type Database = {
}
ivfflathandler: {
Args: {
"": unknown
'': unknown
}
Returns: unknown
}
@@ -532,43 +526,43 @@ export type Database = {
}
vector_avg: {
Args: {
"": number[]
'': number[]
}
Returns: string
}
vector_dims: {
Args: {
"": string
'': string
}
Returns: number
}
vector_norm: {
Args: {
"": string
'': string
}
Returns: number
}
vector_out: {
Args: {
"": string
'': string
}
Returns: unknown
}
vector_send: {
Args: {
"": string
'': string
}
Returns: string
}
vector_typmod_in: {
Args: {
"": unknown[]
'': unknown[]
}
Returns: number
}
}
Enums: {
feedback_vote: "yes" | "no"
feedback_vote: 'yes' | 'no'
}
CompositeTypes: {
[_ in never]: never
@@ -678,11 +672,11 @@ export type Database = {
}
Relationships: [
{
foreignKeyName: "objects_bucketId_fkey"
columns: ["bucket_id"]
foreignKeyName: 'objects_bucketId_fkey'
columns: ['bucket_id']
isOneToOne: false
referencedRelation: "buckets"
referencedColumns: ["id"]
referencedRelation: 'buckets'
referencedColumns: ['id']
},
]
}
@@ -755,27 +749,25 @@ export type Database = {
}
}
type PublicSchema = Database[Extract<keyof Database, "public">]
type PublicSchema = Database[Extract<keyof Database, 'public'>]
export type Tables<
PublicTableNameOrOptions extends
| keyof (PublicSchema["Tables"] & PublicSchema["Views"])
| keyof (PublicSchema['Tables'] & PublicSchema['Views'])
| { schema: keyof Database },
TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
? keyof (Database[PublicTableNameOrOptions["schema"]]["Tables"] &
Database[PublicTableNameOrOptions["schema"]]["Views"])
? keyof (Database[PublicTableNameOrOptions['schema']]['Tables'] &
Database[PublicTableNameOrOptions['schema']]['Views'])
: never = never,
> = PublicTableNameOrOptions extends { schema: keyof Database }
? (Database[PublicTableNameOrOptions["schema"]]["Tables"] &
Database[PublicTableNameOrOptions["schema"]]["Views"])[TableName] extends {
? (Database[PublicTableNameOrOptions['schema']]['Tables'] &
Database[PublicTableNameOrOptions['schema']]['Views'])[TableName] extends {
Row: infer R
}
? R
: never
: PublicTableNameOrOptions extends keyof (PublicSchema["Tables"] &
PublicSchema["Views"])
? (PublicSchema["Tables"] &
PublicSchema["Views"])[PublicTableNameOrOptions] extends {
: PublicTableNameOrOptions extends keyof (PublicSchema['Tables'] & PublicSchema['Views'])
? (PublicSchema['Tables'] & PublicSchema['Views'])[PublicTableNameOrOptions] extends {
Row: infer R
}
? R
@@ -783,20 +775,18 @@ export type Tables<
: never
export type TablesInsert<
PublicTableNameOrOptions extends
| keyof PublicSchema["Tables"]
| { schema: keyof Database },
PublicTableNameOrOptions extends keyof PublicSchema['Tables'] | { schema: keyof Database },
TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
? keyof Database[PublicTableNameOrOptions["schema"]]["Tables"]
? keyof Database[PublicTableNameOrOptions['schema']]['Tables']
: never = never,
> = PublicTableNameOrOptions extends { schema: keyof Database }
? Database[PublicTableNameOrOptions["schema"]]["Tables"][TableName] extends {
? Database[PublicTableNameOrOptions['schema']]['Tables'][TableName] extends {
Insert: infer I
}
? I
: never
: PublicTableNameOrOptions extends keyof PublicSchema["Tables"]
? PublicSchema["Tables"][PublicTableNameOrOptions] extends {
: PublicTableNameOrOptions extends keyof PublicSchema['Tables']
? PublicSchema['Tables'][PublicTableNameOrOptions] extends {
Insert: infer I
}
? I
@@ -804,20 +794,18 @@ export type TablesInsert<
: never
export type TablesUpdate<
PublicTableNameOrOptions extends
| keyof PublicSchema["Tables"]
| { schema: keyof Database },
PublicTableNameOrOptions extends keyof PublicSchema['Tables'] | { schema: keyof Database },
TableName extends PublicTableNameOrOptions extends { schema: keyof Database }
? keyof Database[PublicTableNameOrOptions["schema"]]["Tables"]
? keyof Database[PublicTableNameOrOptions['schema']]['Tables']
: never = never,
> = PublicTableNameOrOptions extends { schema: keyof Database }
? Database[PublicTableNameOrOptions["schema"]]["Tables"][TableName] extends {
? Database[PublicTableNameOrOptions['schema']]['Tables'][TableName] extends {
Update: infer U
}
? U
: never
: PublicTableNameOrOptions extends keyof PublicSchema["Tables"]
? PublicSchema["Tables"][PublicTableNameOrOptions] extends {
: PublicTableNameOrOptions extends keyof PublicSchema['Tables']
? PublicSchema['Tables'][PublicTableNameOrOptions] extends {
Update: infer U
}
? U
@@ -825,15 +813,12 @@ export type TablesUpdate<
: never
export type Enums<
PublicEnumNameOrOptions extends
| keyof PublicSchema["Enums"]
| { schema: keyof Database },
PublicEnumNameOrOptions extends keyof PublicSchema['Enums'] | { schema: keyof Database },
EnumName extends PublicEnumNameOrOptions extends { schema: keyof Database }
? keyof Database[PublicEnumNameOrOptions["schema"]]["Enums"]
? keyof Database[PublicEnumNameOrOptions['schema']]['Enums']
: never = never,
> = PublicEnumNameOrOptions extends { schema: keyof Database }
? Database[PublicEnumNameOrOptions["schema"]]["Enums"][EnumName]
: PublicEnumNameOrOptions extends keyof PublicSchema["Enums"]
? PublicSchema["Enums"][PublicEnumNameOrOptions]
? Database[PublicEnumNameOrOptions['schema']]['Enums'][EnumName]
: PublicEnumNameOrOptions extends keyof PublicSchema['Enums']
? PublicSchema['Enums'][PublicEnumNameOrOptions]
: never
packages/generator/tsdoc.ts
+4 -15
View File
@@ -2,7 +2,7 @@ import { writeToDisk } from './helpers'
import stringify from 'json-stringify-safe'
import { parseArgs } from 'node:util'
import fs from 'fs'
import { strict as assert } from 'node:assert';
import { strict as assert } from 'node:assert'
const args = parseArgs({
options: {
@@ -24,13 +24,7 @@ interface KV {
[key: string]: any
}
async function dereference({
input,
output,
}: {
input: string
output: string
}) {
async function dereference({ input, output }: { input: string; output: string }) {
console.log('input', input)
const specRaw = fs.readFileSync(input, 'utf8')
@@ -72,9 +66,7 @@ function dereferenceReducer(child: any, kv: KV) {
!!child.type.declaration.children &&
child.type.type === 'reflection'
) {
child.type.declaration.children.forEach((x: any) =>
dereferenceReducer(x, kv)
)
child.type.declaration.children.forEach((x: any) => dereferenceReducer(x, kv))
}
const final = { ...child }
@@ -97,10 +89,7 @@ function dereferenceReducer(child: any, kv: KV) {
const dereferenced = kv[final.type.id]
final.type.dereferenced = dereferenced || {}
return final
} else if (
final.kindString === 'Type alias' &&
final.type?.type === 'union'
) {
} else if (final.kindString === 'Type alias' && final.type?.type === 'union') {
// handles union types that contain nested references
// by replacing the reference in-place
final.type.types = final.type.types.map((item: any) => {
packages/icons/src/createSupabaseIcon.ts
+18 -18
View File
@@ -5,20 +5,20 @@ import {
SVGProps,
ForwardRefExoticComponent,
RefAttributes,
} from 'react';
import defaultAttributes from './defaultAttributes';
} from 'react'
import defaultAttributes from './defaultAttributes'
export type IconNode = [elementName: keyof ReactSVG, attrs: Record<string, string>][];
export type IconNode = [elementName: keyof ReactSVG, attrs: Record<string, string>][]
export type SVGAttributes = Partial<SVGProps<SVGSVGElement>>;
type ComponentAttributes = RefAttributes<SVGSVGElement> & SVGAttributes;
export type SVGAttributes = Partial<SVGProps<SVGSVGElement>>
type ComponentAttributes = RefAttributes<SVGSVGElement> & SVGAttributes
export interface LucideProps extends ComponentAttributes {
size?: string | number;
absoluteStrokeWidth?: boolean;
size?: string | number
absoluteStrokeWidth?: boolean
}
export type LucideIcon = ForwardRefExoticComponent<LucideProps>;
export type LucideIcon = ForwardRefExoticComponent<LucideProps>
/**
* Converts string to KebabCase
* Copied from scripts/helper. If anyone knows how to properly import it here
@@ -31,7 +31,7 @@ export const toKebabCase = (string: string) =>
string
.replace(/([a-z0-9])([A-Z])/g, '$1-$2')
.toLowerCase()
.trim();
.trim()
const createLucideIcon = (iconName: string, iconNode: IconNode): LucideIcon => {
const Component = forwardRef<SVGSVGElement, LucideProps>(
@@ -45,7 +45,7 @@ const createLucideIcon = (iconName: string, iconNode: IconNode): LucideIcon => {
children,
...rest
},
ref,
ref
) => {
return createElement(
'svg',
@@ -64,14 +64,14 @@ const createLucideIcon = (iconName: string, iconNode: IconNode): LucideIcon => {
[
...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
...(Array.isArray(children) ? children : [children]),
],
);
},
);
]
)
}
)
Component.displayName = `${iconName}`;
Component.displayName = `${iconName}`
return Component;
};
return Component
}
export default createLucideIcon;
export default createLucideIcon
packages/icons/src/defaultAttributes.ts
+1 -1
View File
@@ -8,4 +8,4 @@ export default {
strokeWidth: 2,
strokeLinecap: 'round',
strokeLinejoin: 'round',
};
}
packages/icons/src/raw-icons/_example-template.json
+3 -17
View File
@@ -1,20 +1,6 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"it-is-not",
"jguddas",
"danielbayley",
"ericfennis"
],
"tags": [
"letter",
"font size",
"text",
"formatting",
"smaller"
],
"categories": [
"text",
"design"
]
"contributors": ["it-is-not", "jguddas", "danielbayley", "ericfennis"],
"tags": ["letter", "font size", "text", "formatting", "smaller"],
"categories": ["text", "design"]
}
packages/shared-data/config.ts
+4 -5
View File
@@ -104,9 +104,8 @@ const config = {
},
http_hooks: {
value: 5,
},
}
},
},
branching: {
inactivity_period_in_minutes: {
@@ -119,9 +118,9 @@ const config = {
*/
free_tier: {
value: '1',
unit: 'week'
}
}
unit: 'week',
},
},
} as const
export default config
packages/shared-data/regions.ts
+1 -1
View File
@@ -11,7 +11,7 @@ export const AWS_REGIONS = {
WEST_EU_3: { code: 'eu-west-3', displayName: 'West EU (Paris)' },
CENTRAL_EU: { code: 'eu-central-1', displayName: 'Central EU (Frankfurt)' },
CENTRAL_EU_2: { code: 'eu-central-2', displayName: 'Central Europe (Zurich)' },
NORTH_EU: { code: 'eu-north-1', displayName: 'North EU (Stockholm)'},
NORTH_EU: { code: 'eu-north-1', displayName: 'North EU (Stockholm)' },
SOUTH_ASIA: { code: 'ap-south-1', displayName: 'South Asia (Mumbai)' },
SOUTHEAST_ASIA: { code: 'ap-southeast-1', displayName: 'Southeast Asia (Singapore)' },
NORTHEAST_ASIA: { code: 'ap-northeast-1', displayName: 'Northeast Asia (Tokyo)' },
packages/tsconfig/package.json
+1 -5
View File
@@ -3,9 +3,5 @@
"version": "0.0.0",
"private": true,
"main": "index.js",
"files": [
"base.json",
"nextjs.json",
"react-library.json"
]
"files": ["base.json", "nextjs.json", "react-library.json"]
}
packages/ui-patterns/vitest.setup.ts
-1
View File
@@ -4,7 +4,6 @@ import '@testing-library/jest-dom/vitest'
import { cleanup } from '@testing-library/react'
import { afterEach, vi } from 'vitest'
Object.defineProperty(window, 'matchMedia', {
writable: true,
value: vi.fn().mockImplementation((query) => ({
packages/ui/build/css/tw-extend/color.js
+644 -644
View File
File diff suppressed because it is too large. Load diff
packages/ui/components.json
+1 -1
View File
@@ -12,4 +12,4 @@
"components": "src/components/shadcn",
"utils": "src/lib/utils"
}
}
}
packages/ui/internals/transform/common/camelCaseHelper.js
+2 -1
View File
@@ -1,3 +1,4 @@
const changeCase = require('change-case')
module.exports = name => changeCase.camelCase(name, { transform: changeCase.camelCaseTransformMerge })
module.exports = (name) =>
changeCase.camelCase(name, { transform: changeCase.camelCaseTransformMerge })
packages/ui/internals/transform/common/colorToHex8.js
+1 -1
View File
@@ -7,5 +7,5 @@ module.exports = {
},
transformer: function ({ value }) {
return `${new TinyColor.TinyColor(value).toHex8String()}`
}
},
}
packages/ui/internals/transform/common/colorToRgbaString.js
+1 -1
View File
@@ -7,5 +7,5 @@ module.exports = {
},
transformer: function ({ value }) {
return `${new TinyColor.TinyColor(value).toRgbString()}`
}
},
}
packages/ui/internals/transform/common/copyFileOrFolder.js
+1 -1
View File
@@ -12,5 +12,5 @@ module.exports = {
console.log(`Cleaning ${destination}`)
fs.removeSync(destination)
})
}
},
}
packages/ui/internals/transform/web/createPropertyFormatter.js
+45 -39
View File
@@ -16,7 +16,7 @@ const defaultFormatting = {
commentStyle: 'long',
indentation: '',
separator: ' =',
suffix: ';'
suffix: ';',
}
/**
@@ -47,38 +47,44 @@ const defaultFormatting = {
* @param {Object} options.formatting - Custom formatting properties that define parts of a declaration line in code. The configurable strings are: prefix, indentation, separator, suffix, and commentStyle. Those are used to generate a line like this: `${indentation}${prefix}${prop.name}${separator} ${prop.value}${suffix}`
* @returns {Function}
*/
function createPropertyFormatter({outputReferences, dictionary, format, formatting={}}) {
let {prefix, commentStyle, indentation, separator, suffix} = Object.assign({}, defaultFormatting, formatting);
function createPropertyFormatter({ outputReferences, dictionary, format, formatting = {} }) {
let { prefix, commentStyle, indentation, separator, suffix } = Object.assign(
{},
defaultFormatting,
formatting
)
switch(format) {
switch (format) {
case 'css':
prefix = '--';
indentation = ' ';
separator = ':';
break;
prefix = '--'
indentation = ' '
separator = ':'
break
case 'sass':
prefix = '$';
commentStyle = 'short';
indentation = '';
separator = ':';
break;
prefix = '$'
commentStyle = 'short'
indentation = ''
separator = ':'
break
case 'less':
prefix = '@';
commentStyle = 'short';
indentation = '';
separator = ':';
break;
prefix = '@'
commentStyle = 'short'
indentation = ''
separator = ':'
break
case 'stylus':
prefix = '$';
commentStyle = 'short';
indentation = '';
separator = '=';
break;
prefix = '$'
commentStyle = 'short'
indentation = ''
separator = '='
break
}
return function(prop) {
let to_ret_prop = `${indentation}${prefix}${prop.name}${separator} `.replace('--dark-', '--').replace('--light-', '--');
let value = prop.value;
return function (prop) {
let to_ret_prop = `${indentation}${prefix}${prop.name}${separator} `
.replace('--dark-', '--')
.replace('--light-', '--')
let value = prop.value
/**
* A single value can have multiple references either by interpolation:
@@ -96,43 +102,43 @@ function createPropertyFormatter({outputReferences, dictionary, format, formatti
// Formats that use this function expect `value` to be a string
// or else you will get '[object Object]' in the output
if (typeof value === 'string') {
const refs = dictionary.getReferences(prop.original.value);
refs.forEach(ref => {
const refs = dictionary.getReferences(prop.original.value)
refs.forEach((ref) => {
// value should be a string that contains the resolved reference
// because Style Dictionary resolved this in the resolution step.
// Here we are undoing that by replacing the value with
// the reference's name
if (ref.value && ref.name) {
value = value.replace(ref.value, function() {
value = value.replace(ref.value, function () {
if (format === 'css') {
return `var(${prefix}${ref.name})`
} else {
return `${prefix}${ref.name}`;
return `${prefix}${ref.name}`
}
});
})
}
});
})
}
}
to_ret_prop += prop.attributes.category === 'asset' ? `"${value}"` : value;
to_ret_prop += prop.attributes.category === 'asset' ? `"${value}"` : value
if (format == 'sass' && prop.themeable === true) {
to_ret_prop += ' !default';
to_ret_prop += ' !default'
}
to_ret_prop += suffix;
to_ret_prop += suffix
if (prop.comment && commentStyle !== 'none') {
if (commentStyle === 'short') {
to_ret_prop = to_ret_prop.concat(` // ${prop.comment}`);
to_ret_prop = to_ret_prop.concat(` // ${prop.comment}`)
} else {
to_ret_prop = to_ret_prop.concat(` /* ${prop.comment} */`);
to_ret_prop = to_ret_prop.concat(` /* ${prop.comment} */`)
}
}
return to_ret_prop;
return to_ret_prop
}
}
module.exports = createPropertyFormatter;
module.exports = createPropertyFormatter
packages/ui/internals/transform/web/fileHeader.js
+4 -7
View File
@@ -19,7 +19,7 @@ const defaultFormatting = {
lineSeparator,
prefix: ' * ',
header: `/**${lineSeparator}`,
footer: `${lineSeparator} */${lineSeparator}${lineSeparator}`
footer: `${lineSeparator} */${lineSeparator}${lineSeparator}`,
}
/**
@@ -45,7 +45,7 @@ const defaultFormatting = {
* });
* ```
*/
function fileHeader ({ file = {}, commentStyle, formatting = {} }) {
function fileHeader({ file = {}, commentStyle, formatting = {} }) {
// showFileHeader is true by default
let showFileHeader = true
if (file.options && typeof file.options.showFileHeader !== 'undefined') {
@@ -61,10 +61,7 @@ function fileHeader ({ file = {}, commentStyle, formatting = {} }) {
}
// default header
const defaultHeader = [
'Do not edit directly',
`Generated on ${new Date().toString()}`
]
const defaultHeader = ['Do not edit directly', `Generated on ${new Date().toString()}`]
let { prefix, lineSeparator, header, footer } = Object.assign({}, defaultFormatting, formatting)
@@ -79,7 +76,7 @@ function fileHeader ({ file = {}, commentStyle, formatting = {} }) {
}
return `${header}${fn(defaultHeader)
.map(line => `${prefix}${line}`)
.map((line) => `${prefix}${line}`)
.join(lineSeparator)}${footer}`
}
packages/ui/internals/transform/web/filterWeb.js
+9 -1
View File
@@ -1,3 +1,11 @@
const acceptedTypes = ['color', 'dimension', 'font', 'custom-radius', 'custom-fontStyle', 'custom-shadow', 'custom-gradient']
const acceptedTypes = [
'color',
'dimension',
'font',
'custom-radius',
'custom-fontStyle',
'custom-shadow',
'custom-gradient',
]
module.exports = (token) => acceptedTypes.includes(token.type)
packages/ui/internals/transform/web/formatCss.js
+24 -21
View File
@@ -2,13 +2,13 @@ const formattedVariables = require('./formattedVariables')
const fileHeader = require('./fileHeader')
const filteredTokens = (dictionary, filterFn) => {
const filtered = dictionary.allTokens.filter(token => filterFn(token))
const filtered = dictionary.allTokens.filter((token) => filterFn(token))
return {
...dictionary,
...{
allProperties: filtered,
allTokens: filtered
}
allTokens: filtered,
},
}
}
@@ -19,27 +19,30 @@ module.exports = ({ dictionary, options, file }) => {
// if you export the prefixes use token.path[0] instead of [1]
light: filteredTokens(dictionary, (token) => token.path[1].toLowerCase() === 'light'),
dark: filteredTokens(dictionary, (token) => token.path[1].toLowerCase() === 'dark'),
rest: filteredTokens(dictionary, (token) => !['light', 'dark'].includes(token.path[1].toLowerCase()))
rest: filteredTokens(
dictionary,
(token) => !['light', 'dark'].includes(token.path[1].toLowerCase())
),
}
return (
fileHeader({ file }) +
':root {\n' +
formattedVariables({ format: 'css', dictionary: groupedTokens.rest, outputReferences }) +
'\n}\n\n' +
'@media (prefers-color-scheme: light) {\n' +
' :root {\n' +
formattedVariables({ format: 'css', dictionary: groupedTokens.light, outputReferences }) +
'\n }\n}\n\n' +
'@media (prefers-color-scheme: dark) {\n' +
' :root {\n' +
formattedVariables({ format: 'css', dictionary: groupedTokens.dark, outputReferences }) +
'\n }\n}\n\n' +
'html[data-theme="light"] {\n' +
formattedVariables({ format: 'css', dictionary: groupedTokens.light, outputReferences }) +
'\n}\n\n' +
'html[data-theme="dark"] {\n' +
formattedVariables({ format: 'css', dictionary: groupedTokens.dark, outputReferences }) +
'\n}\n'
':root {\n' +
formattedVariables({ format: 'css', dictionary: groupedTokens.rest, outputReferences }) +
'\n}\n\n' +
'@media (prefers-color-scheme: light) {\n' +
' :root {\n' +
formattedVariables({ format: 'css', dictionary: groupedTokens.light, outputReferences }) +
'\n }\n}\n\n' +
'@media (prefers-color-scheme: dark) {\n' +
' :root {\n' +
formattedVariables({ format: 'css', dictionary: groupedTokens.dark, outputReferences }) +
'\n }\n}\n\n' +
'html[data-theme="light"] {\n' +
formattedVariables({ format: 'css', dictionary: groupedTokens.light, outputReferences }) +
'\n}\n\n' +
'html[data-theme="dark"] {\n' +
formattedVariables({ format: 'css', dictionary: groupedTokens.dark, outputReferences }) +
'\n}\n'
)
}
packages/ui/internals/transform/web/formattedVariables.js
+5 -3
View File
@@ -15,7 +15,7 @@ const createPropertyFormatter = require('./createPropertyFormatter')
const sortByReference = require('./sortByReference')
const defaultFormatting = {
lineSeparator: '\n'
lineSeparator: '\n',
}
/**
@@ -38,7 +38,7 @@ const defaultFormatting = {
* });
* ```
*/
function formattedVariables ({ format, dictionary, outputReferences = false, formatting = {} }) {
function formattedVariables({ format, dictionary, outputReferences = false, formatting = {} }) {
let { allTokens } = dictionary
const { lineSeparator } = Object.assign({}, defaultFormatting, formatting)
@@ -57,7 +57,9 @@ function formattedVariables ({ format, dictionary, outputReferences = false, for
return allTokens
.map(createPropertyFormatter({ outputReferences, dictionary, format, formatting }))
.filter(function (strVal) { return !!strVal })
.filter(function (strVal) {
return !!strVal
})
.join(lineSeparator)
}
packages/ui/internals/transform/web/sizePx.js
+1 -1
View File
@@ -5,5 +5,5 @@ module.exports = {
},
transformer: function (token) {
return `${token.value}px`
}
},
}
packages/ui/internals/transform/web/sortByReference.js
+18 -18
View File
@@ -24,48 +24,48 @@
* @param {Dictionary} dictionary
* @returns {Function}
*/
function sortByReference(dictionary) {
function sortByReference(dictionary) {
// The sorter function is recursive to account for multiple levels of nesting
function sorter(a, b) {
const aComesFirst = -1;
const bComesFirst = 1;
const aComesFirst = -1
const bComesFirst = 1
// If token a uses a reference and token b doesn't, b might come before a
// read on..
if (a.original && dictionary.usesReference(a.original.value)) {
// Both a and b have references, we need to see if the reference each other
if (b.original && dictionary.usesReference(b.original.value)) {
const aRefs = dictionary.getReferences(a.original.value);
const bRefs = dictionary.getReferences(b.original.value);
const aRefs = dictionary.getReferences(a.original.value)
const bRefs = dictionary.getReferences(b.original.value)
aRefs.forEach(aRef => {
aRefs.forEach((aRef) => {
// a references b, we want b to come first
if (aRef.name === b.name) {
return bComesFirst;
return bComesFirst
}
});
})
bRefs.forEach(bRef => {
bRefs.forEach((bRef) => {
// ditto but opposite
if (bRef.name === a.name) {
return aComesFirst;
return aComesFirst
}
});
})
// both a and b have references and don't reference each other
// we go further down the rabbit hole (reference chain)
return sorter(aRefs[0], bRefs[0]);
// a has a reference and b does not:
return sorter(aRefs[0], bRefs[0])
// a has a reference and b does not:
} else {
return bComesFirst;
return bComesFirst
}
// a does not have a reference it should come first regardless if b has one
// a does not have a reference it should come first regardless if b has one
} else {
return aComesFirst;
return aComesFirst
}
}
return sorter;
return sorter
}
module.exports = sortByReference;
module.exports = sortByReference
packages/ui/internals/transform/web/webFont.js
+4 -3
View File
@@ -1,6 +1,7 @@
const notDefault = (value, defaultValue) => (value !== defaultValue) ? value : ''
const notDefault = (value, defaultValue) => (value !== defaultValue ? value : '')
const fontFamily = ({ fontFamily }, { fontFamilies } = {}) => fontFamilies && fontFamilies[fontFamily] ? fontFamilies[fontFamily] : fontFamily
const fontFamily = ({ fontFamily }, { fontFamilies } = {}) =>
fontFamilies && fontFamilies[fontFamily] ? fontFamilies[fontFamily] : fontFamily
module.exports = {
type: 'value',
@@ -10,5 +11,5 @@ module.exports = {
transformer: function ({ value: font }, { options }) {
// font: font-style font-variant font-weight font-size/line-height font-family;
return `${notDefault(font.fontStretch, 'normal')} ${notDefault(font.fontStyle, 'normal')} ${font.fontWeight} ${font.fontSize}/${font.lineHeight} ${fontFamily(font, options)}`.trim()
}
},
}
packages/ui/internals/transform/web/webGradient.js
+6 -4
View File
@@ -6,14 +6,16 @@ module.exports = {
return token.type === 'custom-gradient'
},
transformer: function ({ value }) {
const stopsString = value.stops.map(stop => {
return `${new TinyColor.TinyColor(stop.color).toRgbString()} ${stop.position * 100}%`
}).join(', ')
const stopsString = value.stops
.map((stop) => {
return `${new TinyColor.TinyColor(stop.color).toRgbString()} ${stop.position * 100}%`
})
.join(', ')
if (value.gradientType === 'linear') {
return `linear-gradient(${value.rotation}deg, ${stopsString})`
}
if (value.gradientType === 'radial') {
return `radial-gradient(${stopsString})`
}
}
},
}
packages/ui/internals/transform/web/webPadding.js
+2 -2
View File
@@ -4,9 +4,9 @@ module.exports = {
return token.type === 'custom-spacing'
},
transformer: ({ value: { top, left, bottom, right } }) => {
if ([bottom, left, right].every(v => v === top)) {
if ([bottom, left, right].every((v) => v === top)) {
return `${top}px`
}
return `${top}px ${right}px ${bottom}px ${left}px`
}
},
}
packages/ui/internals/transform/web/webRadius.js
+2 -2
View File
@@ -4,9 +4,9 @@ module.exports = {
return token.type === 'custom-radius'
},
transformer: function ({ value }) {
if ([value.topRight, value.bottomLeft, value.bottomRight].every(v => v === value.topLeft)) {
if ([value.topRight, value.bottomLeft, value.bottomRight].every((v) => v === value.topLeft)) {
return `${value.topLeft}px`
}
return `${value.topLeft}px ${value.topRight}px ${value.bottomLeft}px ${value.bottomRight}px`
}
},
}
packages/ui/internals/transform/web/webShadows.js
+1 -1
View File
@@ -7,5 +7,5 @@ module.exports = {
},
transformer: function ({ value }) {
return `${value.shadowType === 'innerShadow' ? 'inset ' : ''}${value.offsetX}px ${value.offsetY}px ${value.radius}px ${value.spread}px ${new TinyColor.TinyColor(value.color).toRgbString()}`
}
},
}
packages/ui/src/components/Breadcrumb/Breadcrumb.test.jsx
+4 -4
View File
@@ -1,8 +1,8 @@
import { render, screen } from '@testing-library/react';
import React from 'react';
import { describe, expect, it } from 'vitest';
import { render, screen } from '@testing-library/react'
import React from 'react'
import { describe, expect, it } from 'vitest'
import Breadcrumb from './Breadcrumb';
import Breadcrumb from './Breadcrumb'
describe('#Breadcrumb', () => {
it.skip('should render breadcrumb correctly', async () => {
packages/ui/src/components/ContextMenu/ContextMenu.module.css
+4 -4
View File
@@ -46,12 +46,12 @@
@keyframes transition {
/* 0% { */
/* opacity: 0; */
/* transform: scale(0.95); */
/* opacity: 0; */
/* transform: scale(0.95); */
/* } */
/* 100% { */
/* opacity: 1; */
/* transform: scale(1); */
/* opacity: 1; */
/* transform: scale(1); */
/* } */
}
packages/ui/src/components/InputOld/Input.test.jsx
+3 -4
View File
@@ -1,6 +1,5 @@
import { describe, it } from 'vitest'
describe('#Input', () => {
it.skip('should render input correctly', async () => {
// render(<Input data-testid="form-input" />)
@@ -13,7 +12,7 @@ describe('#Input', () => {
})
// it.each(SIZES)('should have "form-input--%s" class', (size) => {
// render(<Input size={size} data-testid="form-input" />)
// expect(screen.queryByTestId('form-input')).toHaveClass(`form-input border-solid form-input--${size}`)
// render(<Input size={size} data-testid="form-input" />)
// expect(screen.queryByTestId('form-input')).toHaveClass(`form-input border-solid form-input--${size}`)
// })
})
})
packages/ui/src/components/RadioOld/Radio.test.jsx
+9 -11
View File
@@ -1,19 +1,17 @@
import { describe, it } from 'vitest'
describe('#Radio', () => {
it('should render radio correctly', () => {
// render(
// // <Radio data-testid="form-radio" />
// )
// expect(screen.queryByTestId('form-radio')).toBeInTheDocument()
// render(
// // <Radio data-testid="form-radio" />
// )
// expect(screen.queryByTestId('form-radio')).toBeInTheDocument()
})
it('should show label', () => {
// render(
// <Radio data-testid="form-radio" label="JavaScript" />
// )
// expect(screen.queryByText('JavaScript')).toBeInTheDocument()
// render(
// <Radio data-testid="form-radio" label="JavaScript" />
// )
// expect(screen.queryByText('JavaScript')).toBeInTheDocument()
})
})
})
packages/ui/src/components/Typography/index.tsx
-3
View File
@@ -1,6 +1,3 @@
import Typography from './Typography'
export default Typography
export { default as Typography } from './Typography'
packages/ui/src/components/Upload/Upload.module.css
+1 -1
View File
@@ -4,4 +4,4 @@
.sbui-upload-dragger--dragged {
@apply bg-brand-100;
}
}
packages/ui/src/components/shadcn/ui/aspect-ratio.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
"use client"
'use client'
import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'
const AspectRatio = AspectRatioPrimitive.Root
packages/ui/src/lib/Spinner/styles.module.css
+43 -42
View File
@@ -1,51 +1,52 @@
html {
background: #009688;
background: #009688;
}
html, body {
height: 100%;
html,
body {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
body {
display: flex;
align-items: center;
justify-content: center;
}
.spin-loader {
border-radius: 80%;
display: block;
height: 50px;
width: 50px;
position: relative;
animation: spin 0.675s linear 0s infinite normal;
background: #26a69a;
.spin-loader {
border-radius: 80%;
display: block;
height: 50px;
width: 50px;
position: relative;
animation: spin 0.675s linear 0s infinite normal;
background: #26a69a;
}
.spin-loader:before, .spin-loader:after {
content: "";
display: block;
position: absolute;
.spin-loader:before,
.spin-loader:after {
content: '';
display: block;
position: absolute;
}
.spin-loader:before {
border-radius: 0 90px 90px 0;
height: 50px;
width: 50%;
top: 0;
right: 0;
z-index: 1;
background: #005041;
background-image: linear-gradient(#26a69a, #005041);
.spin-loader:before {
border-radius: 0 90px 90px 0;
height: 50px;
width: 50%;
top: 0;
right: 0;
z-index: 1;
background: #005041;
background-image: linear-gradient(#26a69a, #005041);
}
.spin-loader:after {
border-radius: 80%;
height: 40px;
width: 40px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
background: #009688;
.spin-loader:after {
border-radius: 80%;
height: 40px;
width: 40px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
background: #009688;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
packages/ui/src/lib/tailwind-demo-classes.ts
+162 -168
View File
@@ -1,173 +1,167 @@
export default {
"background": [
"bg-200",
"bg",
"bg-alternative-200",
"bg-alternative",
"bg-selection",
"bg-control",
"bg-surface-75",
"bg-surface-100",
"bg-surface-200",
"bg-surface-300",
"bg-surface-400",
"bg-overlay",
"bg-overlay-hover",
"bg-muted",
"bg-button",
"bg-dialog",
"bg-dash-sidebar",
"bg-dash-canvas"
background: [
'bg-200',
'bg',
'bg-alternative-200',
'bg-alternative',
'bg-selection',
'bg-control',
'bg-surface-75',
'bg-surface-100',
'bg-surface-200',
'bg-surface-300',
'bg-surface-400',
'bg-overlay',
'bg-overlay-hover',
'bg-muted',
'bg-button',
'bg-dialog',
'bg-dash-sidebar',
'bg-dash-canvas',
],
"border": [
"border",
"border-muted",
"border-secondary",
"border-overlay",
"border-control",
"border-alternative",
"border-strong",
"border-stronger",
"border-button",
"border-button-hover"
border: [
'border',
'border-muted',
'border-secondary',
'border-overlay',
'border-control',
'border-alternative',
'border-strong',
'border-stronger',
'border-button',
'border-button-hover',
],
"text": [
"text",
"text-light",
"text-lighter",
"text-muted",
"text-contrast"
text: ['text', 'text-light', 'text-lighter', 'text-muted', 'text-contrast'],
colors: [
'bg-destructive-200',
'bg-destructive-300',
'bg-destructive-400',
'bg-destructive-500',
'bg-destructive-600',
'bg-destructive',
'bg-warning-200',
'bg-warning-300',
'bg-warning-400',
'bg-warning-500',
'bg-warning-600',
'bg-warning',
'bg-brand-200',
'bg-brand-300',
'bg-brand-400',
'bg-brand-500',
'bg-brand-600',
'bg-brand',
'bg-brand-button',
'bg-brand-link',
'bg-_secondary-200',
'bg-_secondary-400',
'bg-_secondary',
'bg-code_block-1',
'bg-code_block-2',
'bg-code_block-3',
'bg-code_block-4',
'bg-code_block-5',
],
"colors": [
"bg-destructive-200",
"bg-destructive-300",
"bg-destructive-400",
"bg-destructive-500",
"bg-destructive-600",
"bg-destructive",
"bg-warning-200",
"bg-warning-300",
"bg-warning-400",
"bg-warning-500",
"bg-warning-600",
"bg-warning",
"bg-brand-200",
"bg-brand-300",
"bg-brand-400",
"bg-brand-500",
"bg-brand-600",
"bg-brand",
"bg-brand-button",
"bg-brand-link",
"bg-_secondary-200",
"bg-_secondary-400",
"bg-_secondary",
"bg-code_block-1",
"bg-code_block-2",
"bg-code_block-3",
"bg-code_block-4",
"bg-code_block-5"
palletes: [
'bg-black',
'bg-white',
'bg-gray-dark-100',
'bg-gray-dark-200',
'bg-gray-dark-300',
'bg-gray-dark-400',
'bg-gray-dark-500',
'bg-gray-dark-600',
'bg-gray-dark-700',
'bg-gray-dark-800',
'bg-gray-dark-900',
'bg-gray-dark-1000',
'bg-gray-dark-1100',
'bg-gray-dark-1200',
'bg-gray-dark-alpha-100',
'bg-gray-dark-alpha-200',
'bg-gray-dark-alpha-300',
'bg-gray-dark-alpha-400',
'bg-gray-dark-alpha-500',
'bg-gray-dark-alpha-600',
'bg-gray-dark-alpha-700',
'bg-gray-dark-alpha-800',
'bg-gray-dark-alpha-900',
'bg-gray-dark-alpha-1000',
'bg-gray-dark-alpha-1100',
'bg-gray-dark-alpha-1200',
'bg-gray-light-100',
'bg-gray-light-200',
'bg-gray-light-300',
'bg-gray-light-400',
'bg-gray-light-500',
'bg-gray-light-600',
'bg-gray-light-700',
'bg-gray-light-800',
'bg-gray-light-900',
'bg-gray-light-1000',
'bg-gray-light-1100',
'bg-gray-light-1200',
'bg-gray-light-alpha-100',
'bg-gray-light-alpha-200',
'bg-gray-light-alpha-300',
'bg-gray-light-alpha-400',
'bg-gray-light-alpha-500',
'bg-gray-light-alpha-600',
'bg-gray-light-alpha-700',
'bg-gray-light-alpha-800',
'bg-gray-light-alpha-900',
'bg-gray-light-alpha-1000',
'bg-gray-light-alpha-1100',
'bg-gray-light-alpha-1200',
'bg-slate-dark-100',
'bg-slate-dark-200',
'bg-slate-dark-300',
'bg-slate-dark-400',
'bg-slate-dark-500',
'bg-slate-dark-600',
'bg-slate-dark-700',
'bg-slate-dark-800',
'bg-slate-dark-900',
'bg-slate-dark-1000',
'bg-slate-dark-1100',
'bg-slate-dark-1200',
'bg-slate-dark-alpha-100',
'bg-slate-dark-alpha-200',
'bg-slate-dark-alpha-300',
'bg-slate-dark-alpha-400',
'bg-slate-dark-alpha-500',
'bg-slate-dark-alpha-600',
'bg-slate-dark-alpha-700',
'bg-slate-dark-alpha-800',
'bg-slate-dark-alpha-900',
'bg-slate-dark-alpha-1000',
'bg-slate-dark-alpha-1100',
'bg-slate-dark-alpha-1200',
'bg-slate-light-100',
'bg-slate-light-200',
'bg-slate-light-300',
'bg-slate-light-400',
'bg-slate-light-500',
'bg-slate-light-600',
'bg-slate-light-700',
'bg-slate-light-800',
'bg-slate-light-900',
'bg-slate-light-1000',
'bg-slate-light-1100',
'bg-slate-light-1200',
'bg-slate-light-alpha-100',
'bg-slate-light-alpha-200',
'bg-slate-light-alpha-300',
'bg-slate-light-alpha-400',
'bg-slate-light-alpha-500',
'bg-slate-light-alpha-600',
'bg-slate-light-alpha-700',
'bg-slate-light-alpha-800',
'bg-slate-light-alpha-900',
'bg-slate-light-alpha-1000',
'bg-slate-light-alpha-1100',
'bg-slate-light-alpha-1200',
'variables-bg-brand-primary',
'variables-bg-brand-accent',
],
"palletes": [
"bg-black",
"bg-white",
"bg-gray-dark-100",
"bg-gray-dark-200",
"bg-gray-dark-300",
"bg-gray-dark-400",
"bg-gray-dark-500",
"bg-gray-dark-600",
"bg-gray-dark-700",
"bg-gray-dark-800",
"bg-gray-dark-900",
"bg-gray-dark-1000",
"bg-gray-dark-1100",
"bg-gray-dark-1200",
"bg-gray-dark-alpha-100",
"bg-gray-dark-alpha-200",
"bg-gray-dark-alpha-300",
"bg-gray-dark-alpha-400",
"bg-gray-dark-alpha-500",
"bg-gray-dark-alpha-600",
"bg-gray-dark-alpha-700",
"bg-gray-dark-alpha-800",
"bg-gray-dark-alpha-900",
"bg-gray-dark-alpha-1000",
"bg-gray-dark-alpha-1100",
"bg-gray-dark-alpha-1200",
"bg-gray-light-100",
"bg-gray-light-200",
"bg-gray-light-300",
"bg-gray-light-400",
"bg-gray-light-500",
"bg-gray-light-600",
"bg-gray-light-700",
"bg-gray-light-800",
"bg-gray-light-900",
"bg-gray-light-1000",
"bg-gray-light-1100",
"bg-gray-light-1200",
"bg-gray-light-alpha-100",
"bg-gray-light-alpha-200",
"bg-gray-light-alpha-300",
"bg-gray-light-alpha-400",
"bg-gray-light-alpha-500",
"bg-gray-light-alpha-600",
"bg-gray-light-alpha-700",
"bg-gray-light-alpha-800",
"bg-gray-light-alpha-900",
"bg-gray-light-alpha-1000",
"bg-gray-light-alpha-1100",
"bg-gray-light-alpha-1200",
"bg-slate-dark-100",
"bg-slate-dark-200",
"bg-slate-dark-300",
"bg-slate-dark-400",
"bg-slate-dark-500",
"bg-slate-dark-600",
"bg-slate-dark-700",
"bg-slate-dark-800",
"bg-slate-dark-900",
"bg-slate-dark-1000",
"bg-slate-dark-1100",
"bg-slate-dark-1200",
"bg-slate-dark-alpha-100",
"bg-slate-dark-alpha-200",
"bg-slate-dark-alpha-300",
"bg-slate-dark-alpha-400",
"bg-slate-dark-alpha-500",
"bg-slate-dark-alpha-600",
"bg-slate-dark-alpha-700",
"bg-slate-dark-alpha-800",
"bg-slate-dark-alpha-900",
"bg-slate-dark-alpha-1000",
"bg-slate-dark-alpha-1100",
"bg-slate-dark-alpha-1200",
"bg-slate-light-100",
"bg-slate-light-200",
"bg-slate-light-300",
"bg-slate-light-400",
"bg-slate-light-500",
"bg-slate-light-600",
"bg-slate-light-700",
"bg-slate-light-800",
"bg-slate-light-900",
"bg-slate-light-1000",
"bg-slate-light-1100",
"bg-slate-light-1200",
"bg-slate-light-alpha-100",
"bg-slate-light-alpha-200",
"bg-slate-light-alpha-300",
"bg-slate-light-alpha-400",
"bg-slate-light-alpha-500",
"bg-slate-light-alpha-600",
"bg-slate-light-alpha-700",
"bg-slate-light-alpha-800",
"bg-slate-light-alpha-900",
"bg-slate-light-alpha-1000",
"bg-slate-light-alpha-1100",
"bg-slate-light-alpha-1200",
"variables-bg-brand-primary",
"variables-bg-brand-accent"
]
};
}
packages/ui/tailwind-theming.md
+3 -3
View File
@@ -62,9 +62,9 @@ bg-foreground-light
| ------------------------------- | ------------------------------------------------------------ |
| `{background}-{DEFAULT}` | Main body background (**DEFAULT** is optional) |
| `{background}-surface-100` | Panels and surfaces on the same level of the main background |
| `{background}-surface-200` | Surfaces that overlap the main content (ex. dropdowns) |
| `{background}-surface-200` | Surfaces that overlap the main content (ex. dropdowns) |
| `{background}-surface-300` | Surfaces that are stacked above {background}-surface-200 |
| `{background}-alternative` | Alternative background (inverted) |
| `{background}-alternative` | Alternative background (inverted) |
| `{background}-overlay` | Overlays, Dropdowns, Popovers |
| `{background}-control` | Inputs, Radios, Checkboxes |
| `{background}-button-{DEFAULT}` | Button default |
@@ -88,7 +88,7 @@ text-background-surface-100
| ------------------------- | ---------------------------------------- |
| `border-{DEFAULT}` | Default border (**DEFAULT** is optional) |
| `border-secondary` | Secondary border |
| `border-alternative` | Alternative border (inverted) |
| `border-alternative` | Alternative border (inverted) |
| `border-overlay` | Overlays, Dropdowns, Popovers |
| `border-control` | Inputs, Radios, Checkboxes |
| `border-strong` | Hover, Focus |