{"id":15041806,"url":"https://github.com/lucas-labs/lui-micro","last_synced_at":"2026-01-06T22:39:42.207Z","repository":{"id":143587477,"uuid":"616259297","full_name":"lucas-labs/lui-micro","owner":"lucas-labs","description":"🎨 lucas-labs/lui-micro \u003e A lightweight scss library for building themed UIs 🤏.","archived":false,"fork":false,"pushed_at":"2023-07-01T13:18:01.000Z","size":109,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-01T15:22:18.724Z","etag":null,"topics":["scss","scss-framework","scss-library","scss-mixins","scss-modules","scss-styles","theme-development","themes","ui","ui-framework"],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lucas-labs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-20T02:49:18.000Z","updated_at":"2023-06-30T14:39:21.000Z","dependencies_parsed_at":null,"dependency_job_id":"a0b8c7b6-1f44-44c7-a096-74b6b3de133c","html_url":"https://github.com/lucas-labs/lui-micro","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucas-labs%2Flui-micro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucas-labs%2Flui-micro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucas-labs%2Flui-micro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lucas-labs%2Flui-micro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lucas-labs","download_url":"https://codeload.github.com/lucas-labs/lui-micro/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245831495,"owners_count":20679699,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["scss","scss-framework","scss-library","scss-mixins","scss-modules","scss-styles","theme-development","themes","ui","ui-framework"],"created_at":"2024-09-24T20:46:29.623Z","updated_at":"2026-01-06T22:39:42.169Z","avatar_url":"https://github.com/lucas-labs.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/lucas-labs/lui-micro/HEAD/logo.svg\" height=\"80\"\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cstrong\u003e\n🎨 \u003ccode\u003elucas-labs/lui-micro\u003c/code\u003e \u003e A lightweight scss library for building themed UIs 🤏.\n\u003c/strong\u003e\n\u003c/p\u003e\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n## 📄 Documentation\n\n### 📦 Install\n\nDownload with NPM/PNPM/YARN:\n\n* `pnpm i @lucas-labs/lui-micro`  \n* `npm i @lucas-labs/lui-micro`  \n* `yarn add @lucas-labs/lui-micro`  \n\nThen import it in your `.scss` file:\n\n```scss\n@use '~@lucas-labs/lui-micro' as lui;\n@include lui.init();\n```\n\n### ⚙️ Options\nThe `lui.init` mixin can receive several params:\n\n* `$theme`: default theme configuration map\n* `$breakpoints `: media-breakpoints for breakpoint utilities.\n* `$options`: map with options for the library. It can have the following keys:\n  * `reboot`: boolean. If `true`, the reboot will be applied. Default: `true`.\n  * `basic`: boolean. If `true`, the basic styles will be applied. Default: `true`.\n  * `theme`: boolean. If `true`, the theme will be applied. Default: `true`.\n  * `merge-theme-with-prebuilt`: boolean. If `true`, the theme will be merged with the default theme. If you choose not to merge it, you will need to provide all the necesary variables. Default: `true`.\n  * `color-utilities`: boolean. If `true`, color utilities will be created. Default: `false`.\n  * `typography-utilities`: boolean. If `true`, typography utilities will be created. Default: `false`.\n  * `fg-var-name`: string. Indicates the name of the variable that will be used in the theme config to set the foreground color. Default: `text`\n  * `bg-var-name`: string. Indicates the name of the variable that will be used in the theme config to set the background color. Default: `background`\n\n\u003e 💡 All parameters are optional! (defaults will be used)\n\n### 🎨 Theme / Customization \n\nYou can create any number of themes, but one of them needs to be the default theme. Normally, the default theame is created when calling `lui.init`.\n\n#### Breakpoints\nTo set the breakpoints, you need to pass a map to the $breakpoints parameter in the `lui.init` mixin:\n\n```scss\n@use '~@lucas-labs/lui-micro' as lui;\n@include lui.init(\n    // this is also the default breakpoint map, \n    // so if you don't pass anything, this will be used\n    $breakpoints: (\n        xs: 0px,\n        sm: 576px,\n        md: 768px,\n        lg: 992px,\n        xl: 1200px,\n    )\n);\n```\n\n#### Setting default theme\nYou can set a default theme by passing a map object as a parameter to the `lui.init` mixin or by using the theme creation utility.\n\n- Using `init` mixin example:\n\n```scss\n@use '~@lucas-labs/lui-micro' as lui;\n@include lui.init(\n    $theme: (\n        colors: (\n            ...\n        ),\n        variables: (\n            ...\n        ),\n        typography: (\n            ...\n        ),\n    )\n);\n```\n\n\u003e 💡 You can see an example of a more complete theme config [here](./demo/style.scss).\n\n- Using theme-creation utility:\n\n```scss\n@use '~@lucas-labs/lui-micro' as lui;\n@use '~@lucas-labs/lui-micro/theme' as theme;\n\n@include lui.init();\n@include theme.create-theme(\n    $theme: (\n        ...\n        colors: (\n            background: ...,\n            text: ...,\n            primary: ...,\n\n            // nested maps are allowed (also allowed for variables)\n            grouped: (\n                a-nested-color: #fff,\n                even-more-nested: (\n                    ...\n                ),\n            )\n            ...\n        ),\n        ...\n    )\n    $as-default: true // set as-default as true, so lui defaults to this theme\n                      // this theme will be also used as a base for when you \n                      // create a new theme\n);\n```\n\n#### Setting default theme\nBy using the create-theme utility you can also create themes as non-default themes. This means you'll be able to change between themes at runtime. This is possible because themes are made only of css variables.\n\n```scss\n@use '~@lucas-labs/lui-micro' as lui;\n@use '~@lucas-labs/lui-micro/core' as core;\n\n// setting a deault theme called \"light\"\n@include lui.init(\n    $theme: (\n        name: \"light\",\n        ...\n    )\n);\n\n// creating another theme called \"dark\" that will not be default\n@include core.create-theme(\n    $theme: (\n        name: \"dark\"\n        ...\n    )\n    // don't pass $as-default here, or pass it as \"false\"\n);\n```\n\nNow to change themes at runtime, you'll need to set an argument in your \u003chtml\u003e tag:\n\n```html\n\u003chtml theme=\"dark\"\u003e \n...\n\u003c/html\u003e\n```\n\nTo change it back to de default, either you set the `theme` attribute to its name, or remove the theme attribute from the html tag (it will default to the default theme):\n\n```html\n\u003chtml theme=\"light\"\u003e \n...\n\u003c/html\u003e\n```\n\n\n### Mixins\n\n#### Vars and colors\nThe library includes some mixins that can be used to access the theme variables and colors\n\n```scss\n@use '@lucas-labs/lui-micro/color';\n@use '@lucas-labs/lui-micro/var';\n\n.my-div {\n    background-color: color.get('primary'); // background-color: var(--c-primary);\n    color: color.get('primary', 'rgb'); // color: var(--c-primary-rgb);\n\n    // it works with nested colors too\n    // provided you defined your nested theme-color as \n    // colors: (\n    //     my: (\n    //         nested: (\n    //             color: #000,\n    //         )    \n    //     )\n    // )\n    border-color: color.get('my/nested/color'); // border-color: var(--c-my_nested_color);\n\n    // get a theme variable\n    border-radius: var.get('font-family'); // border-radius: var(--v-font-family);\n    \n    // as with colors, it works with nested variables too\n    // provided you defined your nested variable as\n    // variables: (\n    //     my: (\n    //         nested: (\n    //             variable: 10px,\n    //         )\n    //     )\n    // )\n    border-radius: var.get('my/nested/variable'); // border-radius: var(--v-my_nested_variable);\n}\n```\n\n#### Breakpoints\n\nThe library includes several mixins to help you create responsive layouts and styles.\n\n```scss\n@use '@lucas-labs/lui-micro/bp';\n\n// @use '@lucas-labs/lui-micro/bp' with (\n//     $breakpoints: ( sm: 576px, ... )\n// );\n\n.my-div {\n    // create a breakpoint\n    @include bp.up('sm') {\n        // styles for sm and up\n    }\n\n    @include bp.down('sm') {\n        // styles for sm and down\n    }\n\n    @include bp.only('sm') {\n        // styles for sm only\n    }\n\n    @include bp.between('sm', 'md') {\n        // styles for sm and md\n    }\n\n    @include bp.not('sm') {\n        // styles for everything but sm\n    }\n\n}\n```\n#### Typographies\n\nThe library includes a mixin to get typography styles from the theme.\n\n```scss\n@use '@lucas-labs/lui-micro/typo';\n\n.my-div {\n    @include typo.typography('heading/h7');\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucas-labs%2Flui-micro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flucas-labs%2Flui-micro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucas-labs%2Flui-micro/lists"}