{"id":27765687,"url":"https://github.com/duskyelf/biscuit-css-draft","last_synced_at":"2025-10-27T18:09:53.632Z","repository":{"id":287195809,"uuid":"963907589","full_name":"DuskyElf/Biscuit-css-draft","owner":"DuskyElf","description":"Warm and cozy CSS coloroscheme draft for Biscuit-Theme Org","archived":false,"fork":false,"pushed_at":"2025-04-10T14:46:41.000Z","size":11,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-14T16:04:02.617Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DuskyElf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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,"zenodo":null}},"created_at":"2025-04-10T11:52:07.000Z","updated_at":"2025-10-05T19:51:44.000Z","dependencies_parsed_at":null,"dependency_job_id":"5202bd65-d500-40b8-94ee-45c118e2cb81","html_url":"https://github.com/DuskyElf/Biscuit-css-draft","commit_stats":null,"previous_names":["duskyelf/biscuit-css-draft"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/DuskyElf/Biscuit-css-draft","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DuskyElf%2FBiscuit-css-draft","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DuskyElf%2FBiscuit-css-draft/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DuskyElf%2FBiscuit-css-draft/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DuskyElf%2FBiscuit-css-draft/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DuskyElf","download_url":"https://codeload.github.com/DuskyElf/Biscuit-css-draft/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DuskyElf%2FBiscuit-css-draft/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279019554,"owners_count":26086750,"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","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2025-04-29T16:55:49.424Z","updated_at":"2025-10-14T16:05:32.949Z","avatar_url":"https://github.com/DuskyElf.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🍪 Biscuit Theme CSS Port\n\n\u003e **⚠️ Before you use:** This theme is licensed under the Biscuit License which requires proper attribution. [See license requirements](#tldr-license-requirements) before using this theme in your project.\n\nA warm and inviting color palette designed to be easy on the eyes. Perfect for coding, designing, and creating projects that feel like a cozy afternoon with a cup of tea and a biscuit.\n\nThis is a CSS port of the [Biscuit Theme](https://github.com/Biscuit-Theme/biscuit).\n\n## 🎨 Flavors\n\nThis CSS port provides four variants of the Biscuit Theme:\n\n- **Biscuit Sol Dark** - Sun-soaked, vibrant dark theme\n- **Biscuit Sol Light** - Sun-soaked, vibrant light theme\n- **Biscuit Mar Dark** - More muted, sea-washed dark variant\n- **Biscuit Mar Light** - More muted, sea-washed light variant\n\n## 📥 Installation\n\nYou can use the Biscuit themes in two different ways:\n\n### Method 1: Individual Theme Files (Recommended)\n\nEach theme is available as a separate CSS file which includes only the variables for that theme directly in the root:\n\n1. Download the specific theme file you want to use:\n   - `biscuit-sol-dark.css` - For the Sol Dark theme\n   - `biscuit-sol-light.css` - For the Sol Light theme\n   - `biscuit-mar-dark.css` - For the Mar Dark theme  \n   - `biscuit-mar-light.css` - For the Mar Light theme\n\n2. Include it in your HTML file:\n\n```html\n\u003c!-- For Sol Dark theme --\u003e\n\u003clink rel=\"stylesheet\" href=\"path/to/biscuit-sol-dark.css\"\u003e\n\n\u003c!-- For Sol Light theme --\u003e\n\u003clink rel=\"stylesheet\" href=\"path/to/biscuit-sol-light.css\"\u003e\n\n\u003c!-- For Mar Dark theme --\u003e\n\u003clink rel=\"stylesheet\" href=\"path/to/biscuit-mar-dark.css\"\u003e\n\n\u003c!-- For Mar Light theme --\u003e\n\u003clink rel=\"stylesheet\" href=\"path/to/biscuit-mar-light.css\"\u003e\n```\n\n\u003e **⚠️ Important:** Do not import multiple individual theme files simultaneously in the same project. Since all files define the same CSS variable names (like `--base00`, `--text`, etc.) at the root level, they will contradict each other. If you need to use multiple themes together, use Method 2 with the combined theme file instead.\n\nWith this method, you can use the theme variables directly in your CSS:\n\n```css\n.my-element {\n  color: var(--text);\n  background-color: var(--background);\n}\n\n.code-block {\n  color: var(--base0B); /* Strings */\n  background-color: var(--base00); /* Background */\n}\n```\n\n### Method 2: Combined Theme File\n\nIf you need to use multiple themes or switch between them, you can use the combined file:\n\n1. Download the `biscuit.css` file\n2. Include it in your HTML file:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"path/to/biscuit.css\"\u003e\n```\n\n## 🎨 Theme Usage\n\n### Method 1: Using Individual Theme Files\n\nWhen using individual theme files, the theme colors are available directly at the root level:\n\n```css\n/* Using standard Base16 variables */\n.element {\n  color: var(--base05); /* Default text color */\n  background-color: var(--base00); /* Default background */\n}\n\n/* Using semantic aliases */\n.button {\n  background-color: var(--primary);\n  color: var(--text);\n  border: 2px solid var(--accent);\n}\n\n.notification {\n  background-color: var(--background-alt);\n  color: var(--text-alt);\n  border: 1px solid var(--dull);\n}\n\n.error-message {\n  color: var(--error);\n  border-left: 4px solid var(--error);\n  background-color: var(--background);\n}\n\n.selected-text {\n  color: var(--text-select);\n  background-color: var(--background-select);\n}\n```\n\nThis is the recommended approach for:\n- Single-theme applications\n- Simple, clean CSS with short variable names\n- Applications where the theme is not meant to be changed\n\n### Method 2: Using Theme Classes (with combined theme file)\n\nTheme classes can be applied to any HTML element or container:\n\n```html\n\u003c!-- Apply theme to the body for site-wide styling --\u003e\n\u003cbody class=\"theme-biscuit-sol-dark\"\u003e...\u003c/body\u003e\n\n\u003c!-- For Biscuit Sol Light theme --\u003e\n\u003cbody class=\"theme-biscuit-sol-light\"\u003e...\u003c/body\u003e\n\n\u003c!-- For Biscuit Mar Dark theme --\u003e\n\u003cbody class=\"theme-biscuit-mar-dark\"\u003e...\u003c/body\u003e\n\n\u003c!-- For Biscuit Mar Light theme --\u003e\n\u003cbody class=\"theme-biscuit-mar-light\"\u003e...\u003c/body\u003e\n\n\u003c!-- Apply different themes to different sections --\u003e\n\u003cdiv class=\"container\"\u003e\n  \u003csection class=\"theme-biscuit-sol-dark\"\u003e\n    \u003ch2\u003eDark Section\u003c/h2\u003e\n    \u003cp\u003eThis section uses the Sol Dark theme.\u003c/p\u003e\n  \u003c/section\u003e\n\n  \u003csection class=\"theme-biscuit-sol-light\"\u003e\n    \u003ch2\u003eLight Section\u003c/h2\u003e\n    \u003cp\u003eThis section uses the Sol Light theme.\u003c/p\u003e\n  \u003c/section\u003e\n\n  \u003c!-- Nested themes - inner elements can override parent themes --\u003e\n  \u003csection class=\"theme-biscuit-mar-dark\"\u003e\n    \u003ch2\u003eMar Dark Section\u003c/h2\u003e\n    \u003cp\u003eThis section uses the Mar Dark theme.\u003c/p\u003e\n\n    \u003cdiv class=\"theme-biscuit-mar-light\"\u003e\n      \u003ch3\u003eNested Light Section\u003c/h3\u003e\n      \u003cp\u003eThis div uses the Mar Light theme despite being inside a Mar Dark section.\u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/section\u003e\n\u003c/div\u003e\n```\n\nWhen using theme classes with the combined file, you can access colors with standard variable names in the element and its children:\n\n```css\n/* Using semantic alias variables */\n.my-element {\n  color: var(--text);\n  background-color: var(--background);\n}\n\n/* Using base color variables directly */\n.my-syntax-highlight {\n  --keyword-color: var(--base0E);    /* Keywords */\n  --string-color: var(--base0B);     /* Strings */\n  --variable-color: var(--base08);   /* Variables */\n  --function-color: var(--base0D);   /* Functions */\n  --comment-color: var(--base03);    /* Comments */\n  --background-color: var(--base00); /* Background */\n}\n\n.my-syntax-highlight .keyword { color: var(--keyword-color); }\n.my-syntax-highlight .string { color: var(--string-color); }\n.my-syntax-highlight .variable { color: var(--variable-color); }\n.my-syntax-highlight .function { color: var(--function-color); }\n.my-syntax-highlight .comment { color: var(--comment-color); }\n```\n\nThis approach is useful for:\n- Creating multi-themed applications\n- Implementing theme-switching functionality\n- Creating sections with different themes on the same page\n\n### Method 3: Using Direct Theme Variables (with combined theme file)\n\nWith the combined file, all theme colors are also directly available at the root level with prefixed names:\n\n```css\n/* Using specific theme colors directly from any variant */\n.element {\n  color: var(--biscuit-sol-dark-text);\n  background-color: var(--biscuit-mar-light-background);\n}\n\n.button {\n  background-color: var(--biscuit-sol-dark-primary);\n  color: var(--biscuit-mar-light-text);\n  border: 2px solid var(--biscuit-mar-dark-accent);\n}\n\n/* Using specific base colors directly */\n.code-block {\n  color: var(--biscuit-sol-light-base0B); /* Strings from Sol Light */\n  background-color: var(--biscuit-mar-dark-base01); /* Background from Mar Dark */\n}\n```\n\nThis approach is useful for:\n- Creating mixed theme elements\n- Using colors from multiple theme variants simultaneously\n- Creating custom color schemes based on Biscuit colors\n\n## 🎨 Theme Structure\n\n### Root Level Variables (Individual Files)\n\nWhen using individual theme files, all variables are available directly at the root level:\n\n- Base colors: `--base00` through `--base0F`\n- Semantic aliases: \n  - `--text` - Default text color (maps to base05)\n  - `--primary` - Primary interactive elements (maps to base0D)\n  - `--secondary` - Secondary interactive elements (maps to base0E)\n  - `--background` - Main background color (maps to base00)\n  - `--accent` - Accent color for highlights (maps to base0A)\n  - `--dull` - For muted text like comments (maps to base03)\n  - `--warning` - For warning messages and indicators (maps to base09)\n  - `--error` - For error messages and indicators (maps to base08)\n  - `--text-select` - For text in selected areas (maps to base05)\n  - `--background-select` - For backgrounds of selected areas (maps to base02)\n  - `--text-alt` - For alternative text colors (maps to base04)\n  - `--background-alt` - For alternative backgrounds (maps to base01)\n\n### Root Level Variables (Combined File)\n\nEvery theme color is available directly at the root level with the following naming pattern:\n\n- Base colors: `--biscuit-[variant]-base[00-0F]`\n  - Example: `--biscuit-sol-dark-base08`\n  \n- Semantic aliases: `--biscuit-[variant]-[purpose]`\n  - Example: `--biscuit-mar-light-text`\n\nWhere `[variant]` can be:\n- `sol-dark`\n- `sol-light`\n- `mar-dark`\n- `mar-light`\n\nAnd `[purpose]` can be any of the following semantic aliases:\n- `text` - Default text color\n- `primary` - Primary interactive elements\n- `secondary` - Secondary interactive elements\n- `background` - Main background color\n- `accent` - Accent color for highlights\n- `dull` - For muted text like comments\n- `warning` - For warning messages and indicators\n- `error` - For error messages and indicators\n- `text-select` - For text in selected areas\n- `background-select` - For backgrounds of selected areas\n- `text-alt` - For alternative text colors\n- `background-alt` - For alternative backgrounds\n\n### Theme Class Variables (Combined File)\n\nThe standard Base16 variables (`--base00` through `--base0F`) and semantic aliases (`--text`, `--primary`, etc.) are only available when you apply one of the theme classes on the element or one of its parents. \n\n## 📊 Color Meaning\n\nThe Base16 colors follow these conventions:\n\n- `base00`: Default Background\n- `base01`: Lighter Background (Status bars, line numbers)\n- `base02`: Selection Background\n- `base03`: Comments, Invisibles, Line Highlighting\n- `base04`: Dark Foreground (Used for status bars)\n- `base05`: Default Foreground, Caret, Delimiters, Operators\n- `base06`: Light Foreground\n- `base07`: Light Background\n- `base08`: Variables, XML Tags, Markup Link Text, Markup Lists\n- `base09`: Integers, Boolean, Constants, XML Attributes\n- `base0A`: Classes, Markup Link Url\n- `base0B`: Strings, Inherited Class, Markup Code\n- `base0C`: Support, Regular Expressions, Escape Characters, Markup Quotes\n- `base0D`: Functions, Methods, Attribute IDs, Headings\n- `base0E`: Keywords, Storage, Selector, Markup Italic\n- `base0F`: Deprecated, Opening/Closing Embedded Language Tags\n\n## 👨‍🎨 Design Philosophy\n\nThe Biscuit Theme was designed with these principles in mind:\n\n- **☀️ As Warm as a Summer's Day**: Biscuit uses warm tones that go easy on the eyes and invoke feelings of warmth.\n- **🍫 Chocolatey**: Background colors are the cornerstone of the theme, designed to be easy on the eyes as they're the colors you'll see the most.\n- **🥛 Milky**: Foreground colors are chosen to comfort the eyes while reading text.\n\n## 💝 Thanks To\n\n- The original [Biscuit Theme](https://github.com/Biscuit-Theme/biscuit) creators for their wonderful color scheme\n- [Base16](https://github.com/chriskempson/base16) for the styling guidelines\n\n## 📝 License\n\nThis is a port of the Biscuit Theme and follows the Biscuit License.\n\n### TL;DR License Requirements\n- You **MUST** credit the Biscuit Project as the source of the color scheme in your application\n- Include attribution to the Biscuit Project and link to the official repository: https://github.com/Biscuit-Theme/biscuit\n- Your project must be open source\n- You cannot redistribute Biscuit under other names\n\nPlease review the [LICENSE.md](./LICENSE.md) file for complete terms and conditions before using this theme.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fduskyelf%2Fbiscuit-css-draft","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fduskyelf%2Fbiscuit-css-draft","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fduskyelf%2Fbiscuit-css-draft/lists"}