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 kubetail-org/kubetail#16
* Bumps version number to 0.1.2

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) })));

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,

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',

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, {

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;

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',

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;

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,

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',

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, {

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) },

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',

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",

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))",
+          }
         }
       }
     },

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.'
   },
 };

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'>) => (
   <tbody {...props} className={cn(baseCls, className)} />

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 = {

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<DataTableSize, string> = {
   xs: 'px-2 py-1.5',

src/elements/DataTable/index.tsx

@@ -59,7 +59,7 @@ const DataTable = ({
     <Context.Provider value={context}>
       <div className={cn(baseCls, className)}>
         <table className={cn(
-          'min-w-full divide-y divide-gray-30',
+          'min-w-full divide-y divide-chrome-300',
           size && sizeCNMap[size],
         )}
         >

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;

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';
 

src/elements/__snapshots__/FormCheck.test.tsx.snap

@@ -50,7 +50,7 @@ exports[`FormCheck renders properly 1`] = `
       type="checkbox"
     />
     <label
-      class="ml-2 block text-sm text-gray-900"
+      class="ml-2 block text-sm text-chrome-900"
     >
       My Label
     </label>