diff --git a/docs/_react/bulma-customizer/index.html b/docs/_react/bulma-customizer/index.html index 3ba36b87..2fca3e3b 100644 --- a/docs/_react/bulma-customizer/index.html +++ b/docs/_react/bulma-customizer/index.html @@ -8,7 +8,17 @@
-
Box
+ diff --git a/docs/_react/bulma-customizer/src/App.jsx b/docs/_react/bulma-customizer/src/App.jsx index 7027930d..31859dcc 100644 --- a/docs/_react/bulma-customizer/src/App.jsx +++ b/docs/_react/bulma-customizer/src/App.jsx @@ -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: , skeleton: , box: , + content: , + delete: , + icon: , + notification: , + progress: , + table: , + tag: , + 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}`); } diff --git a/docs/_react/bulma-customizer/src/components/VarItem.module.css b/docs/_react/bulma-customizer/src/components/VarItem.module.css index 6ec5afa7..4764e708 100644 --- a/docs/_react/bulma-customizer/src/components/VarItem.module.css +++ b/docs/_react/bulma-customizer/src/components/VarItem.module.css @@ -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; } diff --git a/docs/_react/bulma-customizer/src/constants.js b/docs/_react/bulma-customizer/src/constants.js index c7899b51..a53a4a7a 100644 --- a/docs/_react/bulma-customizer/src/constants.js +++ b/docs/_react/bulma-customizer/src/constants.js @@ -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", + }, + ], }; diff --git a/docs/_react/bulma-customizer/src/pages/Box.jsx b/docs/_react/bulma-customizer/src/pages/elements/Box.jsx similarity index 74% rename from docs/_react/bulma-customizer/src/pages/Box.jsx rename to docs/_react/bulma-customizer/src/pages/elements/Box.jsx index d3eb732a..e08b1756 100644 --- a/docs/_react/bulma-customizer/src/pages/Box.jsx +++ b/docs/_react/bulma-customizer/src/pages/elements/Box.jsx @@ -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); diff --git a/docs/_react/bulma-customizer/src/pages/elements/Content.jsx b/docs/_react/bulma-customizer/src/pages/elements/Content.jsx new file mode 100644 index 00000000..c2617bb3 --- /dev/null +++ b/docs/_react/bulma-customizer/src/pages/elements/Content.jsx @@ -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; diff --git a/docs/_react/bulma-customizer/src/pages/elements/Delete.jsx b/docs/_react/bulma-customizer/src/pages/elements/Delete.jsx new file mode 100644 index 00000000..822f9293 --- /dev/null +++ b/docs/_react/bulma-customizer/src/pages/elements/Delete.jsx @@ -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; diff --git a/docs/_react/bulma-customizer/src/pages/elements/Icon.jsx b/docs/_react/bulma-customizer/src/pages/elements/Icon.jsx new file mode 100644 index 00000000..b833f2fd --- /dev/null +++ b/docs/_react/bulma-customizer/src/pages/elements/Icon.jsx @@ -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; diff --git a/docs/_react/bulma-customizer/src/pages/elements/Notification.jsx b/docs/_react/bulma-customizer/src/pages/elements/Notification.jsx new file mode 100644 index 00000000..70954a3c --- /dev/null +++ b/docs/_react/bulma-customizer/src/pages/elements/Notification.jsx @@ -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; diff --git a/docs/_react/bulma-customizer/src/pages/elements/Progress.jsx b/docs/_react/bulma-customizer/src/pages/elements/Progress.jsx new file mode 100644 index 00000000..3e04b9f1 --- /dev/null +++ b/docs/_react/bulma-customizer/src/pages/elements/Progress.jsx @@ -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; diff --git a/docs/_react/bulma-customizer/src/pages/elements/Table.jsx b/docs/_react/bulma-customizer/src/pages/elements/Table.jsx new file mode 100644 index 00000000..35f4833d --- /dev/null +++ b/docs/_react/bulma-customizer/src/pages/elements/Table.jsx @@ -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; diff --git a/docs/_react/bulma-customizer/src/pages/elements/Tag.jsx b/docs/_react/bulma-customizer/src/pages/elements/Tag.jsx new file mode 100644 index 00000000..e53177e8 --- /dev/null +++ b/docs/_react/bulma-customizer/src/pages/elements/Tag.jsx @@ -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; diff --git a/docs/_react/bulma-customizer/src/pages/elements/Title.jsx b/docs/_react/bulma-customizer/src/pages/elements/Title.jsx new file mode 100644 index 00000000..419b11b5 --- /dev/null +++ b/docs/_react/bulma-customizer/src/pages/elements/Title.jsx @@ -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; diff --git a/docs/_react/bulma-customizer/vite.config.js b/docs/_react/bulma-customizer/vite.config.js index 85e4c803..789f35d3 100644 --- a/docs/_react/bulma-customizer/vite.config.js +++ b/docs/_react/bulma-customizer/vite.config.js @@ -14,4 +14,10 @@ export default defineConfig({ }, }, plugins: [react()], + resolve: { + alias: { + root: "/src", + components: "/src/components", + }, + }, });