From b8f2f8a40eab69361ff61d2054559f0af28efd90 Mon Sep 17 00:00:00 2001 From: Andres Morey Date: Thu, 22 Feb 2024 12:28:08 +0300 Subject: [PATCH] Adds dark mode chrome colors (#2) * Adds a custom dark/light mode capable "chrome" color to tailwind that should be used for UI chrome coloring (e.g. header and sidebar backgrounds and labels) * Needed for https://github.com/kubetail-org/kubetail/issues/16 * Bumps version number to 0.1.2 --- elements/DataTable/Body.js | 2 +- elements/DataTable/Header.js | 2 +- elements/DataTable/HeaderCell.js | 4 +- elements/DataTable/index.js | 2 +- elements/FormCheck.js | 2 +- elements/Spinner.js | 2 +- esm/elements/DataTable/Body.js | 2 +- esm/elements/DataTable/Header.js | 2 +- esm/elements/DataTable/HeaderCell.js | 4 +- esm/elements/DataTable/index.js | 2 +- esm/elements/FormCheck.js | 2 +- esm/elements/Spinner.js | 2 +- package.json | 2 +- plugin.js | 45 ++++++++++++++++++- src/elements/Container.stories.tsx | 4 +- src/elements/DataTable/Body.tsx | 2 +- src/elements/DataTable/Header.tsx | 2 +- src/elements/DataTable/HeaderCell.tsx | 4 +- src/elements/DataTable/index.tsx | 2 +- src/elements/FormCheck.tsx | 2 +- src/elements/Spinner.tsx | 2 +- .../__snapshots__/FormCheck.test.tsx.snap | 2 +- 22 files changed, 69 insertions(+), 26 deletions(-) diff --git a/elements/DataTable/Body.js b/elements/DataTable/Body.js index 4737e53..c000e9e 100644 --- a/elements/DataTable/Body.js +++ b/elements/DataTable/Body.js @@ -29,7 +29,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) { Object.defineProperty(exports, "__esModule", { value: true }); const react_1 = __importDefault(require("react")); const utils_1 = require("@/lib/utils"); -const baseCls = 'divide-y divide-gray-200 bg-white'; +const baseCls = 'divide-y divide-chrome-200 bg-background'; const Body = (_a) => { var { className } = _a, props = __rest(_a, ["className"]); return (react_1.default.createElement("tbody", Object.assign({}, props, { className: (0, utils_1.cn)(baseCls, className) }))); diff --git a/elements/DataTable/Header.js b/elements/DataTable/Header.js index 31b2d4b..768152e 100644 --- a/elements/DataTable/Header.js +++ b/elements/DataTable/Header.js @@ -50,7 +50,7 @@ Object.defineProperty(exports, "__esModule", { value: true }); exports.Context = void 0; const react_1 = __importStar(require("react")); const utils_1 = require("@/lib/utils"); -const baseCls = 'bg-gray-50'; +const baseCls = 'bg-chrome-50'; const noop = () => { }; exports.Context = (0, react_1.createContext)({ sortBy: null, diff --git a/elements/DataTable/HeaderCell.js b/elements/DataTable/HeaderCell.js index 7d5be00..9ec18dc 100644 --- a/elements/DataTable/HeaderCell.js +++ b/elements/DataTable/HeaderCell.js @@ -52,8 +52,8 @@ const react_1 = __importStar(require("react")); const utils_1 = require("@/lib/utils"); const index_js_1 = require("./index.js"); const Header_js_1 = require("./Header.js"); -const baseCN = 'text-left font-semibold text-gray-900 select-none'; -const sortIconCN = 'ml-2 flex-none text-gray-400 group-hover:visible group-focus:visible'; +const baseCN = 'text-left font-semibold text-chrome-900 select-none'; +const sortIconCN = 'ml-2 flex-none text-chrome-400 group-hover:visible group-focus:visible'; const sizeCNMap = { xs: 'px-2 py-1.5', sm: 'px-2 py-1.5', diff --git a/elements/DataTable/index.js b/elements/DataTable/index.js index 2a33c2e..bdeb858 100644 --- a/elements/DataTable/index.js +++ b/elements/DataTable/index.js @@ -63,7 +63,7 @@ const DataTable = ({ className, children, size = 'md', }) => { const context = (0, react_1.useMemo)(() => value, [value]); return (react_1.default.createElement(exports.Context.Provider, { value: context }, react_1.default.createElement("div", { className: (0, utils_1.cn)(baseCls, className) }, - react_1.default.createElement("table", { className: (0, utils_1.cn)('min-w-full divide-y divide-gray-30', size && sizeCNMap[size]) }, children)))); + react_1.default.createElement("table", { className: (0, utils_1.cn)('min-w-full divide-y divide-chrome-300', size && sizeCNMap[size]) }, children)))); }; DataTable.displayName = 'DataTable'; const DataTableExport = Object.assign(DataTable, { diff --git a/elements/FormCheck.js b/elements/FormCheck.js index 798fc25..44c5dd4 100644 --- a/elements/FormCheck.js +++ b/elements/FormCheck.js @@ -31,7 +31,7 @@ const react_1 = __importDefault(require("react")); const utils_1 = require("@/lib/utils"); const wrapperBaseCls = 'flex items-center'; const inputBaseCls = 'h-4 w-4 text-primary-600 rounded border-input bg-background ring-offset-background focus:outline-none focus:border-input focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:opacity-50'; -const labelBaseCls = 'ml-2 block text-sm text-gray-900'; +const labelBaseCls = 'ml-2 block text-sm text-chrome-900'; const FormCheck = react_1.default.forwardRef((_a, ref) => { var { as = 'input', className, id, label } = _a, props = __rest(_a, ["as", "className", "id", "label"]); const Tag = as; diff --git a/elements/Spinner.js b/elements/Spinner.js index bba6aed..c7bf2c1 100644 --- a/elements/Spinner.js +++ b/elements/Spinner.js @@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) { Object.defineProperty(exports, "__esModule", { value: true }); const react_1 = __importDefault(require("react")); const utils_1 = require("@/lib/utils"); -const baseCN = 'animate-spin mr-2 text-gray-200 fill-gray-500'; +const baseCN = 'animate-spin mr-2 text-chrome-200 fill-chrome-500'; const sizeCNMap = { xs: 'w-4 h-4', sm: 'w-6 h-6', diff --git a/esm/elements/DataTable/Body.js b/esm/elements/DataTable/Body.js index df33ad7..ae4c18c 100644 --- a/esm/elements/DataTable/Body.js +++ b/esm/elements/DataTable/Body.js @@ -13,7 +13,7 @@ // limitations under the License. import React from 'react'; import { cn } from '@/lib/utils'; -const baseCls = 'divide-y divide-gray-200 bg-white'; +const baseCls = 'divide-y divide-chrome-200 bg-background'; const Body = ({ className, ...props }) => (React.createElement("tbody", { ...props, className: cn(baseCls, className) })); Body.displayName = 'DataTableBody'; export default Body; diff --git a/esm/elements/DataTable/Header.js b/esm/elements/DataTable/Header.js index ad3c2aa..d41cdee 100644 --- a/esm/elements/DataTable/Header.js +++ b/esm/elements/DataTable/Header.js @@ -13,7 +13,7 @@ // limitations under the License. import React, { createContext, useMemo } from 'react'; import { cn } from '@/lib/utils'; -const baseCls = 'bg-gray-50'; +const baseCls = 'bg-chrome-50'; const noop = () => { }; export const Context = createContext({ sortBy: null, diff --git a/esm/elements/DataTable/HeaderCell.js b/esm/elements/DataTable/HeaderCell.js index dcea07f..c33010e 100644 --- a/esm/elements/DataTable/HeaderCell.js +++ b/esm/elements/DataTable/HeaderCell.js @@ -16,8 +16,8 @@ import React, { useContext } from 'react'; import { cn } from '@/lib/utils'; import { Context as TableContext } from './index.js'; import { Context as HeaderContext } from './Header.js'; -const baseCN = 'text-left font-semibold text-gray-900 select-none'; -const sortIconCN = 'ml-2 flex-none text-gray-400 group-hover:visible group-focus:visible'; +const baseCN = 'text-left font-semibold text-chrome-900 select-none'; +const sortIconCN = 'ml-2 flex-none text-chrome-400 group-hover:visible group-focus:visible'; const sizeCNMap = { xs: 'px-2 py-1.5', sm: 'px-2 py-1.5', diff --git a/esm/elements/DataTable/index.js b/esm/elements/DataTable/index.js index dc218c8..eda284f 100644 --- a/esm/elements/DataTable/index.js +++ b/esm/elements/DataTable/index.js @@ -34,7 +34,7 @@ const DataTable = ({ className, children, size = 'md', }) => { const context = useMemo(() => value, [value]); return (React.createElement(Context.Provider, { value: context }, React.createElement("div", { className: cn(baseCls, className) }, - React.createElement("table", { className: cn('min-w-full divide-y divide-gray-30', size && sizeCNMap[size]) }, children)))); + React.createElement("table", { className: cn('min-w-full divide-y divide-chrome-300', size && sizeCNMap[size]) }, children)))); }; DataTable.displayName = 'DataTable'; const DataTableExport = Object.assign(DataTable, { diff --git a/esm/elements/FormCheck.js b/esm/elements/FormCheck.js index 9ba7185..51b9fa7 100644 --- a/esm/elements/FormCheck.js +++ b/esm/elements/FormCheck.js @@ -15,7 +15,7 @@ import React from 'react'; import { cn } from '@/lib/utils'; const wrapperBaseCls = 'flex items-center'; const inputBaseCls = 'h-4 w-4 text-primary-600 rounded border-input bg-background ring-offset-background focus:outline-none focus:border-input focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:opacity-50'; -const labelBaseCls = 'ml-2 block text-sm text-gray-900'; +const labelBaseCls = 'ml-2 block text-sm text-chrome-900'; const FormCheck = React.forwardRef(({ as = 'input', className, id, label, ...props }, ref) => { const Tag = as; return (React.createElement("div", { className: cn(wrapperBaseCls, className) }, diff --git a/esm/elements/Spinner.js b/esm/elements/Spinner.js index 0c5e408..437ccec 100644 --- a/esm/elements/Spinner.js +++ b/esm/elements/Spinner.js @@ -13,7 +13,7 @@ // limitations under the License. import React from 'react'; import { cn } from '@/lib/utils'; -const baseCN = 'animate-spin mr-2 text-gray-200 fill-gray-500'; +const baseCN = 'animate-spin mr-2 text-chrome-200 fill-chrome-500'; const sizeCNMap = { xs: 'w-4 h-4', sm: 'w-6 h-6', diff --git a/package.json b/package.json index ce47e7b..0233b59 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "kubetail-ui", - "version": "0.1.1", + "version": "0.1.2", "private": true, "sideEffects": false, "description": "Kubetail shared component library", diff --git a/plugin.js b/plugin.js index 526a788..70f93fa 100644 --- a/plugin.js +++ b/plugin.js @@ -56,6 +56,21 @@ module.exports = plugin( '--ring': hexToRgb(colors.blue[200]), '--secondary': hexToRgb(colors.blue[100]), '--secondary-foreground': hexToRgb(colors.gray[800]), + '--chrome-50': hexToRgb(colors.gray[50]), + '--chrome-100': hexToRgb(colors.gray[100]), + '--chrome-200': hexToRgb(colors.gray[200]), + '--chrome-300': hexToRgb(colors.gray[300]), + '--chrome-400': hexToRgb(colors.gray[400]), + '--chrome-500': hexToRgb(colors.gray[500]), + '--chrome-600': hexToRgb(colors.gray[600]), + '--chrome-700': hexToRgb(colors.gray[700]), + '--chrome-800': hexToRgb(colors.gray[800]), + '--chrome-900': hexToRgb(colors.gray[900]), + '--chrome-950': hexToRgb(colors.gray[950]), + '--chrome-foreground': hexToRgb(colors.gray[800]), + '--chrome-foreground-muted': hexToRgb(colors.gray[500]), + '--chrome-foreground-subtle': hexToRgb(colors.gray[300]), + '--chrome-divider': hexToRgb(colors.gray[300]), }, '.dark': { '--accent': hexToRgb(colors.amber[200]), @@ -73,6 +88,19 @@ module.exports = plugin( '--ring': hexToRgb(colors.blue[200]), '--secondary': hexToRgb(colors.blue[100]), '--secondary-foreground': hexToRgb(colors.gray[800]), + '--chrome-50': hexToRgb(colors.gray[950]), + '--chrome-100': hexToRgb(colors.gray[900]), + '--chrome-200': hexToRgb(colors.gray[800]), + '--chrome-300': hexToRgb(colors.gray[700]), + '--chrome-400': hexToRgb(colors.gray[600]), + '--chrome-500': hexToRgb(colors.gray[500]), + '--chrome-600': hexToRgb(colors.gray[400]), + '--chrome-700': hexToRgb(colors.gray[300]), + '--chrome-800': hexToRgb(colors.gray[200]), + '--chrome-900': hexToRgb(colors.gray[100]), + '--chrome-950': hexToRgb(colors.gray[50]), + '--chrome-foreground': hexToRgb(colors.white), + '--chrome-divider': hexToRgb(colors.gray[700]), }, '*': { '@apply border-border': '' @@ -85,7 +113,7 @@ module.exports = plugin( }); }, { - darkMode: ['class'], + darkMode: 'selector', theme: { screens: { 'sm': '576px', @@ -138,6 +166,21 @@ module.exports = plugin( DEFAULT: "rgb(var(--secondary))", foreground: "rgb(var(--secondary-foreground))", }, + chrome: { + 50: "rgb(var(--chrome-50))", + 100: "rgb(var(--chrome-100))", + 200: "rgb(var(--chrome-200))", + 300: "rgb(var(--chrome-300))", + 400: "rgb(var(--chrome-400))", + 500: "rgb(var(--chrome-500))", + 600: "rgb(var(--chrome-600))", + 700: "rgb(var(--chrome-700))", + 800: "rgb(var(--chrome-800))", + 900: "rgb(var(--chrome-900))", + 950: "rgb(var(--chrome-950))", + foreground: "rgb(var(--chrome-foreground))", + divider: "rgb(var(--chrome-divider))", + } } } }, diff --git a/src/elements/Container.stories.tsx b/src/elements/Container.stories.tsx index e201bcc..5ad8877 100644 --- a/src/elements/Container.stories.tsx +++ b/src/elements/Container.stories.tsx @@ -20,7 +20,7 @@ export const Default: Story = { export const CustomStyling: Story = { args: { - className: 'bg-gray-300', - children: 'This is a container with a gray background.' + className: 'bg-chrome-300', + children: 'This is a container with a chrome background.' }, }; diff --git a/src/elements/DataTable/Body.tsx b/src/elements/DataTable/Body.tsx index b95c9f7..c42d02b 100644 --- a/src/elements/DataTable/Body.tsx +++ b/src/elements/DataTable/Body.tsx @@ -16,7 +16,7 @@ import React from 'react'; import { cn } from '@/lib/utils'; -const baseCls = 'divide-y divide-gray-200 bg-white'; +const baseCls = 'divide-y divide-chrome-200 bg-background'; const Body = ({ className, ...props }: React.ComponentPropsWithoutRef<'tbody'>) => ( diff --git a/src/elements/DataTable/Header.tsx b/src/elements/DataTable/Header.tsx index e00e43f..6a606ae 100644 --- a/src/elements/DataTable/Header.tsx +++ b/src/elements/DataTable/Header.tsx @@ -16,7 +16,7 @@ import React, { createContext, useMemo } from 'react'; import { cn } from '@/lib/utils'; -const baseCls = 'bg-gray-50'; +const baseCls = 'bg-chrome-50'; const noop = () => {}; export type SortBy = { diff --git a/src/elements/DataTable/HeaderCell.tsx b/src/elements/DataTable/HeaderCell.tsx index 48c2c22..c15029b 100644 --- a/src/elements/DataTable/HeaderCell.tsx +++ b/src/elements/DataTable/HeaderCell.tsx @@ -21,8 +21,8 @@ import { Context as TableContext } from './index.js'; import type { DataTableSize } from './index.js'; import { Context as HeaderContext } from './Header.js'; -const baseCN = 'text-left font-semibold text-gray-900 select-none'; -const sortIconCN = 'ml-2 flex-none text-gray-400 group-hover:visible group-focus:visible'; +const baseCN = 'text-left font-semibold text-chrome-900 select-none'; +const sortIconCN = 'ml-2 flex-none text-chrome-400 group-hover:visible group-focus:visible'; const sizeCNMap: Record = { xs: 'px-2 py-1.5', diff --git a/src/elements/DataTable/index.tsx b/src/elements/DataTable/index.tsx index ad3228b..9fc76bf 100644 --- a/src/elements/DataTable/index.tsx +++ b/src/elements/DataTable/index.tsx @@ -59,7 +59,7 @@ const DataTable = ({
diff --git a/src/elements/FormCheck.tsx b/src/elements/FormCheck.tsx index bd893c7..babb0a8 100644 --- a/src/elements/FormCheck.tsx +++ b/src/elements/FormCheck.tsx @@ -18,7 +18,7 @@ import { cn } from '@/lib/utils'; const wrapperBaseCls = 'flex items-center'; const inputBaseCls = 'h-4 w-4 text-primary-600 rounded border-input bg-background ring-offset-background focus:outline-none focus:border-input focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:opacity-50'; -const labelBaseCls = 'ml-2 block text-sm text-gray-900'; +const labelBaseCls = 'ml-2 block text-sm text-chrome-900'; interface Props extends React.ComponentPropsWithoutRef<'input'> { as?: React.ElementType; diff --git a/src/elements/Spinner.tsx b/src/elements/Spinner.tsx index 9ded0b7..aa1b45a 100644 --- a/src/elements/Spinner.tsx +++ b/src/elements/Spinner.tsx @@ -16,7 +16,7 @@ import React from 'react'; import { cn } from '@/lib/utils'; -const baseCN = 'animate-spin mr-2 text-gray-200 fill-gray-500'; +const baseCN = 'animate-spin mr-2 text-chrome-200 fill-chrome-500'; type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg'; diff --git a/src/elements/__snapshots__/FormCheck.test.tsx.snap b/src/elements/__snapshots__/FormCheck.test.tsx.snap index fc0378d..50df79b 100644 --- a/src/elements/__snapshots__/FormCheck.test.tsx.snap +++ b/src/elements/__snapshots__/FormCheck.test.tsx.snap @@ -50,7 +50,7 @@ exports[`FormCheck renders properly 1`] = ` type="checkbox" />