From a4acebe1bc5e324893b7fc4bbe1316227cd9777e Mon Sep 17 00:00:00 2001 From: Ivan Vasilov Date: Fri, 3 Jan 2025 16:23:32 +0100 Subject: [PATCH] chore: Expand prettier commands to also run on packages (#32550) * Run prettier on packages too. * Add the generated files for icons to prettierignore. * Format all files in the packages folder. * Minor fix. --- .prettierignore | 4 +- package.json | 4 +- packages/ai-commands/test/sql-util.ts | 5 +- packages/ai-commands/tsconfig.json | 16 +- packages/common/database-types.ts | 143 +- packages/generator/tsdoc.ts | 19 +- packages/icons/src/createSupabaseIcon.ts | 36 +- packages/icons/src/defaultAttributes.ts | 2 +- .../src/raw-icons/_example-template.json | 20 +- packages/shared-data/config.ts | 9 +- packages/shared-data/regions.ts | 2 +- packages/tsconfig/package.json | 6 +- packages/ui-patterns/vitest.setup.ts | 1 - packages/ui/build/css/tw-extend/color.js | 1288 ++++++++--------- packages/ui/components.json | 2 +- .../transform/common/camelCaseHelper.js | 3 +- .../internals/transform/common/colorToHex8.js | 2 +- .../transform/common/colorToRgbaString.js | 2 +- .../transform/common/copyFileOrFolder.js | 2 +- .../transform/web/createPropertyFormatter.js | 84 +- .../ui/internals/transform/web/fileHeader.js | 11 +- .../ui/internals/transform/web/filterWeb.js | 10 +- .../ui/internals/transform/web/formatCss.js | 45 +- .../transform/web/formattedVariables.js | 8 +- packages/ui/internals/transform/web/sizePx.js | 2 +- .../transform/web/sortByReference.js | 36 +- .../ui/internals/transform/web/webFont.js | 7 +- .../ui/internals/transform/web/webGradient.js | 10 +- .../ui/internals/transform/web/webPadding.js | 4 +- .../ui/internals/transform/web/webRadius.js | 4 +- .../ui/internals/transform/web/webShadows.js | 2 +- .../components/Breadcrumb/Breadcrumb.test.jsx | 8 +- .../ContextMenu/ContextMenu.module.css | 8 +- .../ui/src/components/InputOld/Input.test.jsx | 7 +- .../ui/src/components/RadioOld/Radio.test.jsx | 20 +- .../ui/src/components/Typography/index.tsx | 3 - .../src/components/Upload/Upload.module.css | 2 +- .../src/components/shadcn/ui/aspect-ratio.tsx | 4 +- packages/ui/src/lib/Spinner/styles.module.css | 85 +- packages/ui/src/lib/tailwind-demo-classes.ts | 330 +++-- packages/ui/tailwind-theming.md | 6 +- 41 files changed, 1109 insertions(+), 1153 deletions(-) diff --git a/.prettierignore b/.prettierignore index 37dd5d06e3c..f399c6bc555 100644 --- a/.prettierignore +++ b/.prettierignore @@ -16,4 +16,6 @@ apps/docs/pages/guides/integrations/*.mdx apps/studio/public apps/**/.turbo apps/docs/CONTRIBUTING.md -apps/design-system/__registry__ \ No newline at end of file +apps/design-system/__registry__ +packages/icons/__registry__ +packages/icons/src/icons/*.ts \ No newline at end of file diff --git a/package.json b/package.json index 3c9999a71b0..f92f9268c5d 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/packages/ai-commands/test/sql-util.ts b/packages/ai-commands/test/sql-util.ts index 79fae6a4795..d9c5eea6c66 100644 --- a/packages/ai-commands/test/sql-util.ts +++ b/packages/ai-commands/test/sql-util.ts @@ -17,9 +17,8 @@ type ExtractKeys = T extends T ? keyof T : never /** * Unwraps a Node to get its underlying value. */ -type NodeValue> = T extends Record - ? V - : never +type NodeValue> = + T extends Record ? V : never export class AssertionError extends Error { constructor(message: string) { diff --git a/packages/ai-commands/tsconfig.json b/packages/ai-commands/tsconfig.json index e8b5504d293..f612f0c8a27 100644 --- a/packages/ai-commands/tsconfig.json +++ b/packages/ai-commands/tsconfig.json @@ -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"] } -} \ No newline at end of file +} diff --git a/packages/common/database-types.ts b/packages/common/database-types.ts index 79ee7683f14..4acdbef0dc2 100644 --- a/packages/common/database-types.ts +++ b/packages/common/database-types.ts @@ -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] +type PublicSchema = Database[Extract] 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 - diff --git a/packages/generator/tsdoc.ts b/packages/generator/tsdoc.ts index e01d11b8d33..a362c345ef1 100644 --- a/packages/generator/tsdoc.ts +++ b/packages/generator/tsdoc.ts @@ -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) => { diff --git a/packages/icons/src/createSupabaseIcon.ts b/packages/icons/src/createSupabaseIcon.ts index 172a509f94e..5671d38e552 100644 --- a/packages/icons/src/createSupabaseIcon.ts +++ b/packages/icons/src/createSupabaseIcon.ts @@ -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][]; +export type IconNode = [elementName: keyof ReactSVG, attrs: Record][] -export type SVGAttributes = Partial>; -type ComponentAttributes = RefAttributes & SVGAttributes; +export type SVGAttributes = Partial> +type ComponentAttributes = RefAttributes & SVGAttributes export interface LucideProps extends ComponentAttributes { - size?: string | number; - absoluteStrokeWidth?: boolean; + size?: string | number + absoluteStrokeWidth?: boolean } -export type LucideIcon = ForwardRefExoticComponent; +export type LucideIcon = ForwardRefExoticComponent /** * 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( @@ -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 diff --git a/packages/icons/src/defaultAttributes.ts b/packages/icons/src/defaultAttributes.ts index ce97fb05877..e1644175a13 100644 --- a/packages/icons/src/defaultAttributes.ts +++ b/packages/icons/src/defaultAttributes.ts @@ -8,4 +8,4 @@ export default { strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round', -}; +} diff --git a/packages/icons/src/raw-icons/_example-template.json b/packages/icons/src/raw-icons/_example-template.json index 90144eed90b..30e98ddf155 100644 --- a/packages/icons/src/raw-icons/_example-template.json +++ b/packages/icons/src/raw-icons/_example-template.json @@ -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"] } diff --git a/packages/shared-data/config.ts b/packages/shared-data/config.ts index 03bac52848b..01f390522ce 100644 --- a/packages/shared-data/config.ts +++ b/packages/shared-data/config.ts @@ -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 diff --git a/packages/shared-data/regions.ts b/packages/shared-data/regions.ts index 850e7880f99..06f6b0fe27a 100644 --- a/packages/shared-data/regions.ts +++ b/packages/shared-data/regions.ts @@ -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)' }, diff --git a/packages/tsconfig/package.json b/packages/tsconfig/package.json index d49a4c6ee80..bbb02c7fce4 100644 --- a/packages/tsconfig/package.json +++ b/packages/tsconfig/package.json @@ -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"] } diff --git a/packages/ui-patterns/vitest.setup.ts b/packages/ui-patterns/vitest.setup.ts index 685e5448170..aa5d0c82e44 100644 --- a/packages/ui-patterns/vitest.setup.ts +++ b/packages/ui-patterns/vitest.setup.ts @@ -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) => ({ diff --git a/packages/ui/build/css/tw-extend/color.js b/packages/ui/build/css/tw-extend/color.js index 3809cd6673e..1e2e93751dd 100644 --- a/packages/ui/build/css/tw-extend/color.js +++ b/packages/ui/build/css/tw-extend/color.js @@ -1,646 +1,646 @@ module.exports = { -"colors-black": { - cssVariable: "var(--core-colors-black)", - value: "hsl(0, 0%, 0%)" -}, -"colors-white": { - cssVariable: "var(--core-colors-white)", - value: "hsl(0, 0%, 100%)" -}, -"colors-gray-dark-100": { - cssVariable: "var(--core-colors-gray-dark-100)", - value: "hsl(0, 0%, 8.6%)" -}, -"colors-gray-dark-200": { - cssVariable: "var(--core-colors-gray-dark-200)", - value: "hsl(0, 0%, 11%)" -}, -"colors-gray-dark-300": { - cssVariable: "var(--core-colors-gray-dark-300)", - value: "hsl(0, 0%, 13.7%)" -}, -"colors-gray-dark-400": { - cssVariable: "var(--core-colors-gray-dark-400)", - value: "hsl(0, 0%, 15.7%)" -}, -"colors-gray-dark-500": { - cssVariable: "var(--core-colors-gray-dark-500)", - value: "hsl(0, 0%, 18%)" -}, -"colors-gray-dark-600": { - cssVariable: "var(--core-colors-gray-dark-600)", - value: "hsl(0, 0%, 20.4%)" -}, -"colors-gray-dark-700": { - cssVariable: "var(--core-colors-gray-dark-700)", - value: "hsl(0, 0%, 24.3%)" -}, -"colors-gray-dark-800": { - cssVariable: "var(--core-colors-gray-dark-800)", - value: "hsl(0, 0%, 31.4%)" -}, -"colors-gray-dark-900": { - cssVariable: "var(--core-colors-gray-dark-900)", - value: "hsl(0, 0%, 43.9%)" -}, -"colors-gray-dark-1000": { - cssVariable: "var(--core-colors-gray-dark-1000)", - value: "hsl(0, 0%, 49.4%)" -}, -"colors-gray-dark-1100": { - cssVariable: "var(--core-colors-gray-dark-1100)", - value: "hsl(0, 0%, 62.7%)" -}, -"colors-gray-dark-1200": { - cssVariable: "var(--core-colors-gray-dark-1200)", - value: "hsl(0, 0%, 92.9%)" -}, -"colors-gray-dark-alpha-100": { - cssVariable: "var(--core-colors-gray-dark-alpha-100)", - value: "hsla(0, 0%, 0%, 0)" -}, -"colors-gray-dark-alpha-200": { - cssVariable: "var(--core-colors-gray-dark-alpha-200)", - value: "hsla(0, 0%, 100%, 0.03137254901960784)" -}, -"colors-gray-dark-alpha-300": { - cssVariable: "var(--core-colors-gray-dark-alpha-300)", - value: "hsla(0, 0%, 100%, 0.058823529411764705)" -}, -"colors-gray-dark-alpha-400": { - cssVariable: "var(--core-colors-gray-dark-alpha-400)", - value: "hsla(0, 0%, 100%, 0.0784313725490196)" -}, -"colors-gray-dark-alpha-500": { - cssVariable: "var(--core-colors-gray-dark-alpha-500)", - value: "hsla(0, 0%, 100%, 0.10196078431372549)" -}, -"colors-gray-dark-alpha-600": { - cssVariable: "var(--core-colors-gray-dark-alpha-600)", - value: "hsla(0, 0%, 100%, 0.12941176470588237)" -}, -"colors-gray-dark-alpha-700": { - cssVariable: "var(--core-colors-gray-dark-alpha-700)", - value: "hsla(0, 0%, 100%, 0.16862745098039217)" -}, -"colors-gray-dark-alpha-800": { - cssVariable: "var(--core-colors-gray-dark-alpha-800)", - value: "hsla(0, 0%, 100%, 0.25098039215686274)" -}, -"colors-gray-dark-alpha-900": { - cssVariable: "var(--core-colors-gray-dark-alpha-900)", - value: "hsla(0, 0%, 100%, 0.38823529411764707)" -}, -"colors-gray-dark-alpha-1000": { - cssVariable: "var(--core-colors-gray-dark-alpha-1000)", - value: "hsla(0, 0%, 100%, 0.45098039215686275)" -}, -"colors-gray-dark-alpha-1100": { - cssVariable: "var(--core-colors-gray-dark-alpha-1100)", - value: "hsla(0, 0%, 100%, 0.5882352941176471)" -}, -"colors-gray-dark-alpha-1200": { - cssVariable: "var(--core-colors-gray-dark-alpha-1200)", - value: "hsla(0, 0%, 100%, 0.9215686274509803)" -}, -"colors-gray-light-100": { - cssVariable: "var(--core-colors-gray-light-100)", - value: "hsl(0, 0%, 98.8%)" -}, -"colors-gray-light-200": { - cssVariable: "var(--core-colors-gray-light-200)", - value: "hsl(0, 0%, 97.3%)" -}, -"colors-gray-light-300": { - cssVariable: "var(--core-colors-gray-light-300)", - value: "hsl(0, 0%, 95.3%)" -}, -"colors-gray-light-400": { - cssVariable: "var(--core-colors-gray-light-400)", - value: "hsl(0, 0%, 92.9%)" -}, -"colors-gray-light-500": { - cssVariable: "var(--core-colors-gray-light-500)", - value: "hsl(0, 0%, 91%)" -}, -"colors-gray-light-600": { - cssVariable: "var(--core-colors-gray-light-600)", - value: "hsl(0, 0%, 88.6%)" -}, -"colors-gray-light-700": { - cssVariable: "var(--core-colors-gray-light-700)", - value: "hsl(0, 0%, 85.9%)" -}, -"colors-gray-light-800": { - cssVariable: "var(--core-colors-gray-light-800)", - value: "hsl(0, 0%, 78%)" -}, -"colors-gray-light-900": { - cssVariable: "var(--core-colors-gray-light-900)", - value: "hsl(0, 0%, 56.1%)" -}, -"colors-gray-light-1000": { - cssVariable: "var(--core-colors-gray-light-1000)", - value: "hsl(0, 0%, 52.2%)" -}, -"colors-gray-light-1100": { - cssVariable: "var(--core-colors-gray-light-1100)", - value: "hsl(0, 0%, 43.5%)" -}, -"colors-gray-light-1200": { - cssVariable: "var(--core-colors-gray-light-1200)", - value: "hsl(0, 0%, 9%)" -}, -"colors-gray-light-alpha-100": { - cssVariable: "var(--core-colors-gray-light-alpha-100)", - value: "hsla(0, 0%, 0%, 0.011764705882352941)" -}, -"colors-gray-light-alpha-200": { - cssVariable: "var(--core-colors-gray-light-alpha-200)", - value: "hsla(0, 0%, 0%, 0.03137254901960784)" -}, -"colors-gray-light-alpha-300": { - cssVariable: "var(--core-colors-gray-light-alpha-300)", - value: "hsla(0, 0%, 0%, 0.050980392156862744)" -}, -"colors-gray-light-alpha-400": { - cssVariable: "var(--core-colors-gray-light-alpha-400)", - value: "hsla(0, 0%, 0%, 0.07058823529411765)" -}, -"colors-gray-light-alpha-500": { - cssVariable: "var(--core-colors-gray-light-alpha-500)", - value: "hsla(0, 0%, 0%, 0.09019607843137255)" -}, -"colors-gray-light-alpha-600": { - cssVariable: "var(--core-colors-gray-light-alpha-600)", - value: "hsla(0, 0%, 0%, 0.10980392156862745)" -}, -"colors-gray-light-alpha-700": { - cssVariable: "var(--core-colors-gray-light-alpha-700)", - value: "hsla(0, 0%, 0%, 0.1411764705882353)" -}, -"colors-gray-light-alpha-800": { - cssVariable: "var(--core-colors-gray-light-alpha-800)", - value: "hsla(0, 0%, 0%, 0.2196078431372549)" -}, -"colors-gray-light-alpha-900": { - cssVariable: "var(--core-colors-gray-light-alpha-900)", - value: "hsla(0, 0%, 0%, 0.4392156862745098)" -}, -"colors-gray-light-alpha-1000": { - cssVariable: "var(--core-colors-gray-light-alpha-1000)", - value: "hsla(0, 0%, 0%, 0.47843137254901963)" -}, -"colors-gray-light-alpha-1100": { - cssVariable: "var(--core-colors-gray-light-alpha-1100)", - value: "hsla(0, 0%, 0%, 0.5607843137254902)" -}, -"colors-gray-light-alpha-1200": { - cssVariable: "var(--core-colors-gray-light-alpha-1200)", - value: "hsla(0, 0%, 0%, 0.9098039215686274)" -}, -"colors-slate-dark-100": { - cssVariable: "var(--core-colors-slate-dark-100)", - value: "hsl(200, 6.7%, 8.8%)" -}, -"colors-slate-dark-200": { - cssVariable: "var(--core-colors-slate-dark-200)", - value: "hsl(195, 7.1%, 11%)" -}, -"colors-slate-dark-300": { - cssVariable: "var(--core-colors-slate-dark-300)", - value: "hsl(192, 7.2%, 13.5%)" -}, -"colors-slate-dark-400": { - cssVariable: "var(--core-colors-slate-dark-400)", - value: "hsl(204, 6.2%, 15.9%)" -}, -"colors-slate-dark-500": { - cssVariable: "var(--core-colors-slate-dark-500)", - value: "hsl(200, 6.5%, 18%)" -}, -"colors-slate-dark-600": { - cssVariable: "var(--core-colors-slate-dark-600)", - value: "hsl(205.70000000000005, 6.7%, 20.6%)" -}, -"colors-slate-dark-700": { - cssVariable: "var(--core-colors-slate-dark-700)", - value: "hsl(202.5, 6.5%, 24.3%)" -}, -"colors-slate-dark-800": { - cssVariable: "var(--core-colors-slate-dark-800)", - value: "hsl(206.70000000000005, 5.6%, 31.6%)" -}, -"colors-slate-dark-900": { - cssVariable: "var(--core-colors-slate-dark-900)", - value: "hsl(205.70000000000005, 6.3%, 43.9%)" -}, -"colors-slate-dark-1000": { - cssVariable: "var(--core-colors-slate-dark-1000)", - value: "hsl(207.70000000000005, 5.1%, 49.6%)" -}, -"colors-slate-dark-1100": { - cssVariable: "var(--core-colors-slate-dark-1100)", - value: "hsl(207.29999999999995, 5.8%, 62.9%)" -}, -"colors-slate-dark-1200": { - cssVariable: "var(--core-colors-slate-dark-1200)", - value: "hsl(210, 5.6%, 92.9%)" -}, -"colors-slate-dark-alpha-100": { - cssVariable: "var(--core-colors-slate-dark-alpha-100)", - value: "hsla(0, 0%, 0%, 0)" -}, -"colors-slate-dark-alpha-200": { - cssVariable: "var(--core-colors-slate-dark-alpha-200)", - value: "hsla(181.39999999999998, 100%, 91.8%, 0.03137254901960784)" -}, -"colors-slate-dark-alpha-300": { - cssVariable: "var(--core-colors-slate-dark-alpha-300)", - value: "hsla(181.60000000000002, 86.4%, 91.4%, 0.058823529411764705)" -}, -"colors-slate-dark-alpha-400": { - cssVariable: "var(--core-colors-slate-dark-alpha-400)", - value: "hsla(208.89999999999998, 87.1%, 93.9%, 0.0784313725490196)" -}, -"colors-slate-dark-alpha-500": { - cssVariable: "var(--core-colors-slate-dark-alpha-500)", - value: "hsla(200, 88.2%, 93.3%, 0.10980392156862745)" -}, -"colors-slate-dark-alpha-600": { - cssVariable: "var(--core-colors-slate-dark-alpha-600)", - value: "hsla(209, 93.9%, 93.5%, 0.1411764705882353)" -}, -"colors-slate-dark-alpha-700": { - cssVariable: "var(--core-colors-slate-dark-alpha-700)", - value: "hsla(203.20000000000005, 100%, 93.9%, 0.1803921568627451)" -}, -"colors-slate-dark-alpha-800": { - cssVariable: "var(--core-colors-slate-dark-alpha-800)", - value: "hsla(208.79999999999995, 92.6%, 94.7%, 0.25882352941176473)" -}, -"colors-slate-dark-alpha-900": { - cssVariable: "var(--core-colors-slate-dark-alpha-900)", - value: "hsla(208, 100%, 94.1%, 0.4117647058823529)" -}, -"colors-slate-dark-alpha-1000": { - cssVariable: "var(--core-colors-slate-dark-alpha-1000)", - value: "hsla(210, 100%, 95.3%, 0.47058823529411764)" -}, -"colors-slate-dark-alpha-1100": { - cssVariable: "var(--core-colors-slate-dark-alpha-1100)", - value: "hsla(210, 100%, 96.9%, 0.6196078431372549)" -}, -"colors-slate-dark-alpha-1200": { - cssVariable: "var(--core-colors-slate-dark-alpha-1200)", - value: "hsla(210, 100%, 99.6%, 0.9294117647058824)" -}, -"colors-slate-light-100": { - cssVariable: "var(--core-colors-slate-light-100)", - value: "hsl(210, 33.3%, 98.8%)" -}, -"colors-slate-light-200": { - cssVariable: "var(--core-colors-slate-light-200)", - value: "hsl(210, 16.7%, 97.6%)" -}, -"colors-slate-light-300": { - cssVariable: "var(--core-colors-slate-light-300)", - value: "hsl(210, 16.7%, 95.3%)" -}, -"colors-slate-light-400": { - cssVariable: "var(--core-colors-slate-light-400)", - value: "hsl(210, 11.8%, 93.3%)" -}, -"colors-slate-light-500": { - cssVariable: "var(--core-colors-slate-light-500)", - value: "hsl(216, 11.1%, 91.2%)" -}, -"colors-slate-light-600": { - cssVariable: "var(--core-colors-slate-light-600)", - value: "hsl(205.70000000000005, 12.3%, 88.8%)" -}, -"colors-slate-light-700": { - cssVariable: "var(--core-colors-slate-light-700)", - value: "hsl(210, 11.1%, 85.9%)" -}, -"colors-slate-light-800": { - cssVariable: "var(--core-colors-slate-light-800)", - value: "hsl(205, 10.7%, 78%)" -}, -"colors-slate-light-900": { - cssVariable: "var(--core-colors-slate-light-900)", - value: "hsl(205.70000000000005, 6.3%, 56.1%)" -}, -"colors-slate-light-1000": { - cssVariable: "var(--core-colors-slate-light-1000)", - value: "hsl(205.70000000000005, 5.7%, 52.2%)" -}, -"colors-slate-light-1100": { - cssVariable: "var(--core-colors-slate-light-1100)", - value: "hsl(205.70000000000005, 6.3%, 43.5%)" -}, -"colors-slate-light-1200": { - cssVariable: "var(--core-colors-slate-light-1200)", - value: "hsl(201.79999999999995, 24.4%, 8.8%)" -}, -"colors-slate-light-alpha-100": { - cssVariable: "var(--core-colors-slate-light-alpha-100)", - value: "hsla(209.79999999999995, 92.6%, 26.5%, 0.0196078431372549)" -}, -"colors-slate-light-alpha-200": { - cssVariable: "var(--core-colors-slate-light-alpha-200)", - value: "hsla(210, 87.8%, 16.1%, 0.03137254901960784)" -}, -"colors-slate-light-alpha-300": { - cssVariable: "var(--core-colors-slate-light-alpha-300)", - value: "hsla(209.60000000000002, 100%, 14.3%, 0.050980392156862744)" -}, -"colors-slate-light-alpha-400": { - cssVariable: "var(--core-colors-slate-light-alpha-400)", - value: "hsla(210.60000000000002, 93%, 11.2%, 0.0784313725490196)" -}, -"colors-slate-light-alpha-500": { - cssVariable: "var(--core-colors-slate-light-alpha-500)", - value: "hsla(215.29999999999995, 92.7%, 10.8%, 0.10196078431372549)" -}, -"colors-slate-light-alpha-600": { - cssVariable: "var(--core-colors-slate-light-alpha-600)", - value: "hsla(205.70000000000005, 96.6%, 11.4%, 0.12941176470588237)" -}, -"colors-slate-light-alpha-700": { - cssVariable: "var(--core-colors-slate-light-alpha-700)", - value: "hsla(209.39999999999998, 100%, 10%, 0.1607843137254902)" -}, -"colors-slate-light-alpha-800": { - cssVariable: "var(--core-colors-slate-light-alpha-800)", - value: "hsla(204.5, 96.1%, 10%, 0.23921568627450981)" -}, -"colors-slate-light-alpha-900": { - cssVariable: "var(--core-colors-slate-light-alpha-900)", - value: "hsla(206, 100%, 5.9%, 0.47058823529411764)" -}, -"colors-slate-light-alpha-1000": { - cssVariable: "var(--core-colors-slate-light-alpha-1000)", - value: "hsla(204.39999999999998, 100%, 5.3%, 0.5098039215686274)" -}, -"colors-slate-light-alpha-1100": { - cssVariable: "var(--core-colors-slate-light-alpha-1100)", - value: "hsla(205, 100%, 4.7%, 0.5882352941176471)" -}, -"colors-slate-light-alpha-1200": { - cssVariable: "var(--core-colors-slate-light-alpha-1200)", - value: "hsla(200, 100%, 2.4%, 0.9294117647058824)" -}, -"variables-colors-brand-primary": { - cssVariable: "var(--core-variables-colors-brand-primary)", - value: "hsl(153.10000000000002, 60.2%, 52.7%)" -}, -"variables-colors-brand-accent": { - cssVariable: "var(--core-variables-colors-brand-accent)", - value: "hsl(152.89999999999998, 56.1%, 46.5%)" -}, -"foreground-DEFAULT": { - cssVariable: "var(--foreground-default)", - value: "hsl(0, 0%, 98%)" -}, -"foreground-light": { - cssVariable: "var(--foreground-light)", - value: "hsl(0, 0%, 70.6%)" -}, -"foreground-lighter": { - cssVariable: "var(--foreground-lighter)", - value: "hsl(0, 0%, 53.7%)" -}, -"foreground-muted": { - cssVariable: "var(--foreground-muted)", - value: "hsl(0, 0%, 30.2%)" -}, -"foreground-contrast": { - cssVariable: "var(--foreground-contrast)", - value: "hsl(0, 0%, 8.6%)" -}, -"background-200": { - cssVariable: "var(--background-200)", - value: "hsl(0, 0%, 9%)" -}, -"background-DEFAULT": { - cssVariable: "var(--background-default)", - value: "hsl(0, 0%, 7.1%)" -}, -"background-alternative-200": { - cssVariable: "var(--background-alternative-200)", - value: "hsl(0, 0%, 11%)" -}, -"background-alternative-DEFAULT": { - cssVariable: "var(--background-alternative-default)", - value: "hsl(0, 0%, 5.9%)" -}, -"background-selection": { - cssVariable: "var(--background-selection)", - value: "hsl(0, 0%, 19.2%)" -}, -"background-control": { - cssVariable: "var(--background-control)", - value: "hsl(0, 0%, 14.1%)" -}, -"background-surface-75": { - cssVariable: "var(--background-surface-75)", - value: "hsl(0, 0%, 9%)" -}, -"background-surface-100": { - cssVariable: "var(--background-surface-100)", - value: "hsl(0, 0%, 12.2%)" -}, -"background-surface-200": { - cssVariable: "var(--background-surface-200)", - value: "hsl(0, 0%, 12.9%)" -}, -"background-surface-300": { - cssVariable: "var(--background-surface-300)", - value: "hsl(0, 0%, 16.1%)" -}, -"background-surface-400": { - cssVariable: "var(--background-surface-400)", - value: "hsl(0, 0%, 16.1%)" -}, -"background-overlay-DEFAULT": { - cssVariable: "var(--background-overlay-default)", - value: "hsl(0, 0%, 14.1%)" -}, -"background-overlay-hover": { - cssVariable: "var(--background-overlay-hover)", - value: "hsl(0, 0%, 18%)" -}, -"background-muted": { - cssVariable: "var(--background-muted)", - value: "hsl(0, 0%, 14.1%)" -}, -"background-button-DEFAULT": { - cssVariable: "var(--background-button-default)", - value: "hsl(0, 0%, 18%)" -}, -"background-dialog-DEFAULT": { - cssVariable: "var(--background-dialog-default)", - value: "hsl(0, 0%, 7.1%)" -}, -"background-dash-sidebar": { - cssVariable: "var(--background-dash-sidebar)", - value: "hsl(0, 0%, 9%)" -}, -"background-dash-canvas": { - cssVariable: "var(--background-dash-canvas)", - value: "hsl(0, 0%, 7.1%)" -}, -"border-DEFAULT": { - cssVariable: "var(--border-default)", - value: "hsl(0, 0%, 18%)" -}, -"border-muted": { - cssVariable: "var(--border-muted)", - value: "hsl(0, 0%, 14.1%)" -}, -"border-secondary": { - cssVariable: "var(--border-secondary)", - value: "hsl(0, 0%, 14.1%)" -}, -"border-overlay": { - cssVariable: "var(--border-overlay)", - value: "hsl(0, 0%, 20%)" -}, -"border-control": { - cssVariable: "var(--border-control)", - value: "hsl(0, 0%, 22.4%)" -}, -"border-alternative": { - cssVariable: "var(--border-alternative)", - value: "hsl(0, 0%, 26.7%)" -}, -"border-strong": { - cssVariable: "var(--border-strong)", - value: "hsl(0, 0%, 21.2%)" -}, -"border-stronger": { - cssVariable: "var(--border-stronger)", - value: "hsl(0, 0%, 27.1%)" -}, -"border-button-DEFAULT": { - cssVariable: "var(--border-button-default)", - value: "hsl(0, 0%, 24.3%)" -}, -"border-button-hover": { - cssVariable: "var(--border-button-hover)", - value: "hsl(0, 0%, 31.4%)" -}, -"destructive-200": { - cssVariable: "var(--destructive-200)", - value: "hsl(10.899999999999977, 23.4%, 9.2%)" -}, -"destructive-300": { - cssVariable: "var(--destructive-300)", - value: "hsl(7.5, 51.3%, 15.3%)" -}, -"destructive-400": { - cssVariable: "var(--destructive-400)", - value: "hsl(6.699999999999989, 60%, 20.6%)" -}, -"destructive-500": { - cssVariable: "var(--destructive-500)", - value: "hsl(7.899999999999977, 71.6%, 29%)" -}, -"destructive-600": { - cssVariable: "var(--destructive-600)", - value: "hsl(9.699999999999989, 85.2%, 62.9%)" -}, -"destructive-DEFAULT": { - cssVariable: "var(--destructive-default)", - value: "hsl(10.199999999999989, 77.9%, 53.9%)" -}, -"warning-200": { - cssVariable: "var(--warning-200)", - value: "hsl(36.60000000000002, 100%, 8%)" -}, -"warning-300": { - cssVariable: "var(--warning-300)", - value: "hsl(32.30000000000001, 100%, 10.2%)" -}, -"warning-400": { - cssVariable: "var(--warning-400)", - value: "hsl(33.19999999999999, 100%, 14.5%)" -}, -"warning-500": { - cssVariable: "var(--warning-500)", - value: "hsl(34.80000000000001, 90.9%, 21.6%)" -}, -"warning-600": { - cssVariable: "var(--warning-600)", - value: "hsl(38.89999999999998, 100%, 42.9%)" -}, -"warning-DEFAULT": { - cssVariable: "var(--warning-default)", - value: "hsl(38.89999999999998, 100%, 42.9%)" -}, -"brand-200": { - cssVariable: "var(--brand-200)", - value: "hsl(162, 100%, 2%)" -}, -"brand-300": { - cssVariable: "var(--brand-300)", - value: "hsl(155.10000000000002, 100%, 8%)" -}, -"brand-400": { - cssVariable: "var(--brand-400)", - value: "hsl(155.5, 100%, 9.6%)" -}, -"brand-500": { - cssVariable: "var(--brand-500)", - value: "hsl(154.89999999999998, 100%, 19.2%)" -}, -"brand-600": { - cssVariable: "var(--brand-600)", - value: "hsl(154.89999999999998, 59.5%, 70%)" -}, -"brand-DEFAULT": { - cssVariable: "var(--brand-default)", - value: "hsl(153.10000000000002, 60.2%, 52.7%)" -}, -"brand-button": { - cssVariable: "var(--brand-button)", - value: "hsl(154.89999999999998, 100%, 19.2%)" -}, -"brand-link": { - cssVariable: "var(--brand-link)", - value: "hsl(155, 100%, 38.6%)" -}, -"_secondary-200": { - cssVariable: "var(--secondary-200)", - value: "hsl(248, 53.6%, 11%)" -}, -"_secondary-400": { - cssVariable: "var(--secondary-400)", - value: "hsl(248.29999999999995, 54.5%, 25.9%)" -}, -"_secondary-DEFAULT": { - cssVariable: "var(--secondary-default)", - value: "hsl(247.79999999999995, 100%, 70%)" -}, -"code_block-1": { - cssVariable: "var(--code-block-1)", - value: "hsl(170.79999999999995, 43.1%, 61.4%)" -}, -"code_block-2": { - cssVariable: "var(--code-block-2)", - value: "hsl(33.19999999999999, 90.3%, 75.7%)" -}, -"code_block-3": { - cssVariable: "var(--code-block-3)", - value: "hsl(83.80000000000001, 61.7%, 63.1%)" -}, -"code_block-4": { - cssVariable: "var(--code-block-4)", - value: "hsl(276.1, 67.7%, 74.5%)" -}, -"code_block-5": { - cssVariable: "var(--code-block-5)", - value: "hsl(13.800000000000011, 89.7%, 69.6%)" + 'colors-black': { + cssVariable: 'var(--core-colors-black)', + value: 'hsl(0, 0%, 0%)', + }, + 'colors-white': { + cssVariable: 'var(--core-colors-white)', + value: 'hsl(0, 0%, 100%)', + }, + 'colors-gray-dark-100': { + cssVariable: 'var(--core-colors-gray-dark-100)', + value: 'hsl(0, 0%, 8.6%)', + }, + 'colors-gray-dark-200': { + cssVariable: 'var(--core-colors-gray-dark-200)', + value: 'hsl(0, 0%, 11%)', + }, + 'colors-gray-dark-300': { + cssVariable: 'var(--core-colors-gray-dark-300)', + value: 'hsl(0, 0%, 13.7%)', + }, + 'colors-gray-dark-400': { + cssVariable: 'var(--core-colors-gray-dark-400)', + value: 'hsl(0, 0%, 15.7%)', + }, + 'colors-gray-dark-500': { + cssVariable: 'var(--core-colors-gray-dark-500)', + value: 'hsl(0, 0%, 18%)', + }, + 'colors-gray-dark-600': { + cssVariable: 'var(--core-colors-gray-dark-600)', + value: 'hsl(0, 0%, 20.4%)', + }, + 'colors-gray-dark-700': { + cssVariable: 'var(--core-colors-gray-dark-700)', + value: 'hsl(0, 0%, 24.3%)', + }, + 'colors-gray-dark-800': { + cssVariable: 'var(--core-colors-gray-dark-800)', + value: 'hsl(0, 0%, 31.4%)', + }, + 'colors-gray-dark-900': { + cssVariable: 'var(--core-colors-gray-dark-900)', + value: 'hsl(0, 0%, 43.9%)', + }, + 'colors-gray-dark-1000': { + cssVariable: 'var(--core-colors-gray-dark-1000)', + value: 'hsl(0, 0%, 49.4%)', + }, + 'colors-gray-dark-1100': { + cssVariable: 'var(--core-colors-gray-dark-1100)', + value: 'hsl(0, 0%, 62.7%)', + }, + 'colors-gray-dark-1200': { + cssVariable: 'var(--core-colors-gray-dark-1200)', + value: 'hsl(0, 0%, 92.9%)', + }, + 'colors-gray-dark-alpha-100': { + cssVariable: 'var(--core-colors-gray-dark-alpha-100)', + value: 'hsla(0, 0%, 0%, 0)', + }, + 'colors-gray-dark-alpha-200': { + cssVariable: 'var(--core-colors-gray-dark-alpha-200)', + value: 'hsla(0, 0%, 100%, 0.03137254901960784)', + }, + 'colors-gray-dark-alpha-300': { + cssVariable: 'var(--core-colors-gray-dark-alpha-300)', + value: 'hsla(0, 0%, 100%, 0.058823529411764705)', + }, + 'colors-gray-dark-alpha-400': { + cssVariable: 'var(--core-colors-gray-dark-alpha-400)', + value: 'hsla(0, 0%, 100%, 0.0784313725490196)', + }, + 'colors-gray-dark-alpha-500': { + cssVariable: 'var(--core-colors-gray-dark-alpha-500)', + value: 'hsla(0, 0%, 100%, 0.10196078431372549)', + }, + 'colors-gray-dark-alpha-600': { + cssVariable: 'var(--core-colors-gray-dark-alpha-600)', + value: 'hsla(0, 0%, 100%, 0.12941176470588237)', + }, + 'colors-gray-dark-alpha-700': { + cssVariable: 'var(--core-colors-gray-dark-alpha-700)', + value: 'hsla(0, 0%, 100%, 0.16862745098039217)', + }, + 'colors-gray-dark-alpha-800': { + cssVariable: 'var(--core-colors-gray-dark-alpha-800)', + value: 'hsla(0, 0%, 100%, 0.25098039215686274)', + }, + 'colors-gray-dark-alpha-900': { + cssVariable: 'var(--core-colors-gray-dark-alpha-900)', + value: 'hsla(0, 0%, 100%, 0.38823529411764707)', + }, + 'colors-gray-dark-alpha-1000': { + cssVariable: 'var(--core-colors-gray-dark-alpha-1000)', + value: 'hsla(0, 0%, 100%, 0.45098039215686275)', + }, + 'colors-gray-dark-alpha-1100': { + cssVariable: 'var(--core-colors-gray-dark-alpha-1100)', + value: 'hsla(0, 0%, 100%, 0.5882352941176471)', + }, + 'colors-gray-dark-alpha-1200': { + cssVariable: 'var(--core-colors-gray-dark-alpha-1200)', + value: 'hsla(0, 0%, 100%, 0.9215686274509803)', + }, + 'colors-gray-light-100': { + cssVariable: 'var(--core-colors-gray-light-100)', + value: 'hsl(0, 0%, 98.8%)', + }, + 'colors-gray-light-200': { + cssVariable: 'var(--core-colors-gray-light-200)', + value: 'hsl(0, 0%, 97.3%)', + }, + 'colors-gray-light-300': { + cssVariable: 'var(--core-colors-gray-light-300)', + value: 'hsl(0, 0%, 95.3%)', + }, + 'colors-gray-light-400': { + cssVariable: 'var(--core-colors-gray-light-400)', + value: 'hsl(0, 0%, 92.9%)', + }, + 'colors-gray-light-500': { + cssVariable: 'var(--core-colors-gray-light-500)', + value: 'hsl(0, 0%, 91%)', + }, + 'colors-gray-light-600': { + cssVariable: 'var(--core-colors-gray-light-600)', + value: 'hsl(0, 0%, 88.6%)', + }, + 'colors-gray-light-700': { + cssVariable: 'var(--core-colors-gray-light-700)', + value: 'hsl(0, 0%, 85.9%)', + }, + 'colors-gray-light-800': { + cssVariable: 'var(--core-colors-gray-light-800)', + value: 'hsl(0, 0%, 78%)', + }, + 'colors-gray-light-900': { + cssVariable: 'var(--core-colors-gray-light-900)', + value: 'hsl(0, 0%, 56.1%)', + }, + 'colors-gray-light-1000': { + cssVariable: 'var(--core-colors-gray-light-1000)', + value: 'hsl(0, 0%, 52.2%)', + }, + 'colors-gray-light-1100': { + cssVariable: 'var(--core-colors-gray-light-1100)', + value: 'hsl(0, 0%, 43.5%)', + }, + 'colors-gray-light-1200': { + cssVariable: 'var(--core-colors-gray-light-1200)', + value: 'hsl(0, 0%, 9%)', + }, + 'colors-gray-light-alpha-100': { + cssVariable: 'var(--core-colors-gray-light-alpha-100)', + value: 'hsla(0, 0%, 0%, 0.011764705882352941)', + }, + 'colors-gray-light-alpha-200': { + cssVariable: 'var(--core-colors-gray-light-alpha-200)', + value: 'hsla(0, 0%, 0%, 0.03137254901960784)', + }, + 'colors-gray-light-alpha-300': { + cssVariable: 'var(--core-colors-gray-light-alpha-300)', + value: 'hsla(0, 0%, 0%, 0.050980392156862744)', + }, + 'colors-gray-light-alpha-400': { + cssVariable: 'var(--core-colors-gray-light-alpha-400)', + value: 'hsla(0, 0%, 0%, 0.07058823529411765)', + }, + 'colors-gray-light-alpha-500': { + cssVariable: 'var(--core-colors-gray-light-alpha-500)', + value: 'hsla(0, 0%, 0%, 0.09019607843137255)', + }, + 'colors-gray-light-alpha-600': { + cssVariable: 'var(--core-colors-gray-light-alpha-600)', + value: 'hsla(0, 0%, 0%, 0.10980392156862745)', + }, + 'colors-gray-light-alpha-700': { + cssVariable: 'var(--core-colors-gray-light-alpha-700)', + value: 'hsla(0, 0%, 0%, 0.1411764705882353)', + }, + 'colors-gray-light-alpha-800': { + cssVariable: 'var(--core-colors-gray-light-alpha-800)', + value: 'hsla(0, 0%, 0%, 0.2196078431372549)', + }, + 'colors-gray-light-alpha-900': { + cssVariable: 'var(--core-colors-gray-light-alpha-900)', + value: 'hsla(0, 0%, 0%, 0.4392156862745098)', + }, + 'colors-gray-light-alpha-1000': { + cssVariable: 'var(--core-colors-gray-light-alpha-1000)', + value: 'hsla(0, 0%, 0%, 0.47843137254901963)', + }, + 'colors-gray-light-alpha-1100': { + cssVariable: 'var(--core-colors-gray-light-alpha-1100)', + value: 'hsla(0, 0%, 0%, 0.5607843137254902)', + }, + 'colors-gray-light-alpha-1200': { + cssVariable: 'var(--core-colors-gray-light-alpha-1200)', + value: 'hsla(0, 0%, 0%, 0.9098039215686274)', + }, + 'colors-slate-dark-100': { + cssVariable: 'var(--core-colors-slate-dark-100)', + value: 'hsl(200, 6.7%, 8.8%)', + }, + 'colors-slate-dark-200': { + cssVariable: 'var(--core-colors-slate-dark-200)', + value: 'hsl(195, 7.1%, 11%)', + }, + 'colors-slate-dark-300': { + cssVariable: 'var(--core-colors-slate-dark-300)', + value: 'hsl(192, 7.2%, 13.5%)', + }, + 'colors-slate-dark-400': { + cssVariable: 'var(--core-colors-slate-dark-400)', + value: 'hsl(204, 6.2%, 15.9%)', + }, + 'colors-slate-dark-500': { + cssVariable: 'var(--core-colors-slate-dark-500)', + value: 'hsl(200, 6.5%, 18%)', + }, + 'colors-slate-dark-600': { + cssVariable: 'var(--core-colors-slate-dark-600)', + value: 'hsl(205.70000000000005, 6.7%, 20.6%)', + }, + 'colors-slate-dark-700': { + cssVariable: 'var(--core-colors-slate-dark-700)', + value: 'hsl(202.5, 6.5%, 24.3%)', + }, + 'colors-slate-dark-800': { + cssVariable: 'var(--core-colors-slate-dark-800)', + value: 'hsl(206.70000000000005, 5.6%, 31.6%)', + }, + 'colors-slate-dark-900': { + cssVariable: 'var(--core-colors-slate-dark-900)', + value: 'hsl(205.70000000000005, 6.3%, 43.9%)', + }, + 'colors-slate-dark-1000': { + cssVariable: 'var(--core-colors-slate-dark-1000)', + value: 'hsl(207.70000000000005, 5.1%, 49.6%)', + }, + 'colors-slate-dark-1100': { + cssVariable: 'var(--core-colors-slate-dark-1100)', + value: 'hsl(207.29999999999995, 5.8%, 62.9%)', + }, + 'colors-slate-dark-1200': { + cssVariable: 'var(--core-colors-slate-dark-1200)', + value: 'hsl(210, 5.6%, 92.9%)', + }, + 'colors-slate-dark-alpha-100': { + cssVariable: 'var(--core-colors-slate-dark-alpha-100)', + value: 'hsla(0, 0%, 0%, 0)', + }, + 'colors-slate-dark-alpha-200': { + cssVariable: 'var(--core-colors-slate-dark-alpha-200)', + value: 'hsla(181.39999999999998, 100%, 91.8%, 0.03137254901960784)', + }, + 'colors-slate-dark-alpha-300': { + cssVariable: 'var(--core-colors-slate-dark-alpha-300)', + value: 'hsla(181.60000000000002, 86.4%, 91.4%, 0.058823529411764705)', + }, + 'colors-slate-dark-alpha-400': { + cssVariable: 'var(--core-colors-slate-dark-alpha-400)', + value: 'hsla(208.89999999999998, 87.1%, 93.9%, 0.0784313725490196)', + }, + 'colors-slate-dark-alpha-500': { + cssVariable: 'var(--core-colors-slate-dark-alpha-500)', + value: 'hsla(200, 88.2%, 93.3%, 0.10980392156862745)', + }, + 'colors-slate-dark-alpha-600': { + cssVariable: 'var(--core-colors-slate-dark-alpha-600)', + value: 'hsla(209, 93.9%, 93.5%, 0.1411764705882353)', + }, + 'colors-slate-dark-alpha-700': { + cssVariable: 'var(--core-colors-slate-dark-alpha-700)', + value: 'hsla(203.20000000000005, 100%, 93.9%, 0.1803921568627451)', + }, + 'colors-slate-dark-alpha-800': { + cssVariable: 'var(--core-colors-slate-dark-alpha-800)', + value: 'hsla(208.79999999999995, 92.6%, 94.7%, 0.25882352941176473)', + }, + 'colors-slate-dark-alpha-900': { + cssVariable: 'var(--core-colors-slate-dark-alpha-900)', + value: 'hsla(208, 100%, 94.1%, 0.4117647058823529)', + }, + 'colors-slate-dark-alpha-1000': { + cssVariable: 'var(--core-colors-slate-dark-alpha-1000)', + value: 'hsla(210, 100%, 95.3%, 0.47058823529411764)', + }, + 'colors-slate-dark-alpha-1100': { + cssVariable: 'var(--core-colors-slate-dark-alpha-1100)', + value: 'hsla(210, 100%, 96.9%, 0.6196078431372549)', + }, + 'colors-slate-dark-alpha-1200': { + cssVariable: 'var(--core-colors-slate-dark-alpha-1200)', + value: 'hsla(210, 100%, 99.6%, 0.9294117647058824)', + }, + 'colors-slate-light-100': { + cssVariable: 'var(--core-colors-slate-light-100)', + value: 'hsl(210, 33.3%, 98.8%)', + }, + 'colors-slate-light-200': { + cssVariable: 'var(--core-colors-slate-light-200)', + value: 'hsl(210, 16.7%, 97.6%)', + }, + 'colors-slate-light-300': { + cssVariable: 'var(--core-colors-slate-light-300)', + value: 'hsl(210, 16.7%, 95.3%)', + }, + 'colors-slate-light-400': { + cssVariable: 'var(--core-colors-slate-light-400)', + value: 'hsl(210, 11.8%, 93.3%)', + }, + 'colors-slate-light-500': { + cssVariable: 'var(--core-colors-slate-light-500)', + value: 'hsl(216, 11.1%, 91.2%)', + }, + 'colors-slate-light-600': { + cssVariable: 'var(--core-colors-slate-light-600)', + value: 'hsl(205.70000000000005, 12.3%, 88.8%)', + }, + 'colors-slate-light-700': { + cssVariable: 'var(--core-colors-slate-light-700)', + value: 'hsl(210, 11.1%, 85.9%)', + }, + 'colors-slate-light-800': { + cssVariable: 'var(--core-colors-slate-light-800)', + value: 'hsl(205, 10.7%, 78%)', + }, + 'colors-slate-light-900': { + cssVariable: 'var(--core-colors-slate-light-900)', + value: 'hsl(205.70000000000005, 6.3%, 56.1%)', + }, + 'colors-slate-light-1000': { + cssVariable: 'var(--core-colors-slate-light-1000)', + value: 'hsl(205.70000000000005, 5.7%, 52.2%)', + }, + 'colors-slate-light-1100': { + cssVariable: 'var(--core-colors-slate-light-1100)', + value: 'hsl(205.70000000000005, 6.3%, 43.5%)', + }, + 'colors-slate-light-1200': { + cssVariable: 'var(--core-colors-slate-light-1200)', + value: 'hsl(201.79999999999995, 24.4%, 8.8%)', + }, + 'colors-slate-light-alpha-100': { + cssVariable: 'var(--core-colors-slate-light-alpha-100)', + value: 'hsla(209.79999999999995, 92.6%, 26.5%, 0.0196078431372549)', + }, + 'colors-slate-light-alpha-200': { + cssVariable: 'var(--core-colors-slate-light-alpha-200)', + value: 'hsla(210, 87.8%, 16.1%, 0.03137254901960784)', + }, + 'colors-slate-light-alpha-300': { + cssVariable: 'var(--core-colors-slate-light-alpha-300)', + value: 'hsla(209.60000000000002, 100%, 14.3%, 0.050980392156862744)', + }, + 'colors-slate-light-alpha-400': { + cssVariable: 'var(--core-colors-slate-light-alpha-400)', + value: 'hsla(210.60000000000002, 93%, 11.2%, 0.0784313725490196)', + }, + 'colors-slate-light-alpha-500': { + cssVariable: 'var(--core-colors-slate-light-alpha-500)', + value: 'hsla(215.29999999999995, 92.7%, 10.8%, 0.10196078431372549)', + }, + 'colors-slate-light-alpha-600': { + cssVariable: 'var(--core-colors-slate-light-alpha-600)', + value: 'hsla(205.70000000000005, 96.6%, 11.4%, 0.12941176470588237)', + }, + 'colors-slate-light-alpha-700': { + cssVariable: 'var(--core-colors-slate-light-alpha-700)', + value: 'hsla(209.39999999999998, 100%, 10%, 0.1607843137254902)', + }, + 'colors-slate-light-alpha-800': { + cssVariable: 'var(--core-colors-slate-light-alpha-800)', + value: 'hsla(204.5, 96.1%, 10%, 0.23921568627450981)', + }, + 'colors-slate-light-alpha-900': { + cssVariable: 'var(--core-colors-slate-light-alpha-900)', + value: 'hsla(206, 100%, 5.9%, 0.47058823529411764)', + }, + 'colors-slate-light-alpha-1000': { + cssVariable: 'var(--core-colors-slate-light-alpha-1000)', + value: 'hsla(204.39999999999998, 100%, 5.3%, 0.5098039215686274)', + }, + 'colors-slate-light-alpha-1100': { + cssVariable: 'var(--core-colors-slate-light-alpha-1100)', + value: 'hsla(205, 100%, 4.7%, 0.5882352941176471)', + }, + 'colors-slate-light-alpha-1200': { + cssVariable: 'var(--core-colors-slate-light-alpha-1200)', + value: 'hsla(200, 100%, 2.4%, 0.9294117647058824)', + }, + 'variables-colors-brand-primary': { + cssVariable: 'var(--core-variables-colors-brand-primary)', + value: 'hsl(153.10000000000002, 60.2%, 52.7%)', + }, + 'variables-colors-brand-accent': { + cssVariable: 'var(--core-variables-colors-brand-accent)', + value: 'hsl(152.89999999999998, 56.1%, 46.5%)', + }, + 'foreground-DEFAULT': { + cssVariable: 'var(--foreground-default)', + value: 'hsl(0, 0%, 98%)', + }, + 'foreground-light': { + cssVariable: 'var(--foreground-light)', + value: 'hsl(0, 0%, 70.6%)', + }, + 'foreground-lighter': { + cssVariable: 'var(--foreground-lighter)', + value: 'hsl(0, 0%, 53.7%)', + }, + 'foreground-muted': { + cssVariable: 'var(--foreground-muted)', + value: 'hsl(0, 0%, 30.2%)', + }, + 'foreground-contrast': { + cssVariable: 'var(--foreground-contrast)', + value: 'hsl(0, 0%, 8.6%)', + }, + 'background-200': { + cssVariable: 'var(--background-200)', + value: 'hsl(0, 0%, 9%)', + }, + 'background-DEFAULT': { + cssVariable: 'var(--background-default)', + value: 'hsl(0, 0%, 7.1%)', + }, + 'background-alternative-200': { + cssVariable: 'var(--background-alternative-200)', + value: 'hsl(0, 0%, 11%)', + }, + 'background-alternative-DEFAULT': { + cssVariable: 'var(--background-alternative-default)', + value: 'hsl(0, 0%, 5.9%)', + }, + 'background-selection': { + cssVariable: 'var(--background-selection)', + value: 'hsl(0, 0%, 19.2%)', + }, + 'background-control': { + cssVariable: 'var(--background-control)', + value: 'hsl(0, 0%, 14.1%)', + }, + 'background-surface-75': { + cssVariable: 'var(--background-surface-75)', + value: 'hsl(0, 0%, 9%)', + }, + 'background-surface-100': { + cssVariable: 'var(--background-surface-100)', + value: 'hsl(0, 0%, 12.2%)', + }, + 'background-surface-200': { + cssVariable: 'var(--background-surface-200)', + value: 'hsl(0, 0%, 12.9%)', + }, + 'background-surface-300': { + cssVariable: 'var(--background-surface-300)', + value: 'hsl(0, 0%, 16.1%)', + }, + 'background-surface-400': { + cssVariable: 'var(--background-surface-400)', + value: 'hsl(0, 0%, 16.1%)', + }, + 'background-overlay-DEFAULT': { + cssVariable: 'var(--background-overlay-default)', + value: 'hsl(0, 0%, 14.1%)', + }, + 'background-overlay-hover': { + cssVariable: 'var(--background-overlay-hover)', + value: 'hsl(0, 0%, 18%)', + }, + 'background-muted': { + cssVariable: 'var(--background-muted)', + value: 'hsl(0, 0%, 14.1%)', + }, + 'background-button-DEFAULT': { + cssVariable: 'var(--background-button-default)', + value: 'hsl(0, 0%, 18%)', + }, + 'background-dialog-DEFAULT': { + cssVariable: 'var(--background-dialog-default)', + value: 'hsl(0, 0%, 7.1%)', + }, + 'background-dash-sidebar': { + cssVariable: 'var(--background-dash-sidebar)', + value: 'hsl(0, 0%, 9%)', + }, + 'background-dash-canvas': { + cssVariable: 'var(--background-dash-canvas)', + value: 'hsl(0, 0%, 7.1%)', + }, + 'border-DEFAULT': { + cssVariable: 'var(--border-default)', + value: 'hsl(0, 0%, 18%)', + }, + 'border-muted': { + cssVariable: 'var(--border-muted)', + value: 'hsl(0, 0%, 14.1%)', + }, + 'border-secondary': { + cssVariable: 'var(--border-secondary)', + value: 'hsl(0, 0%, 14.1%)', + }, + 'border-overlay': { + cssVariable: 'var(--border-overlay)', + value: 'hsl(0, 0%, 20%)', + }, + 'border-control': { + cssVariable: 'var(--border-control)', + value: 'hsl(0, 0%, 22.4%)', + }, + 'border-alternative': { + cssVariable: 'var(--border-alternative)', + value: 'hsl(0, 0%, 26.7%)', + }, + 'border-strong': { + cssVariable: 'var(--border-strong)', + value: 'hsl(0, 0%, 21.2%)', + }, + 'border-stronger': { + cssVariable: 'var(--border-stronger)', + value: 'hsl(0, 0%, 27.1%)', + }, + 'border-button-DEFAULT': { + cssVariable: 'var(--border-button-default)', + value: 'hsl(0, 0%, 24.3%)', + }, + 'border-button-hover': { + cssVariable: 'var(--border-button-hover)', + value: 'hsl(0, 0%, 31.4%)', + }, + 'destructive-200': { + cssVariable: 'var(--destructive-200)', + value: 'hsl(10.899999999999977, 23.4%, 9.2%)', + }, + 'destructive-300': { + cssVariable: 'var(--destructive-300)', + value: 'hsl(7.5, 51.3%, 15.3%)', + }, + 'destructive-400': { + cssVariable: 'var(--destructive-400)', + value: 'hsl(6.699999999999989, 60%, 20.6%)', + }, + 'destructive-500': { + cssVariable: 'var(--destructive-500)', + value: 'hsl(7.899999999999977, 71.6%, 29%)', + }, + 'destructive-600': { + cssVariable: 'var(--destructive-600)', + value: 'hsl(9.699999999999989, 85.2%, 62.9%)', + }, + 'destructive-DEFAULT': { + cssVariable: 'var(--destructive-default)', + value: 'hsl(10.199999999999989, 77.9%, 53.9%)', + }, + 'warning-200': { + cssVariable: 'var(--warning-200)', + value: 'hsl(36.60000000000002, 100%, 8%)', + }, + 'warning-300': { + cssVariable: 'var(--warning-300)', + value: 'hsl(32.30000000000001, 100%, 10.2%)', + }, + 'warning-400': { + cssVariable: 'var(--warning-400)', + value: 'hsl(33.19999999999999, 100%, 14.5%)', + }, + 'warning-500': { + cssVariable: 'var(--warning-500)', + value: 'hsl(34.80000000000001, 90.9%, 21.6%)', + }, + 'warning-600': { + cssVariable: 'var(--warning-600)', + value: 'hsl(38.89999999999998, 100%, 42.9%)', + }, + 'warning-DEFAULT': { + cssVariable: 'var(--warning-default)', + value: 'hsl(38.89999999999998, 100%, 42.9%)', + }, + 'brand-200': { + cssVariable: 'var(--brand-200)', + value: 'hsl(162, 100%, 2%)', + }, + 'brand-300': { + cssVariable: 'var(--brand-300)', + value: 'hsl(155.10000000000002, 100%, 8%)', + }, + 'brand-400': { + cssVariable: 'var(--brand-400)', + value: 'hsl(155.5, 100%, 9.6%)', + }, + 'brand-500': { + cssVariable: 'var(--brand-500)', + value: 'hsl(154.89999999999998, 100%, 19.2%)', + }, + 'brand-600': { + cssVariable: 'var(--brand-600)', + value: 'hsl(154.89999999999998, 59.5%, 70%)', + }, + 'brand-DEFAULT': { + cssVariable: 'var(--brand-default)', + value: 'hsl(153.10000000000002, 60.2%, 52.7%)', + }, + 'brand-button': { + cssVariable: 'var(--brand-button)', + value: 'hsl(154.89999999999998, 100%, 19.2%)', + }, + 'brand-link': { + cssVariable: 'var(--brand-link)', + value: 'hsl(155, 100%, 38.6%)', + }, + '_secondary-200': { + cssVariable: 'var(--secondary-200)', + value: 'hsl(248, 53.6%, 11%)', + }, + '_secondary-400': { + cssVariable: 'var(--secondary-400)', + value: 'hsl(248.29999999999995, 54.5%, 25.9%)', + }, + '_secondary-DEFAULT': { + cssVariable: 'var(--secondary-default)', + value: 'hsl(247.79999999999995, 100%, 70%)', + }, + 'code_block-1': { + cssVariable: 'var(--code-block-1)', + value: 'hsl(170.79999999999995, 43.1%, 61.4%)', + }, + 'code_block-2': { + cssVariable: 'var(--code-block-2)', + value: 'hsl(33.19999999999999, 90.3%, 75.7%)', + }, + 'code_block-3': { + cssVariable: 'var(--code-block-3)', + value: 'hsl(83.80000000000001, 61.7%, 63.1%)', + }, + 'code_block-4': { + cssVariable: 'var(--code-block-4)', + value: 'hsl(276.1, 67.7%, 74.5%)', + }, + 'code_block-5': { + cssVariable: 'var(--code-block-5)', + value: 'hsl(13.800000000000011, 89.7%, 69.6%)', + }, } -} \ No newline at end of file diff --git a/packages/ui/components.json b/packages/ui/components.json index 9f1db7ce50e..f850184173f 100644 --- a/packages/ui/components.json +++ b/packages/ui/components.json @@ -12,4 +12,4 @@ "components": "src/components/shadcn", "utils": "src/lib/utils" } -} \ No newline at end of file +} diff --git a/packages/ui/internals/transform/common/camelCaseHelper.js b/packages/ui/internals/transform/common/camelCaseHelper.js index 69d260dca17..6ee7dec94d7 100644 --- a/packages/ui/internals/transform/common/camelCaseHelper.js +++ b/packages/ui/internals/transform/common/camelCaseHelper.js @@ -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 }) diff --git a/packages/ui/internals/transform/common/colorToHex8.js b/packages/ui/internals/transform/common/colorToHex8.js index 42b6fd71ac7..64096af5c23 100644 --- a/packages/ui/internals/transform/common/colorToHex8.js +++ b/packages/ui/internals/transform/common/colorToHex8.js @@ -7,5 +7,5 @@ module.exports = { }, transformer: function ({ value }) { return `${new TinyColor.TinyColor(value).toHex8String()}` - } + }, } diff --git a/packages/ui/internals/transform/common/colorToRgbaString.js b/packages/ui/internals/transform/common/colorToRgbaString.js index 01819adbede..bc97f942a46 100644 --- a/packages/ui/internals/transform/common/colorToRgbaString.js +++ b/packages/ui/internals/transform/common/colorToRgbaString.js @@ -7,5 +7,5 @@ module.exports = { }, transformer: function ({ value }) { return `${new TinyColor.TinyColor(value).toRgbString()}` - } + }, } diff --git a/packages/ui/internals/transform/common/copyFileOrFolder.js b/packages/ui/internals/transform/common/copyFileOrFolder.js index 62ba766a3b6..3a8c2793f2a 100644 --- a/packages/ui/internals/transform/common/copyFileOrFolder.js +++ b/packages/ui/internals/transform/common/copyFileOrFolder.js @@ -12,5 +12,5 @@ module.exports = { console.log(`Cleaning ${destination}`) fs.removeSync(destination) }) - } + }, } diff --git a/packages/ui/internals/transform/web/createPropertyFormatter.js b/packages/ui/internals/transform/web/createPropertyFormatter.js index 31687131d6a..a3c129f4ee0 100644 --- a/packages/ui/internals/transform/web/createPropertyFormatter.js +++ b/packages/ui/internals/transform/web/createPropertyFormatter.js @@ -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 diff --git a/packages/ui/internals/transform/web/fileHeader.js b/packages/ui/internals/transform/web/fileHeader.js index 153922ace66..c48930e2916 100644 --- a/packages/ui/internals/transform/web/fileHeader.js +++ b/packages/ui/internals/transform/web/fileHeader.js @@ -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}` } diff --git a/packages/ui/internals/transform/web/filterWeb.js b/packages/ui/internals/transform/web/filterWeb.js index 6246ae733d1..f03fc479b0d 100644 --- a/packages/ui/internals/transform/web/filterWeb.js +++ b/packages/ui/internals/transform/web/filterWeb.js @@ -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) diff --git a/packages/ui/internals/transform/web/formatCss.js b/packages/ui/internals/transform/web/formatCss.js index 87fec87c828..17a70e1d206 100644 --- a/packages/ui/internals/transform/web/formatCss.js +++ b/packages/ui/internals/transform/web/formatCss.js @@ -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' ) } diff --git a/packages/ui/internals/transform/web/formattedVariables.js b/packages/ui/internals/transform/web/formattedVariables.js index b73b817b382..195d6a9f83a 100644 --- a/packages/ui/internals/transform/web/formattedVariables.js +++ b/packages/ui/internals/transform/web/formattedVariables.js @@ -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) } diff --git a/packages/ui/internals/transform/web/sizePx.js b/packages/ui/internals/transform/web/sizePx.js index b19899f0b86..04fe72999eb 100644 --- a/packages/ui/internals/transform/web/sizePx.js +++ b/packages/ui/internals/transform/web/sizePx.js @@ -5,5 +5,5 @@ module.exports = { }, transformer: function (token) { return `${token.value}px` - } + }, } diff --git a/packages/ui/internals/transform/web/sortByReference.js b/packages/ui/internals/transform/web/sortByReference.js index 16eeb80a248..5dd4af79b99 100644 --- a/packages/ui/internals/transform/web/sortByReference.js +++ b/packages/ui/internals/transform/web/sortByReference.js @@ -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; \ No newline at end of file +module.exports = sortByReference diff --git a/packages/ui/internals/transform/web/webFont.js b/packages/ui/internals/transform/web/webFont.js index 808a9e9a160..4bebf5e80f5 100644 --- a/packages/ui/internals/transform/web/webFont.js +++ b/packages/ui/internals/transform/web/webFont.js @@ -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() - } + }, } diff --git a/packages/ui/internals/transform/web/webGradient.js b/packages/ui/internals/transform/web/webGradient.js index 8c4ee2f19f4..1325b271a0a 100644 --- a/packages/ui/internals/transform/web/webGradient.js +++ b/packages/ui/internals/transform/web/webGradient.js @@ -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})` } - } + }, } diff --git a/packages/ui/internals/transform/web/webPadding.js b/packages/ui/internals/transform/web/webPadding.js index 0aff7bf248d..29826a90911 100644 --- a/packages/ui/internals/transform/web/webPadding.js +++ b/packages/ui/internals/transform/web/webPadding.js @@ -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` - } + }, } diff --git a/packages/ui/internals/transform/web/webRadius.js b/packages/ui/internals/transform/web/webRadius.js index 730be6d3bca..0b72b06d01a 100644 --- a/packages/ui/internals/transform/web/webRadius.js +++ b/packages/ui/internals/transform/web/webRadius.js @@ -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` - } + }, } diff --git a/packages/ui/internals/transform/web/webShadows.js b/packages/ui/internals/transform/web/webShadows.js index 997cddd5cb8..3268c2232fd 100644 --- a/packages/ui/internals/transform/web/webShadows.js +++ b/packages/ui/internals/transform/web/webShadows.js @@ -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()}` - } + }, } diff --git a/packages/ui/src/components/Breadcrumb/Breadcrumb.test.jsx b/packages/ui/src/components/Breadcrumb/Breadcrumb.test.jsx index c560eb50a02..a6c2b316c56 100644 --- a/packages/ui/src/components/Breadcrumb/Breadcrumb.test.jsx +++ b/packages/ui/src/components/Breadcrumb/Breadcrumb.test.jsx @@ -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 () => { diff --git a/packages/ui/src/components/ContextMenu/ContextMenu.module.css b/packages/ui/src/components/ContextMenu/ContextMenu.module.css index c4651c0ef7a..3c8a401fe73 100644 --- a/packages/ui/src/components/ContextMenu/ContextMenu.module.css +++ b/packages/ui/src/components/ContextMenu/ContextMenu.module.css @@ -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); */ /* } */ } diff --git a/packages/ui/src/components/InputOld/Input.test.jsx b/packages/ui/src/components/InputOld/Input.test.jsx index fb3ec4ec06e..ae0df1ee953 100644 --- a/packages/ui/src/components/InputOld/Input.test.jsx +++ b/packages/ui/src/components/InputOld/Input.test.jsx @@ -1,6 +1,5 @@ import { describe, it } from 'vitest' - describe('#Input', () => { it.skip('should render input correctly', async () => { // render() @@ -13,7 +12,7 @@ describe('#Input', () => { }) // it.each(SIZES)('should have "form-input--%s" class', (size) => { - // render() - // expect(screen.queryByTestId('form-input')).toHaveClass(`form-input border-solid form-input--${size}`) + // render() + // expect(screen.queryByTestId('form-input')).toHaveClass(`form-input border-solid form-input--${size}`) // }) -}) \ No newline at end of file +}) diff --git a/packages/ui/src/components/RadioOld/Radio.test.jsx b/packages/ui/src/components/RadioOld/Radio.test.jsx index e9fb5d9f0ae..511e0f47452 100644 --- a/packages/ui/src/components/RadioOld/Radio.test.jsx +++ b/packages/ui/src/components/RadioOld/Radio.test.jsx @@ -1,19 +1,17 @@ import { describe, it } from 'vitest' - describe('#Radio', () => { - it('should render radio correctly', () => { - // render( - // // - // ) - // expect(screen.queryByTestId('form-radio')).toBeInTheDocument() + // render( + // // + // ) + // expect(screen.queryByTestId('form-radio')).toBeInTheDocument() }) it('should show label', () => { - // render( - // - // ) - // expect(screen.queryByText('JavaScript')).toBeInTheDocument() + // render( + // + // ) + // expect(screen.queryByText('JavaScript')).toBeInTheDocument() }) -}) \ No newline at end of file +}) diff --git a/packages/ui/src/components/Typography/index.tsx b/packages/ui/src/components/Typography/index.tsx index 3b869c1aab7..4761fd9f69e 100644 --- a/packages/ui/src/components/Typography/index.tsx +++ b/packages/ui/src/components/Typography/index.tsx @@ -1,6 +1,3 @@ - import Typography from './Typography' export default Typography export { default as Typography } from './Typography' - - diff --git a/packages/ui/src/components/Upload/Upload.module.css b/packages/ui/src/components/Upload/Upload.module.css index c6f6109ae27..56056bde222 100644 --- a/packages/ui/src/components/Upload/Upload.module.css +++ b/packages/ui/src/components/Upload/Upload.module.css @@ -4,4 +4,4 @@ .sbui-upload-dragger--dragged { @apply bg-brand-100; -} \ No newline at end of file +} diff --git a/packages/ui/src/components/shadcn/ui/aspect-ratio.tsx b/packages/ui/src/components/shadcn/ui/aspect-ratio.tsx index d6a5226f5e9..794c6f4cd34 100644 --- a/packages/ui/src/components/shadcn/ui/aspect-ratio.tsx +++ b/packages/ui/src/components/shadcn/ui/aspect-ratio.tsx @@ -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 diff --git a/packages/ui/src/lib/Spinner/styles.module.css b/packages/ui/src/lib/Spinner/styles.module.css index 0bf8d819238..ed2d7f5c929 100644 --- a/packages/ui/src/lib/Spinner/styles.module.css +++ b/packages/ui/src/lib/Spinner/styles.module.css @@ -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); + } } - \ No newline at end of file diff --git a/packages/ui/src/lib/tailwind-demo-classes.ts b/packages/ui/src/lib/tailwind-demo-classes.ts index 3312dbf86cc..015278bf9b4 100644 --- a/packages/ui/src/lib/tailwind-demo-classes.ts +++ b/packages/ui/src/lib/tailwind-demo-classes.ts @@ -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" - ] -}; +} diff --git a/packages/ui/tailwind-theming.md b/packages/ui/tailwind-theming.md index 38a34bf4639..6d572aa15a9 100644 --- a/packages/ui/tailwind-theming.md +++ b/packages/ui/tailwind-theming.md @@ -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 |