{"id":15024097,"url":"https://github.com/sap/fundamental-styles","last_synced_at":"2026-06-15T21:00:51.540Z","repository":{"id":37270573,"uuid":"187018040","full_name":"SAP/fundamental-styles","owner":"SAP","description":"SAP Design System component library for building SAP user interfaces with any web technology.","archived":false,"fork":false,"pushed_at":"2026-06-11T15:12:41.000Z","size":486138,"stargazers_count":226,"open_issues_count":16,"forks_count":67,"subscribers_count":13,"default_branch":"main","last_synced_at":"2026-06-11T17:03:54.130Z","etag":null,"topics":["open-source"],"latest_commit_sha":null,"homepage":"https://sap.github.io/fundamental-styles","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SAP.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2019-05-16T11:54:09.000Z","updated_at":"2026-06-11T15:08:39.000Z","dependencies_parsed_at":"2023-09-29T07:24:46.480Z","dependency_job_id":"b21ea43f-7b73-4584-b63f-237c60e7d0ab","html_url":"https://github.com/SAP/fundamental-styles","commit_stats":{"total_commits":5659,"total_committers":88,"mean_commits":64.30681818181819,"dds":0.5880897685103375,"last_synced_commit":"b2f523e365c07b11f986a4026d79ba31f2674ae4"},"previous_names":[],"tags_count":2517,"template":false,"template_full_name":null,"purl":"pkg:github/SAP/fundamental-styles","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAP%2Ffundamental-styles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAP%2Ffundamental-styles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAP%2Ffundamental-styles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAP%2Ffundamental-styles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SAP","download_url":"https://codeload.github.com/SAP/fundamental-styles/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAP%2Ffundamental-styles/sbom","scorecard":{"id":123737,"data":{"date":"2025-08-11","repo":{"name":"github.com/SAP/fundamental-styles","commit":"9c19abd06298966515386d3cea19e84dfa98660a"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":5.1,"checks":[{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Code-Review","score":5,"reason":"Found 15/30 approved changesets -- score normalized to 5","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":10,"reason":"30 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 10","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/chromatic.yml:1","Warn: no topLevel permission defined: .github/workflows/create-release.yml:1","Warn: no topLevel permission defined: .github/workflows/on-pull.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: Apache License 2.0: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Security-Policy","score":10,"reason":"security policy file detected","details":["Info: security policy file detected: github.com/SAP/.github/SECURITY.md:1","Info: Found linked content: github.com/SAP/.github/SECURITY.md:1","Info: Found disclosure, vulnerability, and/or timelines in security policy: github.com/SAP/.github/SECURITY.md:1","Info: Found text in security policy: github.com/SAP/.github/SECURITY.md:1"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/chromatic.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/fundamental-styles/chromatic.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/chromatic.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/fundamental-styles/chromatic.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/create-release.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/fundamental-styles/create-release.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/create-release.yml:83: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/fundamental-styles/create-release.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/create-release.yml:111: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/fundamental-styles/create-release.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/create-release.yml:123: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/fundamental-styles/create-release.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-pull.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/fundamental-styles/on-pull.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/on-pull.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/fundamental-styles/on-pull.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-pull.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/fundamental-styles/on-pull.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/on-pull.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/fundamental-styles/on-pull.yml/main?enable=pin","Info:   0 out of   6 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   4 third-party GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 15 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":1,"reason":"9 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx","Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6","Warn: Project is vulnerable to: GHSA-8hc4-vh64-cxmj","Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99","Warn: Project is vulnerable to: GHSA-jgmv-j7ww-jx2x","Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-16T03:11:07.111Z","repository_id":37270573,"created_at":"2025-08-16T03:11:07.111Z","updated_at":"2025-08-16T03:11:07.111Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34379915,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-15T02:00:07.085Z","response_time":63,"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":["open-source"],"created_at":"2024-09-24T19:59:48.032Z","updated_at":"2026-06-15T21:00:51.532Z","avatar_url":"https://github.com/SAP.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fundamental Library Styles\n\n### Lightweight, framework-agnostic CSS component library\n\n\u003ca href=\"https://badge.fury.io/js/fundamental-styles\"\u003e\u003cimg src=\"https://badge.fury.io/js/fundamental-styles.svg\" alt=\"NPM Version\"/\u003e\u003c/a\u003e\u003ca href=\"https://github.com/SAP/fundamental-styles/actions\"\u003e\u003cimg src=\"https://github.com/SAP/fundamental-styles/actions/workflows/create-release.yml/badge.svg?branch=main\" alt=\"CI Status\"/\u003e\u003c/a\u003e\u003ca href=\"https://www.npmjs.com/package/fundamental-styles\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/fundamental-styles?label=downloads\" alt=\"NPM Downloads\"/\u003e\u003c/a\u003e\u003ca href=\"https://join.slack.com/t/ui-fundamentals/shared_invite/enQtNTIzOTU0Mzc2NTc5LWQzZWI5MWFhYjE5OTc4YzliN2JhOTc1ZjQxZTg1YjZiMWZiYzRkNjMwYzgyMmFkYmNhZDVjMWE5MDIzOWEzMmM\"\u003e\u003cimg src=\"https://img.shields.io/badge/slack-ui--fundamentals-blue.svg?logo=slack\" alt=\"Slack\"/\u003e\u003c/a\u003e\u003ca href=\"https://api.reuse.software/info/github.com/SAP/fundamental-styles\"\u003e\u003cimg src=\"https://api.reuse.software/badge/github.com/SAP/fundamental-styles\" alt=\"REUSE status\"/\u003e\u003c/a\u003e\u003ca href=\"https://storybook.js.org/\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/storybookjs/brand/main/badge/badge-storybook.svg\" alt=\"Storybook\"/\u003e\u003c/a\u003e\u003ca href=\"https://fundamental-styles.netlify.app\"\u003e\u003cimg src=\"https://img.shields.io/badge/Hosted%20on-Netlify-00C7B7?style=flat\u0026logo=netlify\u0026logoColor=white\" alt=\"Hosted on Netlify\"/\u003e\u003c/a\u003e\n\nA lightweight CSS library for building SAP applications. Framework-agnostic—works with Angular, React, Vue, or vanilla HTML. Provides ready-to-use components and styles that help you create consistent, professional SAP applications quickly.\n\n## 🚀 Quick Start\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003c!-- 1. Theme CSS (required) --\u003e\n  \u003clink href=\"https://unpkg.com/@sap-theming/theming-base-content/content/Base/baseLib/sap_horizon/css_variables.css\" rel=\"stylesheet\"\u003e\n  \u003clink href=\"https://unpkg.com/fundamental-styles@latest/dist/theming/sap_horizon.css\" rel=\"stylesheet\"\u003e\n\n  \u003c!-- 2. Component CSS --\u003e\n  \u003clink href=\"https://unpkg.com/fundamental-styles@latest/dist/button.css\" rel=\"stylesheet\"\u003e\n  \u003clink href=\"https://unpkg.com/fundamental-styles@latest/dist/input.css\" rel=\"stylesheet\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cbutton class=\"fd-button fd-button--emphasized\"\u003eHello World\u003c/button\u003e\n  \u003cinput class=\"fd-input\" type=\"text\" placeholder=\"Enter text\"\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n\n## 📦 Installation\n\n### ⬇️ NPM (Recommended)\n\n```bash\nnpm install fundamental-styles @sap-theming/theming-base-content\n```\n\n**Import in your JavaScript/TypeScript:**\n\n```javascript\n// Theme CSS (required)\nimport '@sap-theming/theming-base-content/content/Base/baseLib/sap_horizon/css_variables.css';\nimport 'fundamental-styles/dist/theming/sap_horizon.css';\n\n// Option A: All components\nimport 'fundamental-styles/dist/fundamental-styles.css';\n\n// Option B: Only components you need (smaller bundle)\nimport 'fundamental-styles/dist/button.css';\nimport 'fundamental-styles/dist/input.css';\nimport 'fundamental-styles/dist/icon.css';\n```\n\n**Or import in your SCSS/CSS:**\n\n```scss\n@import 'fundamental-styles/dist/fundamental-styles.css';\n```\n\n### 🌐 CDN\n\n```html\n\u003c!-- Theme CSS --\u003e\n\u003clink href=\"https://unpkg.com/@sap-theming/theming-base-content/content/Base/baseLib/sap_horizon/css_variables.css\" rel=\"stylesheet\"\u003e\n\u003clink href=\"https://unpkg.com/fundamental-styles@latest/dist/theming/sap_horizon.css\" rel=\"stylesheet\"\u003e\n\n\u003c!-- All components --\u003e\n\u003clink href=\"https://unpkg.com/fundamental-styles@latest/dist/fundamental-styles.css\" rel=\"stylesheet\"\u003e\n```\n\n**Pin to specific version:**\n\n```html\n\u003clink href=\"https://unpkg.com/fundamental-styles@0.41.4/dist/fundamental-styles.css\" rel=\"stylesheet\"\u003e\n```\n\n**Use prerelease version:**\n\n```html\n\u003clink href=\"https://unpkg.com/fundamental-styles@prerelease/dist/fundamental-styles.css\" rel=\"stylesheet\"\u003e\n```\n\n\n## 👋 Hello World Example\n\nComplete working example with buttons, forms, and messages:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n  \u003ctitle\u003eFundamental Styles - Hello World\u003c/title\u003e\n\n  \u003c!-- Theme base variables --\u003e\n  \u003clink href=\"https://unpkg.com/@sap-theming/theming-base-content/content/Base/baseLib/sap_horizon/css_variables.css\" rel=\"stylesheet\"\u003e\n\n  \u003c!-- Fundamental Styles theme --\u003e\n  \u003clink href=\"https://unpkg.com/fundamental-styles@latest/dist/theming/sap_horizon.css\" rel=\"stylesheet\"\u003e\n\n  \u003c!-- Fundamental Styles components --\u003e\n  \u003clink href=\"https://unpkg.com/fundamental-styles@latest/dist/button.css\" rel=\"stylesheet\"\u003e\n  \u003clink href=\"https://unpkg.com/fundamental-styles@latest/dist/input.css\" rel=\"stylesheet\"\u003e\n  \u003clink href=\"https://unpkg.com/fundamental-styles@latest/dist/form-item.css\" rel=\"stylesheet\"\u003e\n  \u003clink href=\"https://unpkg.com/fundamental-styles@latest/dist/form-label.css\" rel=\"stylesheet\"\u003e\n  \u003clink href=\"https://unpkg.com/fundamental-styles@latest/dist/message-strip.css\" rel=\"stylesheet\"\u003e\n  \u003clink href=\"https://unpkg.com/fundamental-styles@latest/dist/icon.css\" rel=\"stylesheet\"\u003e\n\u003c/head\u003e\n\u003cbody style=\"padding: 2rem; font-family: '72', Arial, sans-serif;\"\u003e\n\n  \u003ch1\u003eWelcome to Fundamental Styles\u003c/h1\u003e\n\n  \u003c!-- Form with input --\u003e\n  \u003cdiv class=\"fd-form-item\" style=\"margin-bottom: 1rem;\"\u003e\n    \u003clabel class=\"fd-form-label\" for=\"name-input\"\u003eYour Name\u003c/label\u003e\n    \u003cinput class=\"fd-input\" id=\"name-input\" type=\"text\" placeholder=\"Enter your name\"\u003e\n  \u003c/div\u003e\n\n  \u003c!-- Buttons --\u003e\n  \u003cdiv style=\"margin-bottom: 1rem;\"\u003e\n    \u003cbutton class=\"fd-button fd-button--emphasized\"\u003eSubmit\u003c/button\u003e\n    \u003cbutton class=\"fd-button\"\u003eCancel\u003c/button\u003e\n    \u003cbutton class=\"fd-button fd-button--transparent\"\u003e\n      \u003cspan class=\"sap-icon--settings\"\u003e\u003c/span\u003e Settings\n    \u003c/button\u003e\n  \u003c/div\u003e\n\n  \u003c!-- Message strips --\u003e\n  \u003cdiv class=\"fd-message-strip fd-message-strip--success\" role=\"alert\" style=\"margin-bottom: 0.5rem;\"\u003e\n    \u003cp class=\"fd-message-strip__text\"\u003eSuccess! Your form is ready.\u003c/p\u003e\n  \u003c/div\u003e\n\n  \u003cdiv class=\"fd-message-strip fd-message-strip--information\" role=\"alert\"\u003e\n    \u003cp class=\"fd-message-strip__text\"\u003e\n      \u003cspan class=\"sap-icon--hint\"\u003e\u003c/span\u003e\n      Explore more components at\n      \u003ca href=\"https://sap.github.io/fundamental-styles/\" target=\"_blank\"\u003esap.github.io/fundamental-styles\u003c/a\u003e\n    \u003c/p\u003e\n  \u003c/div\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## 🎨 Theming\n\n### ⚡ Available Themes\n\n| Theme | Description | Path |\n|-------|-------------|------|\n| `sap_horizon` | Morning Horizon (Light) | `dist/theming/sap_horizon.css` |\n| `sap_horizon_dark` | Evening Horizon (Dark) | `dist/theming/sap_horizon_dark.css` |\n| `sap_horizon_hcb` | Horizon High Contrast Black | `dist/theming/sap_horizon_hcb.css` |\n| `sap_horizon_hcw` | Horizon High Contrast White | `dist/theming/sap_horizon_hcw.css` |\n| `sap_horizon_set` | Horizon Set | `dist/theming/sap_horizon_set.css` |\n| `sap_fiori_3` | Quartz Light | `dist/theming/sap_fiori_3.css` |\n| `sap_fiori_3_dark` | Quartz Dark | `dist/theming/sap_fiori_3_dark.css` |\n| `sap_fiori_3_hcb` | Quartz High Contrast Black | `dist/theming/sap_fiori_3_hcb.css` |\n| `sap_fiori_3_hcw` | Quartz High Contrast White | `dist/theming/sap_fiori_3_hcw.css` |\n| `sap_fiori_3_light_dark` | Quartz Auto (Depending on the OS Settings) | `dist/theming/sap_fiori_3_light_dark.css` |\n| `sap_fiori_3_set` | Quartz Set | `dist/theming/sap_fiori_3_set.css` |\n| `sap_belize` | Belize (legacy) | `dist/theming/sap_belize.css` |\n\n### 🎯 How to Apply a Theme\n\n**Always include TWO CSS files:**\n\n\u003e **⚠️ Required:** Both files are mandatory for themes to work correctly.\n\n1. **Theme base variables** (from `@sap-theming/theming-base-content`)\n2. **Fundamental Styles theme customizations** (from `fundamental-styles`)\n\n**Example with CDN:**\n\n```html\n\u003c!-- 1. Base variables --\u003e\n\u003clink href=\"https://unpkg.com/@sap-theming/theming-base-content/content/Base/baseLib/sap_horizon_dark/css_variables.css\" rel=\"stylesheet\"\u003e\n\n\u003c!-- 2. Theme customizations --\u003e\n\u003clink href=\"https://unpkg.com/fundamental-styles@latest/dist/theming/sap_horizon_dark.css\" rel=\"stylesheet\"\u003e\n```\n\n**Example with NPM:**\n\n```javascript\nimport '@sap-theming/theming-base-content/content/Base/baseLib/sap_horizon_dark/css_variables.css';\nimport 'fundamental-styles/dist/theming/sap_horizon_dark.css';\n```\n\n### 🔤 Fonts and Icons\n\nFonts and icons are **not included** in `fundamental-styles`. They come from `@sap-theming/theming-base-content`.\n\n\u003e **💡 Important:** Always install `@sap-theming/theming-base-content` alongside `fundamental-styles` for fonts and icons to work properly.\n\n#### Setup Steps:\n\n**1. Install the theming package**\n\n```bash\nnpm install @sap-theming/theming-base-content\n```\n\n**2. Configure your bundler to include fonts**\n\nFonts are located in the theming package:\n- **Horizon themes**: `@sap-theming/theming-base-content/content/Base/baseLib/sap_horizon/fonts/`\n- **Quartz (Fiori 3) themes**: `@sap-theming/theming-base-content/content/Base/baseLib/baseTheme/fonts/`\n\nMake sure your bundler (Webpack, Vite, etc.) can handle font files from node_modules.\n\n**3. Set the base font size in your global CSS**\n\nAdd this to your main CSS file or `index.html`:\n\n```css\nhtml {\n  font-size: 16px; /* Required for proper component sizing */\n}\n```\n\nThis ensures all components scale correctly. The `16px` base is required for SAP Design specifications.\n\n\n## 📚 Documentation \u0026 Resources\n\n### 📖 Quick Reference\n\n| Resource | Description |\n|----------|-------------|\n| **[📘 Component Catalog](https://sap.github.io/fundamental-styles/)** | Live examples with code snippets |\n| **[🤖 CLAUDE.md](https://github.com/SAP/fundamental-styles/blob/main/CLAUDE.md)** | Quick reference for AI agents \u0026 developers |\n| **[🎨 Icon List](https://fundamental-styles.netlify.app/?path=/docs/sap-design-components-icons-sap-icons--docs)** | All available SAP icons |\n\n### Machine-Readable Docs (for AI \u0026 Tooling)\n\n| File | Description |\n|------|-------------|\n| [llms.txt](https://github.com/SAP/fundamental-styles/blob/main/llms.txt) | AI discovery file |\n| [docs/ai-component-index.md](https://github.com/SAP/fundamental-styles/blob/main/docs/ai-component-index.md) | Component guide (120 components) |\n| [docs/component-catalog.json](https://github.com/SAP/fundamental-styles/blob/main/docs/component-catalog.json) | JSON component catalog |\n| [docs/utility-classes.json](https://github.com/SAP/fundamental-styles/blob/main/docs/utility-classes.json) | Utility classes (227 classes) |\n| [docs/component-relationships.json](https://github.com/SAP/fundamental-styles/blob/main/docs/component-relationships.json) | Component dependencies |\n\n### Framework Implementations\n\n- **[Angular](https://github.com/SAP/fundamental-ngx)** - Angular wrapper components\n\n## 📦 Monorepo Packages\n\nThis repository is a monorepo containing multiple packages:\n\n### 🚀 Publishable Packages\n\n| Package | Description | Install |\n|---------|-------------|---------|\n| **[fundamental-styles](https://github.com/SAP/fundamental-styles/tree/main/packages/styles)** | Core library (120+ components) | `npm i fundamental-styles` |\n| **[common-css](https://github.com/SAP/fundamental-styles/tree/main/packages/common-css)** | Utility classes \u0026 SCSS mixins | `npm i @fundamental-styles/common-css` |\n| **[cx](https://github.com/SAP/fundamental-styles/tree/main/packages/cx)** | CX-specific components | `npm i @fundamental-styles/cx` |\n| **[theming-preview](https://github.com/SAP/fundamental-styles/tree/main/packages/theming-preview)** | SAP Theme Designer preview | `npm i @fundamental-styles/theming-preview` |\n\n## 🛠️ Development\n\n### 🎬 Setup\n\n```bash\n# Clone repository\ngit clone https://github.com/SAP/fundamental-styles.git\ncd fundamental-styles\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm start\n\n# Start with production build\nnpm run start:prod\n```\n\n### ⚙️ Prerequisites\n\n- Git\n- [Node.js LTS](https://nodejs.org/)\n\n### 🤝 Contributing\n\n- [SAP Contribution Guidelines](https://github.com/SAP/.github/blob/main/CONTRIBUTING.md)\n- [Contribution Guidelines](https://github.com/SAP/fundamental-styles/wiki/Contribution-Guidelines)\n- [Development Guidelines](https://github.com/SAP/fundamental-styles/wiki/Development-Guidelines)\n- [Visual Testing Guide](https://github.com/SAP/fundamental-styles/wiki/Visual-testing-with-Chromatic)\n\n\n## 📋 SLA (Service Level Agreement)\n\nOur Service Level Agreement. Fundamental Library Styles is aiming to deliver:\n\n### Core Commitments\n\nThis library provides:\n\n- **SAP Design-compliant CSS** - Styles that follow SAP Design System standards\n- **Reference HTML** - Exact markup structure that consuming libraries must follow\n- **Framework compatibility** - Used by [Angular](https://github.com/SAP/fundamental-ngx), [React](https://github.com/SAP/fundamental-react), and [Vue](https://github.com/SAP/fundamental-vue) implementations\n\n### How We Build It\n\n- **Theme-able components** - Built on [SAP Theming Base Content](https://github.com/SAP/theming-base-content) using CSS Custom Properties\n- **Self-contained styles** - Each component includes all necessary CSS with no external dependencies bleeding in or out\n- **Accessibility first**\n  - WCAG 2.0 Level AA color contrast (4.5:1 for text)\n  - Semantic HTML structure\n  - ARIA attributes included in reference HTML\n\n\n## 🔢 Versioning\n\nFollows [Semantic Versioning](https://semver.org/): `[MAJOR].[MINOR].[PATCH]`\n\n### 🚨 Breaking Changes (MAJOR)\n\n- Dropping existing classnames, CSS variables, color names, spacing parameters\n- Altering HTML markup structure\n- Non-visual attribute changes (`role`, `aria-*`, `data-*`)\n\n\u003e **Note:** Even non-visual HTML changes are breaking because this library provides reference HTML for JS framework implementations.\n\n### ✅ Non-Breaking Changes (MINOR/PATCH)\n\n- Adding new classnames, CSS variables, colors\n- Modifying CSS properties/values of existing classes\n\n### 📡 Release Channels\n\n- **Stable**: `npm install fundamental-styles@latest`\n- **Prerelease**: `npm install fundamental-styles@prerelease` (merges to `main` branch, includes `-rc.X` suffix)\n\n## 💬 Support\n\n- **[Create an issue](https://github.com/SAP/fundamental-styles/issues/new/choose)** - Bug reports \u0026 feature requests\n\n\n## 🙏 Thanks\n\n\u003ca href=\"https://www.chromatic.com/\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/321738/84662277-e3db4f80-af1b-11ea-88f5-91d67a5e59f6.png\" width=\"153\" height=\"30\" alt=\"Chromatic\" /\u003e\u003c/a\u003e\n\nThanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsap%2Ffundamental-styles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsap%2Ffundamental-styles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsap%2Ffundamental-styles/lists"}