chore(ui): creating a playground for the new components (#4301)
Co-authored-by: Dan Rukas <dan.rukas@gmail.com>
This commit is contained in:
Alireza
GitHub
parent
b9eb54c71f
commit
6231629b38
@ -5,7 +5,6 @@ import 'regenerator-runtime/runtime';
|
|||||||
import { createRoot } from 'react-dom/client';
|
import { createRoot } from 'react-dom/client';
|
||||||
import App from './App';
|
import App from './App';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
|
||||||
import { history } from './utils/history';
|
import { history } from './utils/history';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
17
platform/ui-next/.webpack/template.html
Normal file
17
platform/ui-next/.webpack/template.html
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta
|
||||||
|
name="viewport"
|
||||||
|
content="width=device-width, initial-scale=1.0"
|
||||||
|
/>
|
||||||
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-100">
|
||||||
|
<div
|
||||||
|
id="root"
|
||||||
|
class="min-h-screen"
|
||||||
|
></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
116
platform/ui-next/.webpack/webpack.playground.js
Normal file
116
platform/ui-next/.webpack/webpack.playground.js
Normal file
@ -0,0 +1,116 @@
|
|||||||
|
const path = require('path');
|
||||||
|
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||||
|
// const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');
|
||||||
|
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||||
|
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
|
||||||
|
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
|
||||||
|
|
||||||
|
const isDevelopment = process.env.NODE_ENV !== 'production';
|
||||||
|
const isProdBuild = process.env.NODE_ENV === 'production';
|
||||||
|
|
||||||
|
const autoprefixer = require('autoprefixer');
|
||||||
|
const tailwindcss = require('tailwindcss');
|
||||||
|
const tailwindConfigPath = path.resolve('./tailwind.config.js');
|
||||||
|
|
||||||
|
const cssToJavaScript = {
|
||||||
|
test: /\.css$/,
|
||||||
|
use: [
|
||||||
|
//'style-loader',
|
||||||
|
isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
|
||||||
|
{ loader: 'css-loader', options: { importLoaders: 1 } },
|
||||||
|
{
|
||||||
|
loader: 'postcss-loader',
|
||||||
|
options: {
|
||||||
|
postcssOptions: {
|
||||||
|
verbose: true,
|
||||||
|
plugins: [
|
||||||
|
[tailwindcss(tailwindConfigPath)],
|
||||||
|
[autoprefixer('last 2 version', 'ie >= 11')],
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
mode: 'development',
|
||||||
|
entry: {
|
||||||
|
home: './src/_pages/index.tsx',
|
||||||
|
playground: './src/_pages/playground.tsx',
|
||||||
|
viewer: './src/_pages/viewer.tsx',
|
||||||
|
colors: './src/_pages/colors.tsx',
|
||||||
|
// add other pages here
|
||||||
|
},
|
||||||
|
output: {
|
||||||
|
filename: '[name].bundle.js',
|
||||||
|
path: path.resolve(__dirname, 'dist'),
|
||||||
|
clean: true,
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
extensions: ['.ts', '.tsx', '.js', '.jsx'],
|
||||||
|
// plugins: [new TsconfigPathsPlugin()],
|
||||||
|
},
|
||||||
|
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
...(isProdBuild
|
||||||
|
? []
|
||||||
|
: [
|
||||||
|
{
|
||||||
|
test: /\.[jt]sx?$/,
|
||||||
|
exclude: /node_modules/,
|
||||||
|
loader: 'babel-loader',
|
||||||
|
options: {
|
||||||
|
plugins: ['react-refresh/babel'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
cssToJavaScript,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
new CleanWebpackPlugin(),
|
||||||
|
|
||||||
|
new HtmlWebpackPlugin({
|
||||||
|
template: './.webpack/template.html',
|
||||||
|
chunks: ['home'],
|
||||||
|
filename: 'index.html',
|
||||||
|
}),
|
||||||
|
new HtmlWebpackPlugin({
|
||||||
|
template: './.webpack/template.html',
|
||||||
|
chunks: ['playground'],
|
||||||
|
filename: 'playground.html',
|
||||||
|
}),
|
||||||
|
new HtmlWebpackPlugin({
|
||||||
|
template: './.webpack/template.html',
|
||||||
|
chunks: ['viewer'],
|
||||||
|
filename: 'viewer.html',
|
||||||
|
}),
|
||||||
|
new HtmlWebpackPlugin({
|
||||||
|
template: './.webpack/template.html',
|
||||||
|
chunks: ['colors'],
|
||||||
|
filename: 'colors.html',
|
||||||
|
}),
|
||||||
|
new MiniCssExtractPlugin({
|
||||||
|
filename: '[name].css',
|
||||||
|
}),
|
||||||
|
isDevelopment && new ReactRefreshWebpackPlugin(),
|
||||||
|
!isDevelopment &&
|
||||||
|
new MiniCssExtractPlugin({
|
||||||
|
filename: '[name].css',
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
devServer: {
|
||||||
|
static: {
|
||||||
|
directory: path.join(__dirname, 'dist'),
|
||||||
|
},
|
||||||
|
hot: true,
|
||||||
|
open: true,
|
||||||
|
port: 8000,
|
||||||
|
historyApiFallback: true,
|
||||||
|
devMiddleware: {
|
||||||
|
writeToDisk: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
57
platform/ui-next/babel.config.js
Normal file
57
platform/ui-next/babel.config.js
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
// https://babeljs.io/docs/en/options#babelrcroots
|
||||||
|
const { extendDefaultPlugins } = require('svgo');
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
babelrcRoots: ['./platform/*', './extensions/*', './modes/*'],
|
||||||
|
presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
|
||||||
|
plugins: [
|
||||||
|
['@babel/plugin-proposal-class-properties', { loose: true }],
|
||||||
|
'@babel/plugin-transform-typescript',
|
||||||
|
['@babel/plugin-proposal-private-methods', { loose: true }],
|
||||||
|
'@babel/plugin-transform-class-static-block',
|
||||||
|
],
|
||||||
|
env: {
|
||||||
|
test: {
|
||||||
|
presets: [
|
||||||
|
[
|
||||||
|
// TODO: https://babeljs.io/blog/2019/03/19/7.4.0#migration-from-core-js-2
|
||||||
|
'@babel/preset-env',
|
||||||
|
{
|
||||||
|
modules: 'commonjs',
|
||||||
|
debug: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'@babel/preset-react',
|
||||||
|
'@babel/preset-typescript',
|
||||||
|
],
|
||||||
|
plugins: [
|
||||||
|
'@babel/plugin-proposal-object-rest-spread',
|
||||||
|
'@babel/plugin-syntax-dynamic-import',
|
||||||
|
'@babel/plugin-transform-regenerator',
|
||||||
|
'@babel/transform-destructuring',
|
||||||
|
'@babel/plugin-transform-runtime',
|
||||||
|
'@babel/plugin-transform-typescript',
|
||||||
|
'@babel/plugin-transform-class-static-block',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
production: {
|
||||||
|
presets: [
|
||||||
|
// WebPack handles ES6 --> Target Syntax
|
||||||
|
['@babel/preset-env', { modules: false }],
|
||||||
|
'@babel/preset-react',
|
||||||
|
'@babel/preset-typescript',
|
||||||
|
],
|
||||||
|
ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
|
||||||
|
},
|
||||||
|
development: {
|
||||||
|
presets: [
|
||||||
|
// WebPack handles ES6 --> Target Syntax
|
||||||
|
['@babel/preset-env', { modules: false }],
|
||||||
|
'@babel/preset-react',
|
||||||
|
'@babel/preset-typescript',
|
||||||
|
],
|
||||||
|
plugins: ['react-refresh/babel'],
|
||||||
|
ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -6,7 +6,7 @@
|
|||||||
"tailwind": {
|
"tailwind": {
|
||||||
"config": "tailwind.config.js",
|
"config": "tailwind.config.js",
|
||||||
"css": "src/tailwind.css",
|
"css": "src/tailwind.css",
|
||||||
"baseColor": "slate",
|
"baseColor": "neutral",
|
||||||
"cssVariables": true,
|
"cssVariables": true,
|
||||||
"prefix": ""
|
"prefix": ""
|
||||||
},
|
},
|
||||||
|
|||||||
@ -15,6 +15,7 @@
|
|||||||
"clean": "rm -rf node_modules/.cache/storybook && shx rm -rf dist",
|
"clean": "rm -rf node_modules/.cache/storybook && shx rm -rf dist",
|
||||||
"clean:deep": "yarn run clean && shx rm -rf node_modules",
|
"clean:deep": "yarn run clean && shx rm -rf node_modules",
|
||||||
"start": "yarn run build --watch",
|
"start": "yarn run build --watch",
|
||||||
|
"dev": "cross-env NODE_ENV=development webpack serve --config .webpack/webpack.playground.js",
|
||||||
"test": "echo \"Error: no test specified\" && exit 1",
|
"test": "echo \"Error: no test specified\" && exit 1",
|
||||||
"build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
|
"build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
|
||||||
"build:package": "yarn run build"
|
"build:package": "yarn run build"
|
||||||
@ -30,6 +31,7 @@
|
|||||||
"@radix-ui/react-icons": "^1.3.0",
|
"@radix-ui/react-icons": "^1.3.0",
|
||||||
"@radix-ui/react-popover": "^1.0.7",
|
"@radix-ui/react-popover": "^1.0.7",
|
||||||
"@radix-ui/react-slot": "^1.0.2",
|
"@radix-ui/react-slot": "^1.0.2",
|
||||||
|
"@radix-ui/react-tooltip": "^1.1.2",
|
||||||
"class-variance-authority": "^0.7.0",
|
"class-variance-authority": "^0.7.0",
|
||||||
"clsx": "*",
|
"clsx": "*",
|
||||||
"cmdk": "^1.0.0",
|
"cmdk": "^1.0.0",
|
||||||
|
|||||||
1
platform/ui-next/src/_pages/README.md
Normal file
1
platform/ui-next/src/_pages/README.md
Normal file
@ -0,0 +1 @@
|
|||||||
|
This is our playground for designing and developing the next generation of the platform's UI. You probably don't need to be here.
|
||||||
134
platform/ui-next/src/_pages/colors.tsx
Normal file
134
platform/ui-next/src/_pages/colors.tsx
Normal file
@ -0,0 +1,134 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { createRoot } from 'react-dom/client';
|
||||||
|
import '../tailwind.css';
|
||||||
|
|
||||||
|
function Colors() {
|
||||||
|
return (
|
||||||
|
<main>
|
||||||
|
<h2>Primary color</h2>
|
||||||
|
<div className="row">
|
||||||
|
<div className="example2">
|
||||||
|
<div className="bg-primary h-16 w-16 rounded"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="bg-primary/80 h-16 w-16 rounded"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="bg-primary/60 h-16 w-16 rounded"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="bg-primary/40 h-16 w-16 rounded"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="bg-primary/20 h-16 w-16 rounded"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="bg-infosecondary h-16 w-16 rounded"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="bg-highlight h-16 w-16 rounded"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="bg-highlight h-16 w-16 rounded"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="h-16 w-16 rounded bg-white"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="h-16 w-16 rounded bg-white"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="h-16 w-16 rounded bg-white"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>New colors</h2>
|
||||||
|
<div className="row">
|
||||||
|
<div className="example2">
|
||||||
|
<div className="bg-highlight h-16 w-16 rounded"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="bg-bkg-low h-16 w-16 rounded"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="bg-bkg-med h-16 w-16 rounded"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="bg-bkg-full h-16 w-16 rounded"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Core colors</h2>
|
||||||
|
<div className="row">
|
||||||
|
<div className="example2">
|
||||||
|
<div className="bg-background h-16 w-16 rounded"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="bg-foreground h-16 w-16 rounded"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="bg-card h-16 w-16 rounded"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="bg-card-foreground h-16 w-16 rounded"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="bg-popover h-16 w-16 rounded"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="bg-popover-foreground h-16 w-16 rounded"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="bg-primary h-16 w-16 rounded"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="bg-primary-foreground h-16 w-16 rounded"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="bg-secondary h-16 w-16 rounded"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="bg-secondary-foreground h-16 w-16 rounded"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="bg-muted h-16 w-16 rounded"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="bg-muted-foreground h-16 w-16 rounded"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="bg-accent h-16 w-16 rounded"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="bg-accent-foreground h-16 w-16 rounded"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="destructive h-16 w-16 rounded"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="destructive-foreground h-16 w-16 rounded"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="bg-border h-16 w-16 rounded"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Borders</h2>
|
||||||
|
<div className="row">
|
||||||
|
<div className="example2">
|
||||||
|
<div className="bg-border h-16 w-16 rounded"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="bg-input h-16 w-16 rounded"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="bg-ring h-16 w-16 rounded"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const container = document.getElementById('root');
|
||||||
|
const root = createRoot(container);
|
||||||
|
root.render(React.createElement(Colors));
|
||||||
34
platform/ui-next/src/_pages/index.tsx
Normal file
34
platform/ui-next/src/_pages/index.tsx
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { createRoot } from 'react-dom/client';
|
||||||
|
|
||||||
|
import '../tailwind.css';
|
||||||
|
|
||||||
|
const App: React.FC = () => (
|
||||||
|
<div className="container mx-auto p-4">
|
||||||
|
<h1 className="mb-4 text-2xl font-bold">Home Page</h1>
|
||||||
|
<nav className="space-x-4">
|
||||||
|
<a
|
||||||
|
href="playground.html"
|
||||||
|
className="text-blue-500 hover:text-blue-700"
|
||||||
|
>
|
||||||
|
Playground
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="viewer.html"
|
||||||
|
className="text-blue-500 hover:text-blue-700"
|
||||||
|
>
|
||||||
|
Viewer
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="colors.html"
|
||||||
|
className="text-blue-500 hover:text-blue-700"
|
||||||
|
>
|
||||||
|
Colors
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const container = document.getElementById('root');
|
||||||
|
const root = createRoot(container);
|
||||||
|
root.render(React.createElement(App));
|
||||||
185
platform/ui-next/src/_pages/playground.tsx
Normal file
185
platform/ui-next/src/_pages/playground.tsx
Normal file
@ -0,0 +1,185 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { createRoot } from 'react-dom/client';
|
||||||
|
import '../tailwind.css';
|
||||||
|
|
||||||
|
import { Button } from '../components/Button';
|
||||||
|
// import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '../components/Tooltip';
|
||||||
|
|
||||||
|
// import type { Metadata } from 'next';
|
||||||
|
// import Script from 'next/script';
|
||||||
|
// import BackgroundColorSelector from '@/components/backgroundcolor';
|
||||||
|
// import { useState, useEffect } from 'react';
|
||||||
|
// import { Inter } from 'next/font/google';
|
||||||
|
// import { ThemeProvider } from '@/components/themeprovider';
|
||||||
|
// import { Button2 } from '@/components/ui/button2';
|
||||||
|
// import { Switch } from '@/components/ui/switch';
|
||||||
|
// import { Slider } from '@/components/ui/slider';
|
||||||
|
// import { ScrollArea } from '@/components/ui/scroll-area';
|
||||||
|
// import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||||
|
// import { Separator } from '@/components/ui/separator';
|
||||||
|
// import { Toggle } from '@/components/ui/toggle';
|
||||||
|
// import { Checkbox } from '@/components/ui/checkbox';
|
||||||
|
// import {
|
||||||
|
// Select,
|
||||||
|
// SelectContent,
|
||||||
|
// SelectItem,
|
||||||
|
// SelectTrigger,
|
||||||
|
// SelectValue,
|
||||||
|
// } from '@/components/ui/select';
|
||||||
|
// import { Input } from '@/components/ui/input';
|
||||||
|
// import { Label } from '@/components/ui/label';
|
||||||
|
// import icons from '../../components/icons';
|
||||||
|
// import SegRow from '@/components/segrow';
|
||||||
|
|
||||||
|
export default function Playground() {
|
||||||
|
return (
|
||||||
|
<main>
|
||||||
|
{/* <BackgroundColorSelector /> */}
|
||||||
|
|
||||||
|
<h2>Button default</h2>
|
||||||
|
<div className="row">
|
||||||
|
<div className="example">
|
||||||
|
<Button
|
||||||
|
className=""
|
||||||
|
variant="default"
|
||||||
|
>
|
||||||
|
Primary Button
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="example">
|
||||||
|
<Button variant="secondary">Secondary Button</Button>
|
||||||
|
</div>
|
||||||
|
<div className="example">
|
||||||
|
<Button variant="ghost">Ghost Button</Button>
|
||||||
|
</div>
|
||||||
|
<div className="example">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
>
|
||||||
|
?
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="example">
|
||||||
|
<Button variant="link">Link</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Button small</h2>
|
||||||
|
<div className="row">
|
||||||
|
<div className="example">
|
||||||
|
<Button
|
||||||
|
className=""
|
||||||
|
variant="default"
|
||||||
|
size="sm"
|
||||||
|
>
|
||||||
|
Primary Button
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="example">
|
||||||
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
size="sm"
|
||||||
|
>
|
||||||
|
Secondary Button
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="example">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
>
|
||||||
|
Ghost Button
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="example">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
>
|
||||||
|
?
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="example">
|
||||||
|
<Button
|
||||||
|
variant="link"
|
||||||
|
size="sm"
|
||||||
|
>
|
||||||
|
Link
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Button large</h2>
|
||||||
|
<div className="row">
|
||||||
|
<div className="example">
|
||||||
|
<Button
|
||||||
|
className=""
|
||||||
|
variant="default"
|
||||||
|
size="lg"
|
||||||
|
>
|
||||||
|
Primary Button
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="example">
|
||||||
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
size="lg"
|
||||||
|
>
|
||||||
|
Secondary Button
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="example">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="lg"
|
||||||
|
>
|
||||||
|
Ghost Button
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="example">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
>
|
||||||
|
?
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="example">
|
||||||
|
<Button
|
||||||
|
variant="link"
|
||||||
|
size="lg"
|
||||||
|
>
|
||||||
|
Link
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Color swatches</h2>
|
||||||
|
<div className="row">
|
||||||
|
<div className="example2">
|
||||||
|
<div className="bg-actions h-16 w-16 rounded"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="bg-infosecondary h-16 w-16 rounded"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="bg-highlight h-16 w-16 rounded"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="h-16 w-16 rounded bg-white"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="h-16 w-16 rounded bg-white"></div>
|
||||||
|
</div>
|
||||||
|
<div className="example2">
|
||||||
|
<div className="h-16 w-16 rounded bg-white"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const container = document.getElementById('root');
|
||||||
|
const root = createRoot(container);
|
||||||
|
root.render(React.createElement(Playground));
|
||||||
17
platform/ui-next/src/_pages/viewer.tsx
Normal file
17
platform/ui-next/src/_pages/viewer.tsx
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { createRoot } from 'react-dom/client';
|
||||||
|
import '../tailwind.css';
|
||||||
|
|
||||||
|
// component imports
|
||||||
|
|
||||||
|
function Viewer() {
|
||||||
|
return (
|
||||||
|
<div className="h-full w-full">
|
||||||
|
<div className="text-3xl"> Viewer </div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const container = document.getElementById('root');
|
||||||
|
const root = createRoot(container);
|
||||||
|
root.render(React.createElement(Viewer));
|
||||||
@ -5,23 +5,23 @@ import { cva, type VariantProps } from 'class-variance-authority';
|
|||||||
import { cn } from '../../lib/utils';
|
import { cn } from '../../lib/utils';
|
||||||
|
|
||||||
const buttonVariants = cva(
|
const buttonVariants = cva(
|
||||||
'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
|
'inline-flex items-center justify-center whitespace-nowrap rounded text-base font-medium leading-tight transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
|
||||||
{
|
{
|
||||||
variants: {
|
variants: {
|
||||||
variant: {
|
variant: {
|
||||||
default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
|
default: 'bg-primary/60 text-primary-foreground hover:bg-primary/100',
|
||||||
destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
|
destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
|
||||||
outline:
|
outline:
|
||||||
'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
|
'border border-input bg-background hover:bg-primary/25 hover:text-accent-foreground',
|
||||||
secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
|
secondary: 'bg-primary/40 text-secondary-foreground hover:bg-primary/60',
|
||||||
ghost: 'hover:bg-accent hover:text-accent-foreground',
|
ghost: 'text-primary hover:bg-primary/25',
|
||||||
link: 'text-primary underline-offset-4 hover:underline',
|
link: 'text-primary underline-offset-4 hover:underline',
|
||||||
},
|
},
|
||||||
size: {
|
size: {
|
||||||
default: 'h-9 px-4 py-2',
|
default: 'h-7 px-2 py-2',
|
||||||
sm: 'h-8 rounded-md px-3 text-xs',
|
sm: 'h-6 rounded px-2',
|
||||||
lg: 'h-10 rounded-md px-8',
|
lg: 'h-9 rounded px-2',
|
||||||
icon: 'h-9 w-9',
|
icon: 'h-6 w-6',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
defaultVariants: {
|
defaultVariants: {
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
export { Button , buttonVariants} from "./Button"
|
export { Button, buttonVariants } from './Button';
|
||||||
|
|||||||
@ -25,7 +25,7 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
|
|||||||
month: 'space-y-4',
|
month: 'space-y-4',
|
||||||
caption: 'flex justify-between items-center px-2',
|
caption: 'flex justify-between items-center px-2',
|
||||||
|
|
||||||
caption_dropdowns: 'flex space-x-2',
|
caption_dropdowns: 'flex space-x-2 text-black',
|
||||||
caption_label: 'hidden',
|
caption_label: 'hidden',
|
||||||
nav: 'space-x-1 flex items-center',
|
nav: 'space-x-1 flex items-center',
|
||||||
table: 'w-full border-collapse space-y-1',
|
table: 'w-full border-collapse space-y-1',
|
||||||
@ -39,7 +39,7 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
|
|||||||
),
|
),
|
||||||
day_range_end: 'day-range-end',
|
day_range_end: 'day-range-end',
|
||||||
day_selected:
|
day_selected:
|
||||||
'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
|
'bg-primary/60 text-primary-foreground hover:bg-primary/80 hover:text-primary-foreground focus:bg-primary/80 focus:text-primary-foreground',
|
||||||
day_today: 'bg-accent text-accent-foreground',
|
day_today: 'bg-accent text-accent-foreground',
|
||||||
day_outside:
|
day_outside:
|
||||||
'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
|
'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
|
||||||
|
|||||||
@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef<
|
|||||||
align={align}
|
align={align}
|
||||||
sideOffset={sideOffset}
|
sideOffset={sideOffset}
|
||||||
className={cn(
|
className={cn(
|
||||||
'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none',
|
'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
|
|||||||
28
platform/ui-next/src/components/Tooltip/Tooltip.tsx
Normal file
28
platform/ui-next/src/components/Tooltip/Tooltip.tsx
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
||||||
|
|
||||||
|
import { cn } from '../../lib/utils';
|
||||||
|
|
||||||
|
const TooltipProvider = TooltipPrimitive.Provider;
|
||||||
|
|
||||||
|
const Tooltip = TooltipPrimitive.Root;
|
||||||
|
|
||||||
|
const TooltipTrigger = TooltipPrimitive.Trigger;
|
||||||
|
|
||||||
|
const TooltipContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof TooltipPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
|
||||||
|
>(({ className, sideOffset = 4, ...props }, ref) => (
|
||||||
|
<TooltipPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
sideOffset={sideOffset}
|
||||||
|
className={cn(
|
||||||
|
'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
|
||||||
|
|
||||||
|
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
|
||||||
3
platform/ui-next/src/components/Tooltip/index.ts
Normal file
3
platform/ui-next/src/components/Tooltip/index.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './Tooltip';
|
||||||
|
|
||||||
|
export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
|
||||||
@ -2,66 +2,229 @@
|
|||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
|
/* OHIF Theme */
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
:root {
|
:root {
|
||||||
--background: 0 0% 100%;
|
--highlight: 191 74% 63%;
|
||||||
--foreground: 222.2 84% 4.9%;
|
--background: 236 62% 5%;
|
||||||
|
--foreground: 0 0% 98%;
|
||||||
--card: 0 0% 100%;
|
--card: 236 62% 5%;
|
||||||
--card-foreground: 222.2 84% 4.9%;
|
--card-foreground: 0 0% 98%;
|
||||||
|
--popover: 236 62% 5%;
|
||||||
--popover: 0 0% 100%;
|
--popover-foreground: 0 0% 98%;
|
||||||
--popover-foreground: 222.2 84% 4.9%;
|
--primary: 214 98% 60%;
|
||||||
|
--primary-foreground: 0 0% 98%;
|
||||||
--primary: 222.2 47.4% 11.2%;
|
--secondary: 214 66% 48%;
|
||||||
--primary-foreground: 210 40% 98%;
|
--secondary-foreground: 0 0% 98%;
|
||||||
|
--muted: 234 64% 10%;
|
||||||
--secondary: 210 40% 96.1%;
|
--muted-foreground: 200 46 65%;
|
||||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
--accent: 214 67% 12%;
|
||||||
|
--accent-foreground: 0 0% 98%;
|
||||||
--muted: 210 40% 96.1%;
|
--destructive: 0 62.8% 30.6%;
|
||||||
--muted-foreground: 215.4 16.3% 46.9%;
|
--destructive-foreground: 0 0% 98%;
|
||||||
|
--border: 0 0% 14.9%;
|
||||||
--accent: 210 40% 96.1%;
|
--input: 236 45% 21%;
|
||||||
--accent-foreground: 222.2 47.4% 11.2%;
|
--ring: 214 98% 60%;
|
||||||
|
--chart-1: 220 70% 50%;
|
||||||
--destructive: 0 84.2% 60.2%;
|
--chart-2: 160 60% 45%;
|
||||||
--destructive-foreground: 210 40% 98%;
|
--chart-3: 30 80% 55%;
|
||||||
|
--chart-4: 280 65% 60%;
|
||||||
--border: 214.3 31.8% 91.4%;
|
--chart-5: 340 75% 55%;
|
||||||
--input: 214.3 31.8% 91.4%;
|
|
||||||
--ring: 222.2 84% 4.9%;
|
|
||||||
|
|
||||||
--radius: 0.5rem;
|
--radius: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark {
|
.dark {
|
||||||
--background: 222.2 84% 4.9%;
|
--background: 0 0% 3.9%;
|
||||||
--foreground: 210 40% 98%;
|
--foreground: 0 0% 98%;
|
||||||
|
--card: 0 0% 3.9%;
|
||||||
--card: 222.2 84% 4.9%;
|
--card-foreground: 0 0% 98%;
|
||||||
--card-foreground: 210 40% 98%;
|
--popover: 0 0% 3.9%;
|
||||||
|
--popover-foreground: 0 0% 98%;
|
||||||
--popover: 222.2 84% 4.9%;
|
--primary: 214 98% 60%;
|
||||||
--popover-foreground: 210 40% 98%;
|
--primary-foreground: 0 0% 98%;
|
||||||
|
--secondary: 0 0% 14.9%;
|
||||||
--primary: 210 40% 98%;
|
--secondary-foreground: 0 0% 98%;
|
||||||
--primary-foreground: 222.2 47.4% 11.2%;
|
--muted: 0 0% 14.9%;
|
||||||
|
--muted-foreground: 0 0% 63.9%;
|
||||||
--secondary: 217.2 32.6% 17.5%;
|
--accent: 0 0% 14.9%;
|
||||||
--secondary-foreground: 210 40% 98%;
|
--accent-foreground: 0 0% 98%;
|
||||||
|
|
||||||
--muted: 217.2 32.6% 17.5%;
|
|
||||||
--muted-foreground: 215 20.2% 65.1%;
|
|
||||||
|
|
||||||
--accent: 217.2 32.6% 17.5%;
|
|
||||||
--accent-foreground: 210 40% 98%;
|
|
||||||
|
|
||||||
--destructive: 0 62.8% 30.6%;
|
--destructive: 0 62.8% 30.6%;
|
||||||
--destructive-foreground: 210 40% 98%;
|
--destructive-foreground: 0 0% 98%;
|
||||||
|
--border: 0 0% 14.9%;
|
||||||
--border: 217.2 32.6% 17.5%;
|
--input: 236 45% 21%;
|
||||||
--input: 217.2 32.6% 17.5%;
|
--ring: 214 98% 60%;
|
||||||
--ring: 212.7 26.8% 83.9%;
|
--chart-1: 220 70% 50%;
|
||||||
|
--chart-2: 160 60% 45%;
|
||||||
|
--chart-3: 30 80% 55%;
|
||||||
|
--chart-4: 280 65% 60%;
|
||||||
|
--chart-5: 340 75% 55%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ORIGINAL THEME for comparison and testing
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
:root {
|
||||||
|
--background: 0 0% 100%;
|
||||||
|
--foreground: 240 10% 3.9%;
|
||||||
|
--card: 0 0% 100%;
|
||||||
|
--card-foreground: 240 10% 3.9%;
|
||||||
|
--popover: 0 0% 100%;
|
||||||
|
--popover-foreground: 240 10% 3.9%;
|
||||||
|
--primary: 240 5.9% 10%;
|
||||||
|
--primary-foreground: 0 0% 98%;
|
||||||
|
--secondary: 240 4.8% 95.9%;
|
||||||
|
--secondary-foreground: 240 5.9% 10%;
|
||||||
|
--muted: 240 4.8% 95.9%;
|
||||||
|
--muted-foreground: 240 3.8% 46.1%;
|
||||||
|
--accent: 240 4.8% 95.9%;
|
||||||
|
--accent-foreground: 240 5.9% 10%;
|
||||||
|
--destructive: 0 72.22% 50.59%;
|
||||||
|
--destructive-foreground: 0 0% 98%;
|
||||||
|
--border: 240 5.9% 90%;
|
||||||
|
--input: 240 5.9% 90%;
|
||||||
|
--ring: 240 5% 64.9%;
|
||||||
|
--radius: 0.5rem;
|
||||||
|
|
||||||
|
--chart-1: 12 76% 61%;
|
||||||
|
--chart-2: 173 58% 39%;
|
||||||
|
--chart-3: 197 37% 24%;
|
||||||
|
--chart-4: 43 74% 66%;
|
||||||
|
--chart-5: 27 87% 67%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
--background: 240 10% 3.9%;
|
||||||
|
--foreground: 0 0% 98%;
|
||||||
|
--card: 240 10% 3.9%;
|
||||||
|
--card-foreground: 0 0% 98%;
|
||||||
|
--popover: 240 10% 3.9%;
|
||||||
|
--popover-foreground: 0 0% 98%;
|
||||||
|
--primary: 0 0% 98%;
|
||||||
|
--primary-foreground: 240 5.9% 10%;
|
||||||
|
--secondary: 240 3.7% 15.9%;
|
||||||
|
--secondary-foreground: 0 0% 98%;
|
||||||
|
--muted: 240 3.7% 15.9%;
|
||||||
|
--muted-foreground: 240 5% 64.9%;
|
||||||
|
--accent: 240 3.7% 15.9%;
|
||||||
|
--accent-foreground: 0 0% 98%;
|
||||||
|
--destructive: 0 62.8% 30.6%;
|
||||||
|
--destructive-foreground: 0 85.7% 97.3%;
|
||||||
|
--border: 240 3.7% 15.9%;
|
||||||
|
--input: 240 3.7% 15.9%;
|
||||||
|
--ring: 240 4.9% 83.9%;
|
||||||
|
|
||||||
|
--chart-1: 220 70% 50%;
|
||||||
|
--chart-2: 160 60% 45%;
|
||||||
|
--chart-3: 30 80% 55%;
|
||||||
|
--chart-4: 280 65% 60%;
|
||||||
|
--chart-5: 340 75% 55%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Theme Copy Example
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
:root {
|
||||||
|
--background: 0 0% 100%;
|
||||||
|
--foreground: 224 71.4% 4.1%;
|
||||||
|
--card: 0 0% 100%;
|
||||||
|
--card-foreground: 224 71.4% 4.1%;
|
||||||
|
--popover: 0 0% 100%;
|
||||||
|
--popover-foreground: 224 71.4% 4.1%;
|
||||||
|
--primary: 262.1 83.3% 57.8%;
|
||||||
|
--primary-foreground: 210 20% 98%;
|
||||||
|
--secondary: 220 14.3% 95.9%;
|
||||||
|
--secondary-foreground: 220.9 39.3% 11%;
|
||||||
|
--muted: 220 14.3% 95.9%;
|
||||||
|
--muted-foreground: 220 8.9% 46.1%;
|
||||||
|
--accent: 220 14.3% 95.9%;
|
||||||
|
--accent-foreground: 220.9 39.3% 11%;
|
||||||
|
--destructive: 0 84.2% 60.2%;
|
||||||
|
--destructive-foreground: 210 20% 98%;
|
||||||
|
--border: 220 13% 91%;
|
||||||
|
--input: 220 13% 91%;
|
||||||
|
--ring: 262.1 83.3% 57.8%;
|
||||||
|
--radius: 0.5rem;
|
||||||
|
--chart-1: ;
|
||||||
|
--chart-2: ;
|
||||||
|
--chart-3: ;
|
||||||
|
--chart-4: ;
|
||||||
|
--chart-5: ;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
--background: 224 71.4% 4.1%;
|
||||||
|
--foreground: 210 20% 98%;
|
||||||
|
--card: 224 71.4% 4.1%;
|
||||||
|
--card-foreground: 210 20% 98%;
|
||||||
|
--popover: 224 71.4% 4.1%;
|
||||||
|
--popover-foreground: 210 20% 98%;
|
||||||
|
--primary: 263.4 70% 50.4%;
|
||||||
|
--primary-foreground: 210 20% 98%;
|
||||||
|
--secondary: 215 27.9% 16.9%;
|
||||||
|
--secondary-foreground: 210 20% 98%;
|
||||||
|
--muted: 215 27.9% 16.9%;
|
||||||
|
--muted-foreground: 217.9 10.6% 64.9%;
|
||||||
|
--accent: 215 27.9% 16.9%;
|
||||||
|
--accent-foreground: 210 20% 98%;
|
||||||
|
--destructive: 0 62.8% 30.6%;
|
||||||
|
--destructive-foreground: 210 20% 98%;
|
||||||
|
--border: 215 27.9% 16.9%;
|
||||||
|
--input: 215 27.9% 16.9%;
|
||||||
|
--ring: 263.4 70% 50.4%;
|
||||||
|
--chart-1: ;
|
||||||
|
--chart-2: ;
|
||||||
|
--chart-3: ;
|
||||||
|
--chart-4: ;
|
||||||
|
--chart-5: ;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
* {
|
||||||
|
@apply border-border;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
@apply bg-background text-foreground text-base;
|
||||||
|
}
|
||||||
|
main {
|
||||||
|
@apply my-4 mx-auto max-w-6xl py-6;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
@apply py-4 text-5xl font-semibold;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
@apply py-4 text-4xl font-semibold;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
@apply py-3 text-xl font-normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer utilities {
|
||||||
|
.row {
|
||||||
|
@apply mb-6 flex flex-row flex-wrap rounded-md border py-10;
|
||||||
|
}
|
||||||
|
.example {
|
||||||
|
@apply flex-initial px-6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example2 {
|
||||||
|
@apply flex-initial px-4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Additional CSS edits to components */
|
||||||
|
|
||||||
|
/* Tooltip */
|
||||||
|
|
||||||
|
.TooltipContent[data-side='bottom'] {
|
||||||
|
animation-name: slideDown;
|
||||||
|
}
|
||||||
|
|||||||
@ -11,6 +11,7 @@ module.exports = {
|
|||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
colors: {
|
colors: {
|
||||||
|
highlight: 'hsl(var(--highlight))',
|
||||||
border: 'hsl(var(--border))',
|
border: 'hsl(var(--border))',
|
||||||
input: 'hsl(var(--input))',
|
input: 'hsl(var(--input))',
|
||||||
ring: 'hsl(var(--ring))',
|
ring: 'hsl(var(--ring))',
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user