mirror of
https://github.com/dbeaver/cloudbeaver.git
synced 2026-09-24 16:04:36 +08:00
87 create checkbox component (#3294)
* refactor: remove --dbv-kit-color-text variable in favor of --dbv-kit-color-foreground, add --dbv-kit-control-disabled-opacity to use for all controls, remove --dbv-kit-btn-disabled-opacity, update docs
* refactor: add ControlSize type
* feat: create checkbox component
* docs: add checkbox stories, update button docs
* refactor: polish checkbox component, added some vars, add docs, change some defaults
* feat: add indeterminate state
* fix: prioritize check prop over inner state
* fix: button styles layer
* fix: comments
* fix: change checkbox checked style
* Revert "fix: change checkbox checked style"
This reverts commit eba1e21eb9.
---------
Co-authored-by: Wroud <wrouds@gmail.com>
Co-authored-by: mr-anton-t <42037741+mr-anton-t@users.noreply.github.com>
This commit is contained in:
Sychev Andrey
co-authored by
Wroud
mr-anton-t
Wroud
mr-anton-t
parent
254da45290
commit
c532298eba
@@ -2,7 +2,7 @@
|
||||
|
||||
@layer theme {
|
||||
main {
|
||||
color: var(--dbv-kit-color-text);
|
||||
color: var(--dbv-kit-color-foreground);
|
||||
background-color: var(--tw-color-gray-50);
|
||||
}
|
||||
|
||||
@@ -75,10 +75,17 @@
|
||||
.comment {
|
||||
color: var(--tw-color-gray-500);
|
||||
}
|
||||
|
||||
.color-sample {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
border-radius: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] {
|
||||
--dbv-kit-color-text: var(--tw-color-gray-200);
|
||||
--dbv-kit-color-foreground: var(--tw-color-gray-200);
|
||||
--dbv-kit-btn-loader-base-color: var(--tw-color-gray-900);
|
||||
|
||||
/* Primary Button */
|
||||
@@ -100,6 +107,12 @@
|
||||
--dbv-kit-btn-danger-background-hover: var(--tw-color-red-600);
|
||||
--dbv-kit-btn-danger-background-active: var(--tw-color-red-500);
|
||||
|
||||
/* Input */
|
||||
--dbv-kit-input-background: var(--tw-color-gray-800);
|
||||
--dbv-kit-input-border-color: var(--tw-color-gray-700);
|
||||
--dbv-kit-input-color: var(--tw-color-gray-100);
|
||||
--dbv-kit-input-placeholder-foreground: var(--tw-color-gray-400);
|
||||
|
||||
main {
|
||||
background-color: var(--tw-color-gray-900);
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
@import './_sizes.css';
|
||||
@import './_variants.css';
|
||||
|
||||
@layer components {
|
||||
@layer base {
|
||||
.dbv-kit-button {
|
||||
display: inline-flex;
|
||||
text-align: center;
|
||||
@@ -31,7 +31,8 @@
|
||||
|
||||
&:focus-visible,
|
||||
&[data-focus-visible] {
|
||||
outline: var(--dbv-kit-control-outline-width) solid var(--dbv-kit-color-outline);
|
||||
outline: var(--dbv-kit-control-outline-width) solid var(--dbv-kit-btn-outline-color);
|
||||
outline-offset: var(--dbv-kit-btn-outline-offset);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@@ -46,7 +47,7 @@
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: var(--dbv-kit-btn-disabled-opacity);
|
||||
opacity: var(--dbv-kit-control-disabled-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -121,6 +122,7 @@
|
||||
|
||||
--dbv-kit-btn-loader-color: var(--dbv-kit-btn-danger-background);
|
||||
--dbv-kit-btn-loader-background: var(--dbv-kit-btn-loader-base-color);
|
||||
--dbv-kit-btn-outline-color: var(--dbv-kit-btn-danger-color-outline);
|
||||
}
|
||||
|
||||
/* ---------------------------- */
|
||||
|
||||
@@ -7,10 +7,11 @@
|
||||
*/
|
||||
import { Button as AriaButton, type ButtonProps as AriaKitButtonProps } from '@ariakit/react';
|
||||
import './Button.css';
|
||||
import type { ControlSize } from '../types/controls.js';
|
||||
|
||||
export interface ButtonProps extends Omit<AriaKitButtonProps, 'clickOnEnter' | 'clickOnSpace'> {
|
||||
variant?: 'primary' | 'secondary' | 'danger';
|
||||
size?: 'small' | 'medium' | 'large' | 'xlarge';
|
||||
size?: ControlSize;
|
||||
loading?: boolean;
|
||||
loader?: React.ReactNode;
|
||||
}
|
||||
|
||||
@@ -3,17 +3,22 @@
|
||||
--dbv-kit-btn-height: var(--dbv-kit-control-height-medium);
|
||||
--dbv-kit-btn-padding-inline: calc(var(--tw-spacing) * 2.5);
|
||||
--dbv-kit-btn-gap: calc(var(--dbv-kit-btn-padding-inline) / 4);
|
||||
--dbv-kit-btn-outline-offset: var(--dbv-kit-outline-offset);
|
||||
|
||||
--dbv-kit-btn-foreground: var(--tw-color-white);
|
||||
--dbv-kit-btn-background: var(--dbv-kit-color-primary-600);
|
||||
--dbv-kit-btn-background-hover: var(--dbv-kit-color-primary-700);
|
||||
--dbv-kit-btn-background-active: var(--dbv-kit-color-primary-800);
|
||||
--dbv-kit-btn-outline-color: var(--dbv-kit-color-outline);
|
||||
|
||||
--dbv-kit-btn-border-width: var(--dbv-kit-control-border-width);
|
||||
--dbv-kit-btn-border-color: transparent;
|
||||
--dbv-kit-btn-border-style: solid;
|
||||
--dbv-kit-btn-border-radius: var(--dbv-kit-control-border-radius);
|
||||
|
||||
--dbv-kit-btn-font-weight: var(--tw-font-weight-normal);
|
||||
--dbv-kit-btn-font-size: calc(var(--dbv-kit-font-size-base) * 0.875);
|
||||
--dbv-kit-btn-disabled-opacity: 0.5;
|
||||
|
||||
--dbv-kit-btn-loader-base-color: var(--tw-color-white);
|
||||
--dbv-kit-btn-loader-animation: var(--tw-animate-spin);
|
||||
}
|
||||
|
||||
@@ -18,5 +18,6 @@
|
||||
--dbv-kit-btn-danger-background: var(--tw-color-red-600);
|
||||
--dbv-kit-btn-danger-background-hover: var(--tw-color-red-700);
|
||||
--dbv-kit-btn-danger-background-active: var(--tw-color-red-800);
|
||||
--dbv-kit-btn-danger-color-outline: var(--tw-color-red-300);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,98 @@
|
||||
@import './_base.css';
|
||||
@import './_sizes.css';
|
||||
|
||||
@layer base {
|
||||
.dbv-kit-checkbox {
|
||||
display: inline-flex;
|
||||
user-select: none;
|
||||
align-items: start;
|
||||
min-height: var(--dbv-kit-checkbox-height);
|
||||
gap: var(--dbv-kit-checkbox-gap);
|
||||
line-height: var(--dbv-kit-checkbox-height);
|
||||
font-size: var(--dbv-kit-checkbox-font-size);
|
||||
color: var(--dbv-kit-checkbox-foreground);
|
||||
outline: var(--dbv-kit-color-outline);
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
||||
.dbv-kit-checkbox__check {
|
||||
border-color: var(--dbv-kit-checkbox-border-color-checked);
|
||||
box-shadow: 0 0 0 2px var(--dbv-kit-checkbox-hover-shadow-color);
|
||||
}
|
||||
}
|
||||
|
||||
&[data-checked='true'] {
|
||||
border-color: var(--dbv-kit-checkbox-border-color-checked);
|
||||
}
|
||||
|
||||
&[data-disabled='true'] {
|
||||
pointer-events: none;
|
||||
opacity: var(--dbv-kit-control-disabled-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
.dbv-kit-checkbox__check {
|
||||
margin-top: calc(var(--dbv-kit-checkbox-height) * (calc(1 - var(--dbv-kit-checkbox-check-size)) / 2));
|
||||
height: calc(var(--dbv-kit-checkbox-height) * var(--dbv-kit-checkbox-check-size));
|
||||
line-height: calc(var(--dbv-kit-checkbox-height) * var(--dbv-kit-checkbox-check-size));
|
||||
width: calc(var(--dbv-kit-checkbox-height) * var(--dbv-kit-checkbox-check-size));
|
||||
min-width: calc(var(--dbv-kit-checkbox-height) * var(--dbv-kit-checkbox-check-size));
|
||||
border-radius: var(--dbv-kit-checkbox-border-radius);
|
||||
background-color: var(--dbv-kit-checkbox-background);
|
||||
border-color: var(--dbv-kit-checkbox-border-color);
|
||||
border-width: var(--dbv-kit-checkbox-border-width);
|
||||
border-style: var(--dbv-kit-checkbox-border-style);
|
||||
color: var(--dbv-kit-checkbox-icon-color);
|
||||
outline-offset: var(--dbv-kit-outline-offset);
|
||||
outline-width: var(--dbv-kit-control-outline-width);
|
||||
outline-color: var(--dbv-kit-color-outline);
|
||||
transition-property: stroke-dashoffset;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
stroke-dasharray: 20;
|
||||
stroke-dashoffset: 20;
|
||||
|
||||
&[data-focus-visible] {
|
||||
outline-style: solid;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--dbv-kit-checkbox-border-color-checked);
|
||||
}
|
||||
|
||||
&[data-checked='true'],
|
||||
&[data-indeterminate='true'] {
|
||||
background-color: var(--dbv-kit-checkbox-background-checked);
|
||||
border-color: var(--dbv-kit-checkbox-border-color-checked);
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------- */
|
||||
/* Sizes */
|
||||
|
||||
.dbv-kit-checkbox--small {
|
||||
--dbv-kit-checkbox-font-size: var(--dbv-kit-checkbox-small-font-size);
|
||||
--dbv-kit-checkbox-height: var(--dbv-kit-checkbox-small-height);
|
||||
--dbv-kit-checkbox-gap: var(--dbv-kit-checkbox-small-gap);
|
||||
}
|
||||
|
||||
.dbv-kit-checkbox--medium {
|
||||
--dbv-kit-checkbox-font-size: var(--dbv-kit-checkbox-medium-font-size);
|
||||
--dbv-kit-checkbox-height: var(--dbv-kit-checkbox-medium-height);
|
||||
--dbv-kit-checkbox-gap: var(--dbv-kit-checkbox-medium-gap);
|
||||
}
|
||||
|
||||
.dbv-kit-checkbox--large {
|
||||
--dbv-kit-checkbox-font-size: var(--dbv-kit-checkbox-large-font-size);
|
||||
--dbv-kit-checkbox-height: var(--dbv-kit-checkbox-large-height);
|
||||
--dbv-kit-checkbox-gap: var(--dbv-kit-checkbox-large-gap);
|
||||
}
|
||||
|
||||
.dbv-kit-checkbox--xlarge {
|
||||
--dbv-kit-checkbox-font-size: var(--dbv-kit-checkbox-xlarge-font-size);
|
||||
--dbv-kit-checkbox-height: var(--dbv-kit-checkbox-xlarge-height);
|
||||
--dbv-kit-checkbox-gap: var(--dbv-kit-checkbox-xlarge-gap);
|
||||
}
|
||||
}
|
||||
@@ -6,15 +6,66 @@
|
||||
* you may not use this file except in compliance with the License.
|
||||
*/
|
||||
|
||||
import { Checkbox as AriaCheckbox, type CheckboxProps as AriaKitCheckboxProps } from '@ariakit/react';
|
||||
import { Checkbox as AriaCheckbox, VisuallyHidden, type CheckboxProps as AriaKitCheckboxProps } from '@ariakit/react';
|
||||
import { useState } from 'react';
|
||||
import './Checkbox.css';
|
||||
import type { ControlSize } from '../types/controls.js';
|
||||
|
||||
export interface CheckboxProps extends AriaKitCheckboxProps {}
|
||||
export interface CheckboxProps extends Omit<AriaKitCheckboxProps, 'render' | 'size'> {
|
||||
size?: ControlSize;
|
||||
icon?: React.ReactNode;
|
||||
indeterminate?: boolean;
|
||||
indeterminateIcon?: React.ReactNode;
|
||||
}
|
||||
|
||||
export function Checkbox({ children, ...props }: CheckboxProps) {
|
||||
export function Checkbox({ children, className, icon, indeterminate, indeterminateIcon, size = 'medium', ...props }: CheckboxProps) {
|
||||
const [innerChecked, setInnerChecked] = useState(props.defaultChecked ?? false);
|
||||
const checked = props.checked ?? innerChecked;
|
||||
|
||||
const [focusVisible, setFocusVisible] = useState(false);
|
||||
return (
|
||||
<label className="dbv-kit-checkbox-label">
|
||||
<AriaCheckbox {...props} />
|
||||
{children}
|
||||
<label
|
||||
className={`dbv-kit-checkbox dbv-kit-checkbox--${size}` + (className ? ` ${className}` : '')}
|
||||
data-disabled={props.disabled || undefined}
|
||||
data-checked={checked}
|
||||
data-focus-visible={focusVisible || undefined}
|
||||
>
|
||||
<VisuallyHidden>
|
||||
<AriaCheckbox
|
||||
{...props}
|
||||
className="dbv-kit-checkbox__input"
|
||||
clickOnEnter
|
||||
onFocusVisible={() => setFocusVisible(true)}
|
||||
onBlur={() => setFocusVisible(false)}
|
||||
onChange={event => {
|
||||
setInnerChecked(event.target.checked);
|
||||
props.onChange?.(event);
|
||||
}}
|
||||
/>
|
||||
</VisuallyHidden>
|
||||
|
||||
<div
|
||||
className="dbv-kit-checkbox__check"
|
||||
data-indeterminate={indeterminate}
|
||||
data-checked={checked}
|
||||
data-focus-visible={focusVisible || undefined}
|
||||
>
|
||||
{checked &&
|
||||
(icon ?? (
|
||||
<svg fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 16 16">
|
||||
<polyline points="3,7 7,11 13,4" />
|
||||
</svg>
|
||||
))}
|
||||
{indeterminate &&
|
||||
!checked &&
|
||||
(indeterminateIcon ?? (
|
||||
<svg fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 16 16">
|
||||
<line x1="3" y1="8" x2="13" y2="8" />
|
||||
</svg>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<span className="dbv-kit-checkbox__text">{children}</span>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
@layer base {
|
||||
:root {
|
||||
/* Checkbox sizes */
|
||||
--dbv-kit-checkbox-height: var(--dbv-kit-control-height-medium);
|
||||
--dbv-kit-checkbox-gap: calc(var(--tw-spacing) * 1.25);
|
||||
--dbv-kit-checkbox-check-size: 0.75;
|
||||
|
||||
/* Checkbox colors */
|
||||
--dbv-kit-checkbox-foreground: var(--tw-color-black);
|
||||
--dbv-kit-checkbox-background: transparent;
|
||||
--dbv-kit-checkbox-background-checked: var(--dbv-kit-color-primary-600);
|
||||
--dbv-kit-checkbox-background-active: var(--dbv-kit-color-primary-800);
|
||||
|
||||
--dbv-kit-checkbox-hover-shadow-color: var(--dbv-kit-color-primary-100);
|
||||
--dbv-kit-checkbox-icon-color: var(--tw-color-white);
|
||||
|
||||
/* Checkbox border */
|
||||
--dbv-kit-checkbox-border-width: var(--dbv-kit-control-border-width);
|
||||
--dbv-kit-checkbox-border-radius: var(--dbv-kit-control-border-radius);
|
||||
--dbv-kit-checkbox-border-style: solid;
|
||||
--dbv-kit-checkbox-border-color: var(--tw-color-gray-300);
|
||||
--dbv-kit-checkbox-border-color-checked: var(--dbv-kit-color-primary-600);
|
||||
|
||||
/* Checkbox label font */
|
||||
--dbv-kit-checkbox-font-weight: var(--tw-font-weight-normal);
|
||||
--dbv-kit-checkbox-font-size: var(--dbv-kit-font-size-base);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
@layer base {
|
||||
:root {
|
||||
/* Small checkbox */
|
||||
--dbv-kit-checkbox-small-font-size: calc(var(--dbv-kit-checkbox-font-size) * 0.875);
|
||||
--dbv-kit-checkbox-small-height: calc(var(--dbv-kit-control-height-small) * 0.875);
|
||||
--dbv-kit-checkbox-small-gap: calc(var(--dbv-kit-checkbox-gap) * 0.5);
|
||||
|
||||
/* Medium checkbox */
|
||||
--dbv-kit-checkbox-medium-font-size: var(--dbv-kit-checkbox-font-size);
|
||||
--dbv-kit-checkbox-medium-height: calc(var(--dbv-kit-control-height-medium) * 0.75);
|
||||
--dbv-kit-checkbox-medium-gap: var(--dbv-kit-checkbox-gap);
|
||||
|
||||
/* Large checkbox */
|
||||
--dbv-kit-checkbox-large-font-size: calc(var(--dbv-kit-checkbox-font-size) * 1.125);
|
||||
--dbv-kit-checkbox-large-height: calc(var(--dbv-kit-control-height-large) * 0.75);
|
||||
--dbv-kit-checkbox-large-gap: calc(var(--dbv-kit-checkbox-gap) * 1.25);
|
||||
|
||||
/* Extra large checkbox */
|
||||
--dbv-kit-checkbox-xlarge-font-size: calc(var(--dbv-kit-checkbox-font-size) * 1.25);
|
||||
--dbv-kit-checkbox-xlarge-height: calc(var(--dbv-kit-control-height-xlarge) * 0.75);
|
||||
--dbv-kit-checkbox-xlarge-gap: calc(var(--dbv-kit-checkbox-gap) * 1.5);
|
||||
}
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
/*
|
||||
* CloudBeaver - Cloud Database Manager
|
||||
* Copyright (C) 2020-2025 DBeaver Corp and others
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0.
|
||||
* you may not use this file except in compliance with the License.
|
||||
*/
|
||||
|
||||
import { Checkbox } from './Checkbox.js';
|
||||
|
||||
export const CheckboxStory = () => <Checkbox> Checkbox </Checkbox>;
|
||||
@@ -28,6 +28,12 @@
|
||||
&::placeholder {
|
||||
color: var(--dbv-kit-input-placeholder-foreground);
|
||||
}
|
||||
|
||||
&:focus-visible,
|
||||
&[data-focus-visible] {
|
||||
outline: var(--dbv-kit-control-outline-width) solid var(--dbv-kit-color-outline);
|
||||
outline-offset: var(--dbv-kit-outline-offset);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------- */
|
||||
|
||||
@@ -6,13 +6,13 @@
|
||||
--dbv-kit-input-border-color: var(--tw-color-gray-300);
|
||||
--dbv-kit-input-border-width: var(--dbv-kit-control-border-width);
|
||||
--dbv-kit-input-border-style: solid;
|
||||
--dbv-kit-input-foreground: var(--dbv-kit-color-text);
|
||||
--dbv-kit-input-foreground: var(--dbv-kit-color-foreground);
|
||||
--dbv-kit-input-height: var(--dbv-kit-control-height-medium);
|
||||
--dbv-kit-input-padding: calc(var(--tw-spacing) * 1.1);
|
||||
--dbv-kit-input-placeholder-foreground: var(--tw-color-gray-500);
|
||||
--dbv-kit-input-option-active-background: var(--dbv-kit-color-primary-200);
|
||||
--dbv-kit-input-option-active-border: var(--dbv-kit-color-primary-500);
|
||||
--dbv-kit-input-option-active-foreground: var(--dbv-kit-color-text);
|
||||
--dbv-kit-input-option-active-foreground: var(--dbv-kit-color-foreground);
|
||||
--dbv-kit-input-option-hover-background: var(--dbv-kit-color-primary-100);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,9 +4,14 @@
|
||||
:root {
|
||||
/* General */
|
||||
--dbv-kit-font-size-base: 1rem;
|
||||
--dbv-kit-control-border-radius: var(--tw-radius-md);
|
||||
--dbv-kit-control-border-radius: var(--tw-radius-sm);
|
||||
--dbv-kit-control-border-width: 1px;
|
||||
--dbv-kit-control-disabled-opacity: 0.5;
|
||||
|
||||
/* Outline */
|
||||
--dbv-kit-color-outline: var(--tw-color-blue-500);
|
||||
--dbv-kit-control-outline-width: 2px;
|
||||
--dbv-kit-outline-offset: 1px;
|
||||
|
||||
/* Sizes */
|
||||
--dbv-kit-control-height-base: 2rem;
|
||||
@@ -19,9 +24,6 @@
|
||||
--dbv-kit-color-foreground: var(--tw-color-gray-900);
|
||||
--dbv-kit-color-background: var(--tw-color-gray-50);
|
||||
|
||||
--dbv-kit-color-text: var(--tw-color-gray-900);
|
||||
--dbv-kit-color-outline: var(--tw-color-yellow-600);
|
||||
|
||||
--dbv-kit-color-primary-50: var(--tw-color-blue-50);
|
||||
--dbv-kit-color-primary-100: var(--tw-color-blue-100);
|
||||
--dbv-kit-color-primary-200: var(--tw-color-blue-200);
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
export const ButtonTokens = () => {
|
||||
export const Tokens = () => {
|
||||
return (
|
||||
<div className="tw:p-4 tw:my-4">
|
||||
<h1 className="tw:text-2xl tw:font-bold">Button CSS Tokens</h1>
|
||||
<p className="tw:text-base">This UI kit uses several CSS tokens to style buttons.</p>
|
||||
<h2 className="tw:text-xl tw:font-semibold">Common buttons tokens</h2>
|
||||
<div className="tw:my-4">
|
||||
<h1>Button CSS Tokens</h1>
|
||||
<p>This UI kit uses several CSS tokens to style buttons.</p>
|
||||
<h2>Common buttons tokens</h2>
|
||||
<section className="tw:my-4">
|
||||
<h3>Size and space</h3>
|
||||
<div>
|
||||
<code>--dbv-kit-btn-height:</code> var(--dbv-kit-control-height-medium); <span className="comment"> Default button height</span>
|
||||
</div>
|
||||
@@ -16,6 +17,10 @@ export const ButtonTokens = () => {
|
||||
<code>--dbv-kit-btn-gap:</code> calc(var(--dbv-kit-btn-padding-inline) /4);{' '}
|
||||
<span className="comment"> Gap between button elements (mostly text and icon) </span>
|
||||
</div>
|
||||
<div>
|
||||
<code>--dbv-kit-btn-outline-offset:</code> 1px; <span className="comment"> Button outline offset</span>
|
||||
</div>
|
||||
<h3>Basic colors</h3>
|
||||
<div>
|
||||
<code>--dbv-kit-btn-foreground:</code> var(--color-white); <span className="comment"> Default button text color</span>
|
||||
</div>
|
||||
@@ -30,9 +35,11 @@ export const ButtonTokens = () => {
|
||||
<code>--dbv-kit-btn-background-active:</code> var(--dbv-kit-color-primary-800);{' '}
|
||||
<span className="comment"> Button active background color</span>
|
||||
</div>
|
||||
<h3>Border</h3>
|
||||
<div>
|
||||
<code>--dbv-kit-btn-border-width:</code> 1px; <span className="comment"> Button border width</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<code>--dbv-kit-btn-border-color:</code> transparent; --dbv-kit-btn-border-style: solid;{' '}
|
||||
<span className="comment"> Button border color and style</span>
|
||||
@@ -40,6 +47,7 @@ export const ButtonTokens = () => {
|
||||
<div>
|
||||
<code>--dbv-kit-btn-border-radius:</code> var(--radius-md); <span className="comment"> Button border radius</span>
|
||||
</div>
|
||||
<h3>Font</h3>
|
||||
<div>
|
||||
<code>--dbv-kit-btn-font-weight:</code> var(--font-weight-normal); <span className="comment"> Button font weight</span>
|
||||
</div>
|
||||
@@ -47,9 +55,8 @@ export const ButtonTokens = () => {
|
||||
<code>--dbv-kit-btn-font-size:</code> calc(var(--dbv-kit-font-size-base) * 0.875);{' '}
|
||||
<span className="comment"> Button font size, default for medium-sized button, other sizes calculated based on that value</span>
|
||||
</div>
|
||||
<div>
|
||||
<code>--dbv-kit-btn-disabled-opacity:</code> 0.5; <span className="comment"> Button opacity when disabled</span>
|
||||
</div>
|
||||
|
||||
<h3>Loader</h3>
|
||||
<div>
|
||||
<code>--dbv-kit-btn-loader-base-color:</code> var(--tw-color-white);{' '}
|
||||
<span className="comment">
|
||||
@@ -61,129 +68,101 @@ export const ButtonTokens = () => {
|
||||
<div>
|
||||
<code>--dbv-kit-btn-loader-animation:</code> var(--animate-spin); <span className="comment"> Button loader animation</span>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Others</h3>
|
||||
<div>
|
||||
<code>--dbv-kit-btn-disabled-opacity:</code> 0.5; <span className="comment"> Button opacity when disabled</span>
|
||||
</div>
|
||||
</section>
|
||||
<div className="tw:my-4">
|
||||
<h2 className="tw:text-xl tw:font-semibold">Specific buttons tokens</h2>
|
||||
<h3 className="tw:text-lg tw:font-semibold">Button Sizes</h3>
|
||||
<p className="tw:text-base">
|
||||
<h2>Specific buttons tokens</h2>
|
||||
<h3>Button Sizes</h3>
|
||||
<p>
|
||||
The <code>--dbv-kit-btn-*-height</code> tokens are used to define the height of buttons for different size variants. Default buttons use{' '}
|
||||
<code>--control-height-*</code> variable as the base height.
|
||||
</p>
|
||||
<p className="tw:text-base" style={{ height: 'var(--dbv-kit-btn-small-height)' }}>
|
||||
<p style={{ height: 'var(--dbv-kit-btn-small-height)' }}>
|
||||
Small button height: <code>--dbv-kit-btn-small-height</code>
|
||||
</p>
|
||||
<p className="tw:text-base" style={{ height: 'var(--dbv-kit-btn-medium-height)' }}>
|
||||
<p style={{ height: 'var(--dbv-kit-btn-medium-height)' }}>
|
||||
Medium button height: <code>--dbv-kit-btn-medium-height</code>
|
||||
</p>
|
||||
<p className="tw:text-base" style={{ height: 'var(--dbv-kit-btn-large-height)' }}>
|
||||
<p style={{ height: 'var(--dbv-kit-btn-large-height)' }}>
|
||||
Large button height: <code>--dbv-kit-btn-large-height</code>
|
||||
</p>
|
||||
<p className="tw:text-base" style={{ height: 'var(--dbv-kit-btn-xlarge-height)' }}>
|
||||
<p style={{ height: 'var(--dbv-kit-btn-xlarge-height)' }}>
|
||||
Extra large button height: <code>--dbv-kit-btn-xlarge-height</code>
|
||||
</p>
|
||||
</div>
|
||||
<div className="tw:my-4">
|
||||
<h3 className="tw:text-lg tw:font-semibold">Button Padding</h3>
|
||||
<p className="tw:text-base">
|
||||
<h3>Button Padding</h3>
|
||||
<p>
|
||||
The <code>--dbv-kit-btn-*-padding-inline</code> tokens are used to define the padding of buttons for different size variants.
|
||||
</p>
|
||||
<p className="tw:text-base">
|
||||
<p>
|
||||
Small button padding: <code>--dbv-kit-btn-small-padding-inline</code>
|
||||
</p>
|
||||
<p className="tw:text-base">
|
||||
<p>
|
||||
Medium button padding: <code>--dbv-kit-btn-medium-padding-inline</code>
|
||||
</p>
|
||||
<p className="tw:text-base">
|
||||
<p>
|
||||
Large button padding: <code>--dbv-kit-btn-large-padding-inline</code>
|
||||
</p>
|
||||
<p className="tw:text-base">
|
||||
<p>
|
||||
Extra large button padding: <code>--dbv-kit-btn-xlarge-padding-inline</code>
|
||||
</p>
|
||||
</div>
|
||||
<div className="tw:my-4">
|
||||
<h3 className="tw:text-lg tw:font-semibold">Button Colors</h3>
|
||||
<p
|
||||
className="tw:text-base"
|
||||
style={{ backgroundColor: 'var(--dbv-kit-btn-primary-background)', color: 'var(--dbv-kit-btn-primary-foreground)' }}
|
||||
>
|
||||
<h3>Button Colors</h3>
|
||||
<p style={{ backgroundColor: 'var(--dbv-kit-btn-primary-background)', color: 'var(--dbv-kit-btn-primary-foreground)' }}>
|
||||
Primary button background: <code>--dbv-kit-btn-primary-background</code>
|
||||
</p>
|
||||
<p
|
||||
className="tw:text-base"
|
||||
style={{ backgroundColor: 'var(--dbv-kit-btn-primary-background-hover)', color: 'var(--dbv-kit-btn-primary-foreground)' }}
|
||||
>
|
||||
<p style={{ backgroundColor: 'var(--dbv-kit-btn-primary-background-hover)', color: 'var(--dbv-kit-btn-primary-foreground)' }}>
|
||||
Primary button background (hover): <code>--dbv-kit-btn-primary-background-hover</code>
|
||||
</p>
|
||||
<p
|
||||
className="tw:text-base"
|
||||
style={{ backgroundColor: 'var(--dbv-kit-btn-primary-background-active)', color: 'var(--dbv-kit-btn-primary-foreground)' }}
|
||||
>
|
||||
<p style={{ backgroundColor: 'var(--dbv-kit-btn-primary-background-active)', color: 'var(--dbv-kit-btn-primary-foreground)' }}>
|
||||
Primary button background (active): <code>--dbv-kit-btn-primary-background-active</code>
|
||||
</p>
|
||||
<p
|
||||
className="tw:text-base"
|
||||
style={{ backgroundColor: 'var(--dbv-kit-btn-secondary-background)', color: 'var(--dbv-kit-btn-secondary-foreground)' }}
|
||||
>
|
||||
<p style={{ backgroundColor: 'var(--dbv-kit-btn-secondary-background)', color: 'var(--dbv-kit-btn-secondary-foreground)' }}>
|
||||
Secondary button background: <code>--dbv-kit-btn-secondary-background</code>
|
||||
</p>
|
||||
<p
|
||||
className="tw:text-base"
|
||||
style={{ backgroundColor: 'var(--dbv-kit-btn-secondary-background-hover)', color: 'var(--dbv-kit-btn-secondary-foreground)' }}
|
||||
>
|
||||
<p style={{ backgroundColor: 'var(--dbv-kit-btn-secondary-background-hover)', color: 'var(--dbv-kit-btn-secondary-foreground)' }}>
|
||||
Secondary button background (hover): <code>--dbv-kit-btn-secondary-background-hover</code>
|
||||
</p>
|
||||
<p
|
||||
className="tw:text-base"
|
||||
style={{ backgroundColor: 'var(--dbv-kit-btn-secondary-background-active)', color: 'var(--dbv-kit-btn-secondary-foreground)' }}
|
||||
>
|
||||
<p style={{ backgroundColor: 'var(--dbv-kit-btn-secondary-background-active)', color: 'var(--dbv-kit-btn-secondary-foreground)' }}>
|
||||
Secondary button background (active): <code>--dbv-kit-btn-secondary-background-active</code>
|
||||
</p>
|
||||
<p className="tw:text-base" style={{ borderColor: 'var(--dbv-kit-btn-secondary-border-color)', borderWidth: '1px', borderStyle: 'solid' }}>
|
||||
<p style={{ borderColor: 'var(--dbv-kit-btn-secondary-border-color)', borderWidth: '1px', borderStyle: 'solid' }}>
|
||||
Secondary button border color: <code>--dbv-kit-btn-secondary-border-color</code>
|
||||
</p>
|
||||
<p
|
||||
className="tw:text-base"
|
||||
style={{ backgroundColor: 'var(--dbv-kit-btn-danger-background)', color: 'var(--dbv-kit-btn-danger-foreground)' }}
|
||||
>
|
||||
<p style={{ backgroundColor: 'var(--dbv-kit-btn-danger-background)', color: 'var(--dbv-kit-btn-danger-foreground)' }}>
|
||||
Danger button background: <code>--dbv-kit-btn-danger-background</code>
|
||||
</p>
|
||||
<p
|
||||
className="tw:text-base"
|
||||
style={{ backgroundColor: 'var(--dbv-kit-btn-danger-background-hover)', color: 'var(--dbv-kit-btn-danger-foreground)' }}
|
||||
>
|
||||
<p style={{ backgroundColor: 'var(--dbv-kit-btn-danger-background-hover)', color: 'var(--dbv-kit-btn-danger-foreground)' }}>
|
||||
Danger button background (hover): <code>--dbv-kit-btn-danger-background-hover</code>
|
||||
</p>
|
||||
<p
|
||||
className="tw:text-base"
|
||||
style={{ backgroundColor: 'var(--dbv-kit-btn-danger-background-active)', color: 'var(--dbv-kit-btn-danger-foreground)' }}
|
||||
>
|
||||
<p style={{ backgroundColor: 'var(--dbv-kit-btn-danger-background-active)', color: 'var(--dbv-kit-btn-danger-foreground)' }}>
|
||||
Danger button background (active): <code>--dbv-kit-btn-danger-background-active</code>
|
||||
</p>
|
||||
<p className="tw:text-base">
|
||||
<p>
|
||||
The <code>--dbv-kit-btn-*-background</code> and <code>--dbv-kit-btn-*-foreground</code> tokens are used to define the background and text
|
||||
color of buttons for different variants (primary, secondary, danger).
|
||||
</p>
|
||||
<p className="tw:text-base">
|
||||
<p>
|
||||
To set another background or text color for your button, you can override the respective <code>--dbv-kit-btn-*</code> tokens in your CSS.
|
||||
</p>
|
||||
</div>
|
||||
<div className="tw:my-4">
|
||||
<h3 className="tw:text-lg tw:font-semibold">Button Borders</h3>
|
||||
<p
|
||||
className="tw:text-base"
|
||||
style={{ borderWidth: 'var(--dbv-kit-btn-border-width)', borderColor: 'var(--dbv-kit-btn-border-color)', borderStyle: 'solid' }}
|
||||
>
|
||||
<h3>Button Borders</h3>
|
||||
<p style={{ borderWidth: 'var(--dbv-kit-btn-border-width)', borderColor: 'var(--dbv-kit-btn-border-color)', borderStyle: 'solid' }}>
|
||||
Button border width: <code>--dbv-kit-btn-border-width</code>
|
||||
</p>
|
||||
<p className="tw:text-base">
|
||||
<p>
|
||||
The <code>--dbv-kit-btn-border-width</code> token is used to define the border width of buttons.
|
||||
</p>
|
||||
<p className="tw:text-base">
|
||||
<p>
|
||||
To change the border size of your button, you can override the <code>--dbv-kit-btn-border-width</code> token in your CSS.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
ButtonTokens.storyName = 'Buttons';
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import type { Story } from '@ladle/react';
|
||||
import { Button, type ButtonProps } from '../../../index.js';
|
||||
import { ButtonTokens } from './button-tokens.js';
|
||||
import { useState } from 'react';
|
||||
|
||||
export const Docs = () => (
|
||||
export { Tokens } from './button-tokens.js';
|
||||
export const Documentation = () => (
|
||||
<div>
|
||||
<h1>Button</h1>
|
||||
<p>The Button component is a simple button that can be used in different contexts. It has several visual parameters that can be customized.</p>
|
||||
@@ -40,8 +40,6 @@ export const Docs = () => (
|
||||
</div>
|
||||
);
|
||||
|
||||
Docs.storyName = '0Documentation';
|
||||
|
||||
export const Variants = () => (
|
||||
<div>
|
||||
<h3 className="tw:text-lg tw:my-2">Variants</h3>
|
||||
@@ -103,8 +101,6 @@ export const Variants = () => (
|
||||
</div>
|
||||
);
|
||||
|
||||
Variants.storyName = '1Variants';
|
||||
|
||||
export const Sizes = () => (
|
||||
<div>
|
||||
<h2 className="tw:text-lg tw:my-2">Sizes</h2>
|
||||
@@ -137,8 +133,6 @@ export const Sizes = () => (
|
||||
</div>
|
||||
);
|
||||
|
||||
Sizes.storyName = '2Sizes';
|
||||
|
||||
export const Icons = () => (
|
||||
<div>
|
||||
<h2>Icons</h2>
|
||||
@@ -259,8 +253,6 @@ export const Icons = () => (
|
||||
</div>
|
||||
);
|
||||
|
||||
Icons.storyName = '3Icons';
|
||||
|
||||
const CustomLoader = () => (
|
||||
<Button.Icon placement="start">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="tw:animate-spin tw:p-1">
|
||||
@@ -326,9 +318,7 @@ export const Loading = () => {
|
||||
);
|
||||
};
|
||||
|
||||
Loading.storyName = '4Loading';
|
||||
|
||||
export const CustomRendering = () => {
|
||||
export const WithCustomRendering = () => {
|
||||
return (
|
||||
<div>
|
||||
<h3 className="tw:text-lg tw:my-2">Custom renders</h3>
|
||||
@@ -357,8 +347,6 @@ export const CustomRendering = () => {
|
||||
);
|
||||
};
|
||||
|
||||
CustomRendering.storyName = '5Custom rendering';
|
||||
|
||||
const Primary: Story<ButtonProps> = props => <Button {...props}>Primary</Button>;
|
||||
export const Interactive = Primary.bind({});
|
||||
|
||||
@@ -384,9 +372,3 @@ Interactive.argTypes = {
|
||||
defaultValue: false,
|
||||
},
|
||||
};
|
||||
|
||||
Interactive.storyName = '6Interactive';
|
||||
|
||||
export const Tokens = ButtonTokens;
|
||||
|
||||
Tokens.storyName = '7Tokens';
|
||||
|
||||
@@ -0,0 +1,257 @@
|
||||
/*
|
||||
* CloudBeaver - Cloud Database Manager
|
||||
* Copyright (C) 2020-2025 DBeaver Corp and others
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0.
|
||||
* you may not use this file except in compliance with the License.
|
||||
*/
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Checkbox } from '../../../Checkbox/Checkbox.js';
|
||||
import './styles.css';
|
||||
import { Button } from '../../../index.js';
|
||||
|
||||
export const Documentation = () => (
|
||||
<div>
|
||||
<h1>Checkbox</h1>
|
||||
<p>
|
||||
The Checkbox component is a simple checkbox that can be used in different contexts. It has several visual parameters that can be customized.
|
||||
</p>
|
||||
<h2>Class names</h2>
|
||||
<p>
|
||||
<code>.dbv-kit-checkbox</code> - the main class name for the checkbox component. <br />
|
||||
<code>.dbv-kit-checkbox--small</code> - the class name for the small size. <br />
|
||||
<code>.dbv-kit-checkbox--medium</code> - the class name for the medium size. <br />
|
||||
<code>.dbv-kit-checkbox--large</code> - the class name for the large size. <br />
|
||||
<code>.dbv-kit-checkbox--xlarge</code> - the class name for the extra large size. <br />
|
||||
<code>.dbv-kit-checkbox__check</code> - the class name for the checkmark component. <br />
|
||||
<code>.dbv-kit-checkbox__text</code> - the class name for the text component. <br />
|
||||
</p>
|
||||
<p>
|
||||
Underlying components docs: <br />
|
||||
<a target="_blank" href="https://ariakit.org/reference/checkbox">
|
||||
https://ariakit.org/reference/checkbox
|
||||
</a>
|
||||
</p>
|
||||
<h3>Props:</h3>
|
||||
<dl>
|
||||
<dt className="tw:font-bold">size</dt>
|
||||
<dd>small | medium | large | xlarge</dd>
|
||||
<dt className="tw:font-bold">icon</dt>
|
||||
<dd>React.ReactNode</dd>
|
||||
</dl>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const States = () => {
|
||||
const [indeterminate, setIndeterminate] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="tw:flex tw:flex-col tw:items-start tw:space-y-4">
|
||||
<Checkbox> Unchecked </Checkbox>
|
||||
<Checkbox checked={false}> Unchecked (Controlled) </Checkbox>
|
||||
<Checkbox checked>Checked (Controlled)</Checkbox>
|
||||
<Checkbox defaultChecked> Default Checked </Checkbox>
|
||||
<Checkbox disabled> Disabled </Checkbox>
|
||||
<Checkbox disabled defaultChecked>
|
||||
Disabled Default Checked
|
||||
</Checkbox>
|
||||
<Checkbox accessibleWhenDisabled disabled defaultChecked>
|
||||
Default Checked Accessible When Disabled
|
||||
</Checkbox>
|
||||
<Button onClick={() => setIndeterminate(prev => !prev)}>Set Indeterminate</Button>
|
||||
<Checkbox indeterminate={indeterminate}>Indeterminate</Checkbox>
|
||||
<Checkbox indeterminate={indeterminate} indeterminateIcon={<div className="tw:flex tw:relative tw:-top-[1px] tw:font-bold">▫</div>}>
|
||||
Indeterminate Custom
|
||||
</Checkbox>
|
||||
<Checkbox>
|
||||
Insert spaces when pressing <code>Tab</code>. This setting is overridden based on the file contents when{' '}
|
||||
<a data-href="#" href="#">
|
||||
Editor: Detect Indentation
|
||||
</a>{' '}
|
||||
is on.
|
||||
</Checkbox>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Sizes = () => (
|
||||
<div className="tw:flex tw:flex-col tw:space-y-4">
|
||||
<Checkbox size="small"> Small </Checkbox>
|
||||
<Checkbox size="medium"> Medium </Checkbox>
|
||||
<Checkbox size="large"> Large </Checkbox>
|
||||
<Checkbox size="xlarge"> Extra Large </Checkbox>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const WithCustomIcon = () => (
|
||||
<div className="tw:flex tw:flex-col tw:space-y-4">
|
||||
<Checkbox>Default</Checkbox>
|
||||
<Checkbox
|
||||
icon={
|
||||
<svg fill="none" stroke="currentColor" strokeWidth="3" viewBox="0 0 16 16">
|
||||
<polyline points="3,8 7,12 14,4" />
|
||||
</svg>
|
||||
}
|
||||
>
|
||||
With Custom Icon
|
||||
</Checkbox>
|
||||
<Checkbox icon={<span className="tw:flex tw:justify-center tw:font-semibold">✓</span>}>With Custom Font Icon</Checkbox>
|
||||
<Checkbox size="large" className="cool-checkbox" icon={'👌'}>
|
||||
With Custom Icon And Styles
|
||||
</Checkbox>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const Tokens = () => {
|
||||
return (
|
||||
<div className="tw:p-4 tw:my-4">
|
||||
<h1>Checkbox CSS Tokens</h1>
|
||||
<p>This UI kit uses several CSS tokens to style checkboxes.</p>
|
||||
<h2>Common checkbox tokens</h2>
|
||||
Affect all sizes of checkboxes.
|
||||
<div className="tw:my-4">
|
||||
<h3>General</h3>
|
||||
<div>
|
||||
<code>--dbv-kit-checkbox-height:</code> var(--dbv-kit-control-height-medium); <span className="comment"> Default checkbox height</span>
|
||||
</div>
|
||||
<div>
|
||||
<code>--dbv-kit-checkbox-gap:</code> calc(var(--tw-spacing) * 1.25); <span className="comment"> Gap between checkbox elements</span>
|
||||
</div>
|
||||
<h3>Colors</h3>
|
||||
<div>
|
||||
<code>--dbv-kit-checkbox-icon-color:</code> var(--tw-color-white); <span className="comment"> Default checkbox icon color</span>
|
||||
</div>
|
||||
<div>
|
||||
<code>--dbv-kit-checkbox-foreground:</code> var(--tw-color-black); <span className="comment"> Default checkbox text color</span>
|
||||
</div>
|
||||
<div>
|
||||
<code>--dbv-kit-checkbox-background:</code> transparent; <span className="comment"> Default checkbox background color</span>
|
||||
</div>
|
||||
<div>
|
||||
<code>--dbv-kit-checkbox-background-checked:</code> var(--dbv-kit-color-primary-600);{' '}
|
||||
<span className="comment"> Checkbox background color when checked</span>
|
||||
</div>
|
||||
<div>
|
||||
<code>--dbv-kit-checkbox-background-hover:</code> var(--dbv-kit-color-primary-100);{' '}
|
||||
<span className="comment"> Checkbox background color on hover</span>
|
||||
</div>
|
||||
<div>
|
||||
<code>--dbv-kit-checkbox-background-active:</code> var(--dbv-kit-color-primary-800);{' '}
|
||||
<span className="comment"> Checkbox background color when active</span>
|
||||
</div>
|
||||
<h3>Borders</h3>
|
||||
<div>
|
||||
<code>--dbv-kit-checkbox-border-width:</code> var(--dbv-kit-control-border-width); <span className="comment"> Checkbox border width</span>
|
||||
</div>
|
||||
<div>
|
||||
<code>--dbv-kit-checkbox-border-radius:</code> var(--dbv-kit-control-border-radius);{' '}
|
||||
<span className="comment"> Checkbox border radius</span>
|
||||
</div>
|
||||
<div>
|
||||
<code>--dbv-kit-checkbox-border-style:</code> solid; <span className="comment"> Checkbox border style</span>
|
||||
</div>
|
||||
<div>
|
||||
<code>--dbv-kit-checkbox-border-color:</code> var(--tw-color-gray-300); <span className="comment"> Checkbox border color</span>
|
||||
</div>
|
||||
<div>
|
||||
<code>--dbv-kit-checkbox-border-color-checked:</code> var(--dbv-kit-color-primary-600);{' '}
|
||||
<span className="comment"> Checkbox border color when checked</span>
|
||||
</div>
|
||||
<h3>Font</h3>
|
||||
<div>
|
||||
<code>--dbv-kit-checkbox-font-weight:</code> var(--tw-font-weight-normal); <span className="comment"> Checkbox font weight</span>
|
||||
</div>
|
||||
<div>
|
||||
<code>--dbv-kit-checkbox-font-size:</code> calc(var(--dbv-kit-font-size-base) * 0.875); <span className="comment"> Checkbox font size</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="tw:my-4">
|
||||
<h2>Specific checkbox tokens</h2>
|
||||
<h3>Checkbox Sizes</h3>
|
||||
<p>
|
||||
The <code>--dbv-kit-checkbox-*-height</code> tokens are used to define the height of checkboxes for different size variants.
|
||||
</p>
|
||||
<p style={{ height: 'var(--dbv-kit-checkbox-small-height)' }}>
|
||||
Small checkbox height: <code>--dbv-kit-checkbox-small-height</code>
|
||||
</p>
|
||||
<p style={{ height: 'var(--dbv-kit-checkbox-medium-height)' }}>
|
||||
Medium checkbox height: <code>--dbv-kit-checkbox-medium-height</code>
|
||||
</p>
|
||||
<p style={{ height: 'var(--dbv-kit-checkbox-large-height)' }}>
|
||||
Large checkbox height: <code>--dbv-kit-checkbox-large-height</code>
|
||||
</p>
|
||||
<p style={{ height: 'var(--dbv-kit-checkbox-xlarge-height)' }}>
|
||||
Extra large checkbox height: <code>--dbv-kit-checkbox-xlarge-height</code>
|
||||
</p>
|
||||
</div>
|
||||
<div className="tw:my-4">
|
||||
<h3>Checkbox Gap</h3>
|
||||
<p>
|
||||
The <code>--dbv-kit-checkbox-*-gap</code> tokens are used to define the gap between checkbox elements for different size variants.
|
||||
</p>
|
||||
<p>
|
||||
Small checkbox gap: <code>--dbv-kit-checkbox-small-gap</code>
|
||||
</p>
|
||||
<p>
|
||||
Medium checkbox gap: <code>--dbv-kit-checkbox-medium-gap</code>
|
||||
</p>
|
||||
<p>
|
||||
Large checkbox gap: <code>--dbv-kit-checkbox-large-gap</code>
|
||||
</p>
|
||||
<p>
|
||||
Extra large checkbox gap: <code>--dbv-kit-checkbox-xlarge-gap</code>
|
||||
</p>
|
||||
</div>
|
||||
<div className="tw:my-4">
|
||||
<h3>Checkbox Font Sizes </h3>
|
||||
<p>
|
||||
{' '}
|
||||
<code>--dbv-kit-checkbox-small-font-size</code>: calc(var(--dbv-kit-checkbox-font-size) * 0.875);
|
||||
</p>
|
||||
<p>
|
||||
{' '}
|
||||
<code>--dbv-kit-checkbox-medium-font-size</code>: var(--dbv-kit-checkbox-font-size);
|
||||
</p>
|
||||
<p>
|
||||
{' '}
|
||||
<code>--dbv-kit-checkbox-large-font-size</code>: calc(var(--dbv-kit-checkbox-font-size) * 1.125);
|
||||
</p>
|
||||
<p>
|
||||
{' '}
|
||||
<code>--dbv-kit-checkbox-xlarge-font-size</code>: calc(var(--dbv-kit-checkbox-font-size) * 1.25);
|
||||
</p>
|
||||
</div>
|
||||
<div className="tw:my-4">
|
||||
<h3>Checkbox Colors</h3>
|
||||
<p style={{ backgroundColor: 'var(--dbv-kit-checkbox-background-checked)', color: 'var(--dbv-kit-checkbox-foreground)' }}>
|
||||
Checked checkbox background: <code>--dbv-kit-checkbox-background-checked</code>
|
||||
</p>
|
||||
<p style={{ backgroundColor: 'var(--dbv-kit-checkbox-background-hover)', color: 'var(--dbv-kit-checkbox-foreground)' }}>
|
||||
Checkbox background (hover): <code>--dbv-kit-checkbox-background-hover</code>
|
||||
</p>
|
||||
<p style={{ backgroundColor: 'var(--dbv-kit-checkbox-background-active)', color: 'var(--dbv-kit-checkbox-foreground)' }}>
|
||||
Checkbox background (active): <code>--dbv-kit-checkbox-background-active</code>
|
||||
</p>
|
||||
<p style={{ borderColor: 'var(--dbv-kit-checkbox-border-color)', borderWidth: '1px', borderStyle: 'solid' }}>
|
||||
Checkbox border color: <code>--dbv-kit-checkbox-border-color</code>
|
||||
</p>
|
||||
<p style={{ borderColor: 'var(--dbv-kit-checkbox-border-color-checked)', borderWidth: '1px', borderStyle: 'solid' }}>
|
||||
Checked checkbox border color: <code>--dbv-kit-checkbox-border-color-checked</code>
|
||||
</p>
|
||||
</div>
|
||||
<div className="tw:my-4">
|
||||
<h3>Checkbox Borders</h3>
|
||||
<p>
|
||||
Checkbox border width: <code>--dbv-kit-checkbox-border-width</code>
|
||||
</p>
|
||||
<p>
|
||||
The <code>--dbv-kit-checkbox-border-width</code> token is used to define the border width of checkboxes.
|
||||
</p>
|
||||
<p>
|
||||
To change the border size of your checkbox, you can override the <code>--dbv-kit-checkbox-border-width</code> token in your CSS.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,6 @@
|
||||
.cool-checkbox {
|
||||
--dbv-kit-checkbox-background-checked: black;
|
||||
--dbv-kit-checkbox-background-hover: gray;
|
||||
--dbv-kit-checkbox-border-color-checked: black;
|
||||
--dbv-kit-checkbox-border-color: black;
|
||||
}
|
||||
@@ -11,7 +11,7 @@ import { Input } from '../../../Input/Input.js';
|
||||
export const InputExample = () => {
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<div className="tw:space-y-2">
|
||||
<Input placeholder="Username" />
|
||||
<Input placeholder="Password" type="password" />
|
||||
<Button>Log in</Button>
|
||||
|
||||
@@ -7,7 +7,7 @@ export const HowToCustomize = () => {
|
||||
<p>DBeaver UI Kit components have basic styles and use some defaults from Tailwind CSS. To change styling you can use different approaches.</p>
|
||||
<h2>Global CSS Tokens</h2>
|
||||
<p>
|
||||
UI kit uses several global CSS tokens described on the <a href="/?story=design-tokens--global">Global Tokens page</a>. These tokens help
|
||||
UI kit uses several global CSS tokens described on the <a href="/?story=customization--tokens">Global Tokens page</a>. These tokens help
|
||||
maintain consistency across the UI components. All DBeaver UI tokens are prefixed with <code>--dbv-kit-</code>. You can use these tokens to
|
||||
customize the UI kit to fit your application's design. For example, changing the <code>--dbv-kit-font-size-base</code> token will change the
|
||||
base font size for text in the UI kit. And changing the <code>--dbv-kit-control-height-base</code> token will change all control heights. If
|
||||
@@ -16,7 +16,7 @@ export const HowToCustomize = () => {
|
||||
</p>
|
||||
<h2>Component CSS Tokens</h2>
|
||||
<p>
|
||||
Some components have their own tokens. For example, the Button component <a href="?story=button--7-tokens">has tokens </a> for button sizes,
|
||||
Some components have their own tokens. For example, the Button component <a href="?story=button--tokens">has tokens </a> for button sizes,
|
||||
padding, and colors. You can change these tokens to customize the Button component.
|
||||
</p>
|
||||
<h2>Component CSS Classes</h2>
|
||||
|
||||
@@ -2,51 +2,46 @@ export const GlobalTokens = () => {
|
||||
return (
|
||||
<div className="tw:p-4 tw:my-4">
|
||||
<h1 className="tw:text-2xl tw:font-bold">Global CSS Tokens</h1>
|
||||
<p className="tw:text-base">
|
||||
<p>
|
||||
This UI kit uses several global CSS tokens defined in the <code>index.css</code> file. These tokens help maintain consistency across the UI
|
||||
components. All DBeaver UI tokens are prefixed with <code>--dbv-kit-</code>. You can use these tokens to customize the UI kit to fit your
|
||||
application's design. Below are some of the key tokens used in the UI kit.
|
||||
</p>
|
||||
<div className="tw:my-4">
|
||||
<h2 className="tw:text-xl tw:font-semibold">Font Size</h2>
|
||||
<p className="tw:text-base" style={{ fontSize: 'var(--dbv-kit-font-size-base)' }}>
|
||||
Base font size: <code>--dbv-kit-font-size-base</code>
|
||||
</p>
|
||||
<p className="tw:text-base">
|
||||
The <code>--dbv-kit-font-size-base</code> token is used to set the base font size for text in the UI kit. It ensures consistent typography
|
||||
across different components.
|
||||
</p>
|
||||
<code>--dbv-kit-font-size-base</code> - base font size <br />
|
||||
<code>--dbv-kit-font-size-base</code> - token is used to set the base font size for text in the UI kit. It ensures consistent typography
|
||||
across different components.
|
||||
</div>
|
||||
|
||||
<div className="tw:my-4">
|
||||
<h2 className="tw:text-xl tw:font-semibold">Control Heights</h2>
|
||||
<p className="tw:text-base" style={{ height: 'var(--dbv-kit-control-height-small)' }}>
|
||||
Small control height: <code>--dbv-kit-control-height-small</code>
|
||||
<p>
|
||||
<code>--dbv-kit-control-height-small</code> - Small control height
|
||||
</p>
|
||||
<p className="tw:text-base" style={{ height: 'var(--dbv-kit-control-height-medium)' }}>
|
||||
Medium control height: <code>--dbv-kit-control-height-medium</code>
|
||||
<p>
|
||||
<code>--dbv-kit-control-height-medium</code> - Medium control height
|
||||
</p>
|
||||
<p className="tw:text-base" style={{ height: 'var(--dbv-kit-control-height-large)' }}>
|
||||
Large control height: <code>--dbv-kit-control-height-large</code>
|
||||
<p>
|
||||
<code>--dbv-kit-control-height-large</code> - Large control height
|
||||
</p>
|
||||
<p className="tw:text-base" style={{ height: 'var(--dbv-kit-control-height-xlarge)' }}>
|
||||
Extra large control height: <code>--dbv-kit-control-height-xlarge</code>
|
||||
<p>
|
||||
<code>--dbv-kit-control-height-xlarge</code> - Extra large control height
|
||||
</p>
|
||||
<p className="tw:text-base">
|
||||
<p>
|
||||
The <code>--control-height-*</code> tokens are used to define the height of various UI controls, such as buttons, selects, and input fields.
|
||||
These tokens ensure consistent sizing across different components. Use these tokens to set the height of controls in your application.
|
||||
</p>
|
||||
</div>
|
||||
<div className="tw:my-4">
|
||||
<h2 className="tw:text-xl tw:font-semibold">Base Sizes</h2>
|
||||
<p className="tw:text-base">
|
||||
The <code>--dbv-kit-font-size-base</code> and <code>--dbv-kit-control-height-base</code> tokens use <code>rem</code> units by default. This
|
||||
ensures that the base font size and control height are consistent with the user's browser settings. If the user changes the browser's font
|
||||
size, these base sizes will adjust accordingly, maintaining a consistent view.
|
||||
</p>
|
||||
<p className="tw:text-base">
|
||||
Other font sizes and control heights are calculated from these base sizes, ensuring proportional scaling across the UI components.
|
||||
<code>--dbv-kit-font-size-base</code>
|
||||
<br />
|
||||
<code>--dbv-kit-control-height-base</code>
|
||||
<p>
|
||||
These tokens use <code>rem</code> units by default. This ensures that the base font size and control height are consistent with the user's
|
||||
browser settings. If the user changes the browser's font size, these base sizes will adjust accordingly, maintaining a consistent view.
|
||||
</p>
|
||||
<p>Other font sizes and control heights are calculated from these base sizes, ensuring proportional scaling across the UI components.</p>
|
||||
</div>
|
||||
<div className="tw:my-4">
|
||||
<h2>Borders</h2>
|
||||
@@ -64,72 +59,86 @@ export const GlobalTokens = () => {
|
||||
</div>
|
||||
<div className="tw:my-4">
|
||||
<h2 className="tw:text-xl tw:font-semibold">Colors</h2>
|
||||
<p className="tw:text-base" style={{ color: 'var(--dbv-kit-color-foreground)' }}>
|
||||
Foreground color: <code>--dbv-kit-color-foreground</code>
|
||||
<p>
|
||||
<code>--dbv-kit-color-foreground</code> - Foreground color{' '}
|
||||
<span style={{ backgroundColor: 'var(--dbv-kit-color-foreground)' }} className="color-sample" />
|
||||
</p>
|
||||
<p className="tw:text-base" style={{ backgroundColor: 'var(--dbv-kit-color-background)' }}>
|
||||
Background color: <code>--dbv-kit-color-background</code>
|
||||
<p>
|
||||
<code>--dbv-kit-color-background</code> - Background color
|
||||
</p>
|
||||
<p className="tw:text-base" style={{ color: 'var(--dbv-kit-color-text)' }}>
|
||||
Text color: <code>--dbv-kit-color-text</code>
|
||||
<p>
|
||||
<code>--dbv-kit-color-primary-50</code> - Primary color (50){' '}
|
||||
<span className="color-sample" style={{ backgroundColor: 'var(--dbv-kit-color-primary-50)' }}></span>
|
||||
</p>
|
||||
<p className="tw:text-base" style={{ backgroundColor: 'var(--dbv-kit-color-primary-50)' }}>
|
||||
Primary color (50): <code>--dbv-kit-color-primary-50</code>
|
||||
<p>
|
||||
<code>--dbv-kit-color-primary-100</code> - Primary color (100){' '}
|
||||
<span className="color-sample" style={{ backgroundColor: 'var(--dbv-kit-color-primary-100)' }}></span>
|
||||
</p>
|
||||
<p className="tw:text-base" style={{ backgroundColor: 'var(--dbv-kit-color-primary-100)' }}>
|
||||
Primary color (100): <code>--dbv-kit-color-primary-100</code>
|
||||
<p>
|
||||
<code>--dbv-kit-color-primary-200</code> - Primary color (200){' '}
|
||||
<span className="color-sample" style={{ backgroundColor: 'var(--dbv-kit-color-primary-200)' }}></span>
|
||||
</p>
|
||||
<p className="tw:text-base" style={{ backgroundColor: 'var(--dbv-kit-color-primary-200)' }}>
|
||||
Primary color (200): <code>--dbv-kit-color-primary-200</code>
|
||||
<p>
|
||||
<code>--dbv-kit-color-primary-500</code> - Primary color (500){' '}
|
||||
<span className="color-sample" style={{ backgroundColor: 'var(--dbv-kit-color-primary-500)' }}></span>
|
||||
</p>
|
||||
<p className="tw:text-base text-white" style={{ backgroundColor: 'var(--dbv-kit-color-primary-500)' }}>
|
||||
Primary color (500): <code>--dbv-kit-color-primary-500</code>
|
||||
<p>
|
||||
<code>--dbv-kit-color-primary-600</code> - Primary color (600){' '}
|
||||
<span className="color-sample" style={{ backgroundColor: 'var(--dbv-kit-color-primary-600)' }}></span>
|
||||
</p>
|
||||
<p className="tw:text-base text-white" style={{ backgroundColor: 'var(--dbv-kit-color-primary-600)' }}>
|
||||
Primary color (600): <code>--dbv-kit-color-primary-600</code>
|
||||
<p>
|
||||
<code>--dbv-kit-color-primary-700</code> - Primary color (700){' '}
|
||||
<span className="color-sample" style={{ backgroundColor: 'var(--dbv-kit-color-primary-700)' }}></span>
|
||||
</p>
|
||||
<p className="tw:text-base text-white" style={{ backgroundColor: 'var(--dbv-kit-color-primary-700)' }}>
|
||||
Primary color (700): <code>--dbv-kit-color-primary-700</code>
|
||||
<p>
|
||||
<code>--dbv-kit-color-primary-800</code> - Primary color (800){' '}
|
||||
<span className="color-sample" style={{ backgroundColor: 'var(--dbv-kit-color-primary-800)' }}></span>
|
||||
</p>
|
||||
<p className="tw:text-base text-white" style={{ backgroundColor: 'var(--dbv-kit-color-primary-800)' }}>
|
||||
Primary color (800): <code>--dbv-kit-color-primary-800</code>
|
||||
<p>
|
||||
<code>--dbv-kit-color-primary-900</code> - Primary color (900){' '}
|
||||
<span className="color-sample" style={{ backgroundColor: 'var(--dbv-kit-color-primary-900)' }}></span>
|
||||
</p>
|
||||
<p className="tw:text-base text-white" style={{ backgroundColor: 'var(--dbv-kit-color-primary-900)' }}>
|
||||
Primary color (900): <code>--dbv-kit-color-primary-900</code>
|
||||
<p>
|
||||
<code>--dbv-kit-color-outline:</code> Default control outline color used for focused elements{' '}
|
||||
<span className="color-sample" style={{ backgroundColor: 'var(--dbv-kit-color-outline)' }}></span>
|
||||
</p>
|
||||
<p
|
||||
className="tw:text-base tw:my-1"
|
||||
style={{
|
||||
backgroundColor: 'var(--dbv-kit-color-error-background)',
|
||||
color: 'var(--dbv-kit-color-error-text)',
|
||||
border: '2px solid var(--dbv-kit-color-error-border)',
|
||||
border: '4px solid var(--dbv-kit-color-error-border)',
|
||||
}}
|
||||
>
|
||||
Error color: <code>--dbv-kit-color-error-background</code> / <code>--dbv-kit-color-error-text</code> /{' '}
|
||||
<code>--dbv-kit-color-error-border</code>
|
||||
</p>
|
||||
<p
|
||||
className="tw:text-base tw:my-1"
|
||||
style={{
|
||||
backgroundColor: 'var(--dbv-kit-color-info-background)',
|
||||
color: 'var(--dbv-kit-color-info-text)',
|
||||
border: '2px solid var(--dbv-kit-color-info-border)',
|
||||
border: '4px solid var(--dbv-kit-color-info-border)',
|
||||
}}
|
||||
>
|
||||
Info color: <code>--dbv-kit-color-info-background</code> / <code>--dbv-kit-color-info-text</code> / <code>--dbv-kit-color-info-border</code>
|
||||
</p>
|
||||
<p
|
||||
className="tw:text-base tw:my-1"
|
||||
style={{
|
||||
backgroundColor: 'var(--dbv-kit-color-warning-background)',
|
||||
color: 'var(--dbv-kit-color-warning-text)',
|
||||
border: '2px solid var(--dbv-kit-color-warning-border)',
|
||||
border: '4px solid var(--dbv-kit-color-warning-border)',
|
||||
}}
|
||||
>
|
||||
Warning color: <code>--dbv-kit-color-warning-background</code> / <code>--dbv-kit-color-warning-text</code> /{' '}
|
||||
<code>--dbv-kit-color-warning-border</code>
|
||||
</p>
|
||||
</div>
|
||||
<h2>Others</h2>
|
||||
<p>
|
||||
<code>--dbv-kit-control-disabled-opacity:</code> opacity level for disabled controls, default is 0.5
|
||||
</p>
|
||||
<p>
|
||||
<code>--dbv-kit-outline-offset:</code> outline offset for focused elements
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
export type ControlSize = 'small' | 'medium' | 'large' | 'xlarge';
|
||||
Reference in New Issue
Block a user