Add all Elements

This commit is contained in:
Jeremy Thomas 2024-06-26 02:36:41 +01:00
parent 5b9f3a0d2a
commit 7670f4eed9
14 changed files with 471 additions and 12 deletions

View File

@ -8,7 +8,17 @@
</head>
<body>
<div id="root"></div>
<div class="box">Box</div>
<div class="is-hidden">
<div class="box"></div>
<div class="content"></div>
<div class="delete"></div>
<div class="icon"></div>
<div class="notification"></div>
<div class="progress"></div>
<div class="table"></div>
<div class="tag"></div>
<div class="title"></div>
</div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

View File

@ -11,7 +11,16 @@ import Typography from "./pages/Typography";
import Other from "./pages/Other";
import Generic from "./pages/Generic";
import Skeleton from "./pages/Skeleton";
import Box from "./pages/Box";
import Box from "./pages/elements/Box";
import Content from "./pages/elements/Content";
import Delete from "./pages/elements/Delete";
import Icon from "./pages/elements/Icon";
import Notification from "./pages/elements/Notification";
import Progress from "./pages/elements/Progress";
import Table from "./pages/elements/Table";
import Tag from "./pages/elements/Tag";
import Title from "./pages/elements/Title";
const SUFFIX_TO_KIND = {
"-h": "hue",
@ -29,6 +38,14 @@ const PAGE_TO_COMPONENT = {
generic: <Generic />,
skeleton: <Skeleton />,
box: <Box />,
content: <Content />,
delete: <Delete />,
icon: <Icon />,
notification: <Notification />,
progress: <Progress />,
table: <Table />,
tag: <Tag />,
title: <Title />,
};
const PAGE_IDS = [
"colors",
@ -38,6 +55,14 @@ const PAGE_IDS = [
"generic",
"skeleton",
"box",
"content",
"delete",
"icon",
"notification",
"progress",
"table",
"tag",
"title",
];
export const CustomizerContext = createContext({
@ -51,7 +76,7 @@ export const CustomizerContext = createContext({
function App() {
const initialContext = {
cssvars: {},
currentPage: "box",
currentPage: "delete",
getVar: (id) => {
return context.cssvars[id];
},
@ -96,14 +121,19 @@ function App() {
};
useEffect(() => {
// const elements = document.querySelectorAll("html, .box");
// const allStyles = Array.from(elements).map((element) =>
// getComputedStyle(element),
// );
const styles = {
root: window.getComputedStyle(document.documentElement),
box: window.getComputedStyle(document.querySelector(".box")),
content: window.getComputedStyle(document.querySelector(".content")),
delete: window.getComputedStyle(document.querySelector(".delete")),
icon: window.getComputedStyle(document.querySelector(".icon")),
notification: window.getComputedStyle(
document.querySelector(".notification"),
),
progress: window.getComputedStyle(document.querySelector(".progress")),
table: window.getComputedStyle(document.querySelector(".table")),
tag: window.getComputedStyle(document.querySelector(".tag")),
title: window.getComputedStyle(document.querySelector(".title")),
};
const cssvars = {};
@ -117,6 +147,30 @@ function App() {
if (key.startsWith("box")) {
scope = ".box";
original = styles.box.getPropertyValue(`--bulma-${key}`);
} else if (key.startsWith("content")) {
scope = ".content";
original = styles.content.getPropertyValue(`--bulma-${key}`);
} else if (key.startsWith("delete")) {
scope = ".delete";
original = styles.delete.getPropertyValue(`--bulma-${key}`);
} else if (key.startsWith("icon")) {
scope = ".icon";
original = styles.icon.getPropertyValue(`--bulma-${key}`);
} else if (key.startsWith("notification")) {
scope = ".notification";
original = styles.notification.getPropertyValue(`--bulma-${key}`);
} else if (key.startsWith("progress")) {
scope = ".progress";
original = styles.progress.getPropertyValue(`--bulma-${key}`);
} else if (key.startsWith("table")) {
scope = ".table";
original = styles.table.getPropertyValue(`--bulma-${key}`);
} else if (key.startsWith("tag")) {
scope = ".tag";
original = styles.tag.getPropertyValue(`--bulma-${key}`);
} else if (key.startsWith("title")) {
scope = ".title";
original = styles.title.getPropertyValue(`--bulma-${key}`);
} else {
original = styles.root.getPropertyValue(`--bulma-${key}`);
}

View File

@ -26,7 +26,7 @@
.name code {
font-size: 1.25em;
font-weight: 600;
font-weight: 400;
padding: 0;
background: none;
}
@ -35,7 +35,7 @@
align-items: center;
display: flex;
gap: 1.5rem;
padding: 2px 0;
/* padding: 2px 0; */
width: 30rem;
flex-shrink: 0;
}

View File

@ -261,4 +261,265 @@ export const CSSVAR_KEYS = {
description: "The box link shadow when active",
},
],
content: [
{ id: "content-heading-color", description: "The content headings color" },
{
id: "content-heading-weight",
description: "The content headings font weight",
},
{
id: "content-heading-line-height",
description: "The content headings line height",
},
{
id: "content-block-margin-bottom",
description: "The content blocks margin bottom",
},
{
id: "content-blockquote-background-color",
description: "The content blockquotes background color",
},
{
id: "content-blockquote-border-left",
description: "The content blockquotes left border",
},
{
id: "content-blockquote-padding",
description: "The content blockquotes padding",
},
{ id: "content-pre-padding", description: "The content pres padding" },
{
id: "content-table-cell-border",
description: "The content table cells border",
},
{
id: "content-table-cell-border-width",
description: "The content table cells border width",
},
{
id: "content-table-cell-padding",
description: "The content table cells heading color",
},
{
id: "content-table-cell-heading-color",
description: "The content table cells heading color",
},
{
id: "content-table-head-cell-border-width",
description: "The content table head cells border width",
},
{
id: "content-table-head-cell-color",
description: "The content table head cells color",
},
{
id: "content-table-body-last-row-cell-border-bottom-width",
description: "The content table last rows bottom border width",
},
{
id: "content-table-foot-cell-border-width",
description: "The content table foot cells border width",
},
{
id: "content-table-foot-cell-color",
description: "The content table foot cells heading color",
},
],
delete: [
{ id: "delete-dimensions", description: "The delete element dimensions" },
{
id: "delete-background-l",
description: "The delete element background lightness",
},
{
id: "delete-background-alpha",
description: "The delete element background transparency",
},
{ id: "delete-color", description: "The delete element color" },
],
icon: [
{ id: "icon-dimensions", description: "The icon element dimensions" },
{
id: "icon-dimensions-small",
description: "The Small icon element dimensions",
},
{
id: "icon-dimensions-medium",
description: "The Medium icon element dimensions",
},
{
id: "icon-dimensions-large",
description: "The Large icon element dimensions",
},
{ id: "icon-text-spacing", description: "The icon element text spacing" },
],
notification: [
{ id: "notification-h", description: "The notification main Hue" },
{ id: "notification-s", description: "The notification main Saturation" },
{
id: "notification-background-l",
description: "The notification background Lightness",
},
{
id: "notification-color-l",
description: "The notification main text color Lightness",
},
{
id: "notification-code-background-color",
description: "The notification code background color",
},
{
id: "notification-radius",
description: "The notification border radius",
},
{ id: "notification-padding", description: "The notification padding" },
],
progress: [
{
id: "progress-border-radius",
description: "The progress bar border radius",
},
{
id: "progress-bar-background-color",
description: "The progress bar background color",
},
{
id: "progress-value-background-color",
description: "The progress value background color",
},
{
id: "progress-indeterminate-duration",
description: "The progress bar loading animation speed",
},
],
table: [
{ id: "table-color", description: "The table text color" },
{ id: "table-background-color", description: "The table background color" },
{
id: "table-cell-border-color",
description: "The table cells border color",
},
{
id: "table-cell-border-style",
description: "The table cells border style",
},
{
id: "table-cell-border-width",
description: "The table cells border width",
},
{ id: "table-cell-padding", description: "The table cells padding" },
{
id: "table-cell-heading-color",
description: "The table heading cells text color",
},
{
id: "table-cell-text-align",
description: "The table cells text alignment",
},
{
id: "table-head-cell-border-width",
description: "The table head cells border width",
},
{
id: "table-head-cell-color",
description: "The table head cells text color",
},
{
id: "table-foot-cell-border-width",
description: "The table foot cells border width",
},
{
id: "table-foot-cell-color",
description: "The table foot cells text color",
},
{
id: "table-head-background-color",
description: "The table head background color",
},
{
id: "table-body-background-color",
description: "The table body background color",
},
{
id: "table-foot-background-color",
description: "The table foot background color",
},
{
id: "table-row-hover-background-color",
description: "The table rows hover background color",
},
{
id: "table-row-active-background-color",
description: "The table rows active background color",
},
{
id: "table-row-active-color",
description: "The table rows active text color",
},
{
id: "table-striped-row-even-background-color",
description: "The striped tables alternate rows background color",
},
{
id: "table-striped-row-even-hover-background-color",
description:
"The striped tables alternate rows background color when hovered",
},
],
tag: [
{ id: "tag-h", description: "The tag elements Hue" },
{ id: "tag-s", description: "The tag elements Saturation" },
{
id: "tag-background-l",
description: "The tag elements background Lightness",
},
{
id: "tag-background-l-delta",
description: "The tag elements background Lightness delta",
},
{
id: "tag-hover-background-l-delta",
description: "The tag elements background Lightness when hovered",
},
{
id: "tag-active-background-l-delta",
description: "The tag elements background Lightness when active",
},
{ id: "tag-color-l", description: "The tag elements text color Lightness" },
{ id: "tag-radius", description: "The tag elements border radius" },
{ id: "tag-delete-margin", description: "The tag delete elements margin" },
],
title: [
{ id: "title-color", description: "The title elements text color" },
{ id: "title-family", description: "The title elements font family" },
{ id: "title-size", description: "The title elements font size" },
{ id: "title-weight", description: "The title elements font weight" },
{ id: "title-line-height", description: "The title elements line height" },
{
id: "title-strong-color",
description: "The title strong elements text color",
},
{
id: "title-strong-weight",
description: "The title strong elements font weight",
},
{ id: "title-sub-size", description: "The title sub elements font size" },
{ id: "title-sup-size", description: "The title sup elements font size" },
{ id: "subtitle-color", description: "The subtitle elements text color" },
{ id: "subtitle-family", description: "The subtitle elements font family" },
{ id: "subtitle-size", description: "The subtitle elements font size" },
{ id: "subtitle-weight", description: "The subtitle elements font weight" },
{
id: "subtitle-line-height",
description: "The subtitle elements line height",
},
{
id: "subtitle-strong-color",
description: "The subtitle strong elements text color",
},
{
id: "subtitle-strong-weight",
description: "The subtitle strong elements font weight",
},
],
};

View File

@ -1,5 +1,5 @@
import VarItem from "../components/VarItem";
import { CSSVAR_KEYS } from "../constants";
import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants";
function Box() {
const ids = CSSVAR_KEYS.box.map((i) => i.id);

View File

@ -0,0 +1,16 @@
import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants";
function Content() {
const ids = CSSVAR_KEYS.content.map((i) => i.id);
return (
<div>
{ids.map((id) => {
return <VarItem key={id} id={id} />;
})}
</div>
);
}
export default Content;

View File

@ -0,0 +1,16 @@
import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants";
function Delete() {
const ids = CSSVAR_KEYS.delete.map((i) => i.id);
return (
<div>
{ids.map((id) => {
return <VarItem key={id} id={id} />;
})}
</div>
);
}
export default Delete;

View File

@ -0,0 +1,16 @@
import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants";
function Icon() {
const ids = CSSVAR_KEYS.icon.map((i) => i.id);
return (
<div>
{ids.map((id) => {
return <VarItem key={id} id={id} />;
})}
</div>
);
}
export default Icon;

View File

@ -0,0 +1,16 @@
import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants";
function Notification() {
const ids = CSSVAR_KEYS.notification.map((i) => i.id);
return (
<div>
{ids.map((id) => {
return <VarItem key={id} id={id} />;
})}
</div>
);
}
export default Notification;

View File

@ -0,0 +1,16 @@
import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants";
function Progress() {
const ids = CSSVAR_KEYS.progress.map((i) => i.id);
return (
<div>
{ids.map((id) => {
return <VarItem key={id} id={id} />;
})}
</div>
);
}
export default Progress;

View File

@ -0,0 +1,16 @@
import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants";
function Table() {
const ids = CSSVAR_KEYS.table.map((i) => i.id);
return (
<div>
{ids.map((id) => {
return <VarItem key={id} id={id} />;
})}
</div>
);
}
export default Table;

View File

@ -0,0 +1,16 @@
import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants";
function Tag() {
const ids = CSSVAR_KEYS.tag.map((i) => i.id);
return (
<div>
{ids.map((id) => {
return <VarItem key={id} id={id} />;
})}
</div>
);
}
export default Tag;

View File

@ -0,0 +1,16 @@
import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants";
function Title() {
const ids = CSSVAR_KEYS.title.map((i) => i.id);
return (
<div>
{ids.map((id) => {
return <VarItem key={id} id={id} />;
})}
</div>
);
}
export default Title;

View File

@ -14,4 +14,10 @@ export default defineConfig({
},
},
plugins: [react()],
resolve: {
alias: {
root: "/src",
components: "/src/components",
},
},
});