From b537860ab0121bb949538228ce6c019486cd274a Mon Sep 17 00:00:00 2001 From: Vincent Prothais Date: Mon, 8 Jun 2026 09:38:25 +0200 Subject: [PATCH 1/4] commit using ouds web to see updates --- .github/skills/using-ouds-web/SKILL.md | 212 +++++++++++++++++ .../references/components/alerts.md | 102 ++++++++ .../references/components/badges.md | 98 ++++++++ .../references/components/breadcrumb.md | 29 +++ .../references/components/bullet-list.md | 76 ++++++ .../references/components/buttons.md | 129 +++++++++++ .../references/components/checkbox.md | 132 +++++++++++ .../references/components/chips.md | 109 +++++++++ .../references/components/divider.md | 42 ++++ .../references/components/footer.md | 98 ++++++++ .../references/components/header.md | 139 +++++++++++ .../references/components/icon.md | 148 ++++++++++++ .../references/components/links.md | 95 ++++++++ .../references/components/password-input.md | 128 ++++++++++ .../references/components/radio-button.md | 140 +++++++++++ .../references/components/select-input.md | 126 ++++++++++ .../references/components/skeleton.md | 88 +++++++ .../references/components/switch.md | 167 ++++++++++++++ .../references/components/tags.md | 149 ++++++++++++ .../references/components/text-area.md | 99 ++++++++ .../references/components/text-input.md | 189 +++++++++++++++ .../references/foundation/approach.md | 30 +++ .../references/foundation/color-modes.md | 121 ++++++++++ .../references/foundation/color-palette.md | 38 +++ .../references/foundation/component.md | 38 +++ .../references/foundation/css-variables.md | 60 +++++ .../references/foundation/form-validation.md | 218 ++++++++++++++++++ .../references/foundation/options.md | 21 ++ .../references/foundation/reboot.md | 83 +++++++ .../references/foundation/typography.md | 153 ++++++++++++ .../getting-started/accessibility.md | 51 ++++ .../getting-started/browsers-devices.md | 30 +++ .../getting-started/component-versioning.md | 9 + .../references/getting-started/contents.md | 49 ++++ .../references/getting-started/download.md | 80 +++++++ .../getting-started/introduction.md | 57 +++++ .../references/getting-started/javascript.md | 106 +++++++++ .../getting-started/migration-from-boosted.md | 71 ++++++ .../references/getting-started/migration.md | 37 +++ .../references/getting-started/sass.md | 126 ++++++++++ .../references/layout/breakpoints.md | 62 +++++ .../references/layout/columns.md | 81 +++++++ .../references/layout/containers.md | 46 ++++ .../references/layout/css-grid.md | 89 +++++++ .../using-ouds-web/references/layout/grid.md | 130 +++++++++++ .../references/layout/gutters.md | 82 +++++++ .../references/layout/utilities.md | 43 ++++ .../references/layout/z-index.md | 14 ++ .../references/utilities/api.md | 132 +++++++++++ .../references/utilities/aspect-ratio.md | 43 ++++ .../references/utilities/background.md | 71 ++++++ .../references/utilities/border.md | 91 ++++++++ .../references/utilities/color-background.md | 5 + .../references/utilities/color.md | 52 +++++ .../references/utilities/colored-link.md | 5 + .../references/utilities/display.md | 56 +++++ .../references/utilities/flex.md | 111 +++++++++ .../references/utilities/float.md | 23 ++ .../references/utilities/interaction.md | 32 +++ .../references/utilities/object-fit.md | 38 +++ .../references/utilities/opacity.md | 35 +++ .../references/utilities/overflow.md | 48 ++++ .../references/utilities/position.md | 52 +++++ .../references/utilities/shadow.md | 27 +++ .../references/utilities/sizing.md | 42 ++++ .../references/utilities/spacing.md | 82 +++++++ .../references/utilities/stack.md | 69 ++++++ .../references/utilities/stretched-link.md | 33 +++ .../references/utilities/text-truncation.md | 19 ++ .../references/utilities/text.md | 101 ++++++++ .../references/utilities/vertical-align.md | 31 +++ .../references/utilities/visibility.md | 12 + .../references/utilities/visually-hidden.md | 28 +++ .../references/utilities/z-index.md | 17 ++ 74 files changed, 5675 insertions(+) create mode 100644 .github/skills/using-ouds-web/SKILL.md create mode 100644 .github/skills/using-ouds-web/references/components/alerts.md create mode 100644 .github/skills/using-ouds-web/references/components/badges.md create mode 100644 .github/skills/using-ouds-web/references/components/breadcrumb.md create mode 100644 .github/skills/using-ouds-web/references/components/bullet-list.md create mode 100644 .github/skills/using-ouds-web/references/components/buttons.md create mode 100644 .github/skills/using-ouds-web/references/components/checkbox.md create mode 100644 .github/skills/using-ouds-web/references/components/chips.md create mode 100644 .github/skills/using-ouds-web/references/components/divider.md create mode 100644 .github/skills/using-ouds-web/references/components/footer.md create mode 100644 .github/skills/using-ouds-web/references/components/header.md create mode 100644 .github/skills/using-ouds-web/references/components/icon.md create mode 100644 .github/skills/using-ouds-web/references/components/links.md create mode 100644 .github/skills/using-ouds-web/references/components/password-input.md create mode 100644 .github/skills/using-ouds-web/references/components/radio-button.md create mode 100644 .github/skills/using-ouds-web/references/components/select-input.md create mode 100644 .github/skills/using-ouds-web/references/components/skeleton.md create mode 100644 .github/skills/using-ouds-web/references/components/switch.md create mode 100644 .github/skills/using-ouds-web/references/components/tags.md create mode 100644 .github/skills/using-ouds-web/references/components/text-area.md create mode 100644 .github/skills/using-ouds-web/references/components/text-input.md create mode 100644 .github/skills/using-ouds-web/references/foundation/approach.md create mode 100644 .github/skills/using-ouds-web/references/foundation/color-modes.md create mode 100644 .github/skills/using-ouds-web/references/foundation/color-palette.md create mode 100644 .github/skills/using-ouds-web/references/foundation/component.md create mode 100644 .github/skills/using-ouds-web/references/foundation/css-variables.md create mode 100644 .github/skills/using-ouds-web/references/foundation/form-validation.md create mode 100644 .github/skills/using-ouds-web/references/foundation/options.md create mode 100644 .github/skills/using-ouds-web/references/foundation/reboot.md create mode 100644 .github/skills/using-ouds-web/references/foundation/typography.md create mode 100644 .github/skills/using-ouds-web/references/getting-started/accessibility.md create mode 100644 .github/skills/using-ouds-web/references/getting-started/browsers-devices.md create mode 100644 .github/skills/using-ouds-web/references/getting-started/component-versioning.md create mode 100644 .github/skills/using-ouds-web/references/getting-started/contents.md create mode 100644 .github/skills/using-ouds-web/references/getting-started/download.md create mode 100644 .github/skills/using-ouds-web/references/getting-started/introduction.md create mode 100644 .github/skills/using-ouds-web/references/getting-started/javascript.md create mode 100644 .github/skills/using-ouds-web/references/getting-started/migration-from-boosted.md create mode 100644 .github/skills/using-ouds-web/references/getting-started/migration.md create mode 100644 .github/skills/using-ouds-web/references/getting-started/sass.md create mode 100644 .github/skills/using-ouds-web/references/layout/breakpoints.md create mode 100644 .github/skills/using-ouds-web/references/layout/columns.md create mode 100644 .github/skills/using-ouds-web/references/layout/containers.md create mode 100644 .github/skills/using-ouds-web/references/layout/css-grid.md create mode 100644 .github/skills/using-ouds-web/references/layout/grid.md create mode 100644 .github/skills/using-ouds-web/references/layout/gutters.md create mode 100644 .github/skills/using-ouds-web/references/layout/utilities.md create mode 100644 .github/skills/using-ouds-web/references/layout/z-index.md create mode 100644 .github/skills/using-ouds-web/references/utilities/api.md create mode 100644 .github/skills/using-ouds-web/references/utilities/aspect-ratio.md create mode 100644 .github/skills/using-ouds-web/references/utilities/background.md create mode 100644 .github/skills/using-ouds-web/references/utilities/border.md create mode 100644 .github/skills/using-ouds-web/references/utilities/color-background.md create mode 100644 .github/skills/using-ouds-web/references/utilities/color.md create mode 100644 .github/skills/using-ouds-web/references/utilities/colored-link.md create mode 100644 .github/skills/using-ouds-web/references/utilities/display.md create mode 100644 .github/skills/using-ouds-web/references/utilities/flex.md create mode 100644 .github/skills/using-ouds-web/references/utilities/float.md create mode 100644 .github/skills/using-ouds-web/references/utilities/interaction.md create mode 100644 .github/skills/using-ouds-web/references/utilities/object-fit.md create mode 100644 .github/skills/using-ouds-web/references/utilities/opacity.md create mode 100644 .github/skills/using-ouds-web/references/utilities/overflow.md create mode 100644 .github/skills/using-ouds-web/references/utilities/position.md create mode 100644 .github/skills/using-ouds-web/references/utilities/shadow.md create mode 100644 .github/skills/using-ouds-web/references/utilities/sizing.md create mode 100644 .github/skills/using-ouds-web/references/utilities/spacing.md create mode 100644 .github/skills/using-ouds-web/references/utilities/stack.md create mode 100644 .github/skills/using-ouds-web/references/utilities/stretched-link.md create mode 100644 .github/skills/using-ouds-web/references/utilities/text-truncation.md create mode 100644 .github/skills/using-ouds-web/references/utilities/text.md create mode 100644 .github/skills/using-ouds-web/references/utilities/vertical-align.md create mode 100644 .github/skills/using-ouds-web/references/utilities/visibility.md create mode 100644 .github/skills/using-ouds-web/references/utilities/visually-hidden.md create mode 100644 .github/skills/using-ouds-web/references/utilities/z-index.md diff --git a/.github/skills/using-ouds-web/SKILL.md b/.github/skills/using-ouds-web/SKILL.md new file mode 100644 index 0000000000..1d17b000b3 --- /dev/null +++ b/.github/skills/using-ouds-web/SKILL.md @@ -0,0 +1,212 @@ +--- +name: 'using-ouds-web' +description: 'Provides comprehensive knowledge of the OUDS Web library (Orange Unified Design System for Web), a Bootstrap-based CSS/JS framework for building Orange-branded web interfaces. This skill should be used when generating HTML markup, CSS classes, or JavaScript code that uses OUDS Web components, utilities, layout system, or design tokens. It covers components (buttons, alerts, chips, forms, navigation), layout (grid, breakpoints, containers), utilities (spacing, colors, display, flex), and foundation (typography, color modes, CSS variables, Sass customization).' +--- + +# OUDS Web Library Reference + +## Overview + +OUDS Web is Orange's web implementation of the Orange Unified Design System. It is a fork of Bootstrap with significant modifications for Orange branding and accessibility. + +Key differences from standard Bootstrap: + +- **8 breakpoints** instead of 6: `2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl` +- **OUDS design tokens** for spacing, typography, and colors (e.g., `none`, `3xsmall`, `2xsmall`, `xsmall`, `small`, `medium`, `large`, `xlarge`, `2xlarge`, `3xlarge`) +- **Semantic color system** with `bg-surface-*`, `text-*`, `border-*` token-based classes +- **4 color modes**: `light`, `dark`, `root`, `root-inverted` (set via `data-bs-theme`) +- **Orange-specific components**: header, footer, chips, tags, sticker, stepped-process, title-bar, skeleton, local-navigation, back-to-top, bullet-list, divider, quantity-selector +- **Modified form components**: switch, checkbox, radio-button, text-input, text-area, select-input, password-input use `.control-item-*` pattern +- **CSS variable prefix**: `--bs-` +- **Container**: use `.container-fluid` (not fixed `.container`) +- **Rounded corner buttons**: opt-in via `.use-rounded-corner-buttons` on a parent container +- **Button variants**: `.btn-default`, `.btn-strong`, `.btn-brand`, `.btn-minimal`, `.btn-negative` (not Bootstrap's `.btn-primary`, `.btn-secondary`, etc.) + +## Quick start + +```html + + + + + + OUDS Web + + + +

Hello, world!

+ + + +``` + +Or install via npm: `npm install ouds-web` + +## Reference documentation + +### Getting started + +- [Introduction](references/getting-started/introduction.md) - Quick start, CDN links, JS components +- [Download](references/getting-started/download.md) - Installation methods +- [Contents](references/getting-started/contents.md) - Compiled files structure +- [JavaScript](references/getting-started/javascript.md) - JS plugin usage, data attributes, API +- [Sass](references/getting-started/sass.md) - Sass customization, variables, maps, mixins +- [Accessibility](references/getting-started/accessibility.md) - Accessibility guidelines +- [Browsers & devices](references/getting-started/browsers-devices.md) - Supported browsers +- [Component versioning](references/getting-started/component-versioning.md) - Version tracking +- [Migration](references/getting-started/migration.md) - Migration from previous versions +- [Migration from Boosted](references/getting-started/migration-from-boosted.md) - Boosted to OUDS Web + +### Foundation + +- [Approach](references/foundation/approach.md) - Design principles +- [Typography](references/foundation/typography.md) - Headings, body text, display, font mixins +- [Color palette](references/foundation/color-palette.md) - Available raw colors +- [Color modes](references/foundation/color-modes.md) - Light/dark/root/root-inverted themes +- [CSS variables](references/foundation/css-variables.md) - Custom properties +- [Options](references/foundation/options.md) - Sass configuration options +- [Reboot](references/foundation/reboot.md) - CSS reset and base styles +- [Form validation](references/foundation/form-validation.md) - Validation styles +- [Component](references/foundation/component.md) - Base component architecture + +### Layout + +- [Breakpoints](references/layout/breakpoints.md) - 8-tier responsive system +- [Containers](references/layout/containers.md) - Container-fluid usage +- [Grid](references/layout/grid.md) - 12-column flexbox grid +- [Columns](references/layout/columns.md) - Column sizing and ordering +- [Gutters](references/layout/gutters.md) - Gutter spacing +- [CSS grid](references/layout/css-grid.md) - CSS grid layout +- [Utilities](references/layout/utilities.md) - Layout utilities +- [Z-index](references/layout/z-index.md) - Z-index layers + +### Components + +- [Alerts](references/components/alerts.md) - Alert messages and inline alerts +- [Badges](references/components/badges.md) - Badge indicators +- [Breadcrumb](references/components/breadcrumb.md) - Navigation breadcrumbs +- [Bullet list](references/components/bullet-list.md) - Styled bullet lists +- [Buttons](references/components/buttons.md) - Buttons and navigation buttons +- [Checkbox](references/components/checkbox.md) - Checkbox controls +- [Chips](references/components/chips.md) - Filter and suggestion chips +- [Divider](references/components/divider.md) - Content dividers +- [Footer](references/components/footer.md) - Page footer +- [Header](references/components/header.md) - Responsive page header +- [Icon](references/components/icon.md) - SVG icon system +- [Links](references/components/links.md) - Link styles +- [Password input](references/components/password-input.md) - Password field with toggle +- [Radio button](references/components/radio-button.md) - Radio controls +- [Select input](references/components/select-input.md) - Select inputs +- [Skeleton](references/components/skeleton.md) - Loading placeholders +- [Switch](references/components/switch.md) - Toggle switches +- [Tags](references/components/tags.md) - Tag elements +- [Text area](references/components/text-area.md) - Multiline inputs +- [Text input](references/components/text-input.md) - Single-line inputs + +### Utilities + +- [API](references/utilities/api.md) - Utility API for generating classes +- [Aspect ratio](references/utilities/aspect-ratio.md) - Aspect ratio containers +- [Background](references/utilities/background.md) - Background utilities +- [Border](references/utilities/border.md) - Border utilities +- [Color](references/utilities/color.md) - Text color utilities +- [Color & background](references/utilities/color-background.md) - Combined utilities +- [Colored link](references/utilities/colored-link.md) - Colored link variants +- [Display](references/utilities/display.md) - Display property +- [Flex](references/utilities/flex.md) - Flexbox utilities +- [Float](references/utilities/float.md) - Float positioning +- [Interaction](references/utilities/interaction.md) - User interaction +- [Object fit](references/utilities/object-fit.md) - Object-fit utilities +- [Opacity](references/utilities/opacity.md) - Opacity levels +- [Overflow](references/utilities/overflow.md) - Overflow behavior +- [Position](references/utilities/position.md) - Positioning +- [Shadow](references/utilities/shadow.md) - Box shadows +- [Sizing](references/utilities/sizing.md) - Width and height +- [Spacing](references/utilities/spacing.md) - Margin, padding, gap +- [Stack](references/utilities/stack.md) - Vertical/horizontal stacks +- [Stretched link](references/utilities/stretched-link.md) - Stretched clickable areas +- [Text](references/utilities/text.md) - Text alignment, wrapping, transform +- [Text truncation](references/utilities/text-truncation.md) - Text overflow +- [Vertical align](references/utilities/vertical-align.md) - Vertical alignment +- [Visibility](references/utilities/visibility.md) - Visibility toggling +- [Visually hidden](references/utilities/visually-hidden.md) - Screen reader only +- [Z-index](references/utilities/z-index.md) - Z-index utilities + +## Quick search + +```bash +grep -ri "btn-" references/components/buttons.md +grep -ri "breakpoint" references/layout/breakpoints.md +grep -ri "data-bs-theme" references/foundation/color-modes.md +grep -ri "control-item" references/components/ +grep -ri "\.bg-" references/utilities/background.md +grep -ri "spacing\|margin\|padding" references/utilities/spacing.md +``` + +## Critical conventions + +### Spacing tokens + +Use OUDS token names instead of Bootstrap numeric values: + +| Class pattern | Example | Meaning | +| ---------------------------------- | ------------------------------------------------------------------------------------------------- | -------------- | +| `{p\|m}{t\|b\|s\|e\|x\|y}-{token}` | `p-medium` | padding medium | +| `gap-{token}` | `gap-xsmall` | flex/grid gap | +| Tokens | `none`, `3xsmall`, `2xsmall`, `xsmall`, `small`, `medium`, `large`, `xlarge`, `2xlarge`-`5xlarge` | | + +### Color modes + +```html +
Always light
+
Always dark
+
Follows page theme
+
Opposite of page theme
+``` + +### Form components pattern + +OUDS Web form components use `.control-item-*` classes: + +```html + +``` + +### Button variants + +```html + + + + + + +Next + + +``` + +### Icons (SVG sprite) + +```html + +``` \ No newline at end of file diff --git a/.github/skills/using-ouds-web/references/components/alerts.md b/.github/skills/using-ouds-web/references/components/alerts.md new file mode 100644 index 0000000000..d4c8364bdb --- /dev/null +++ b/.github/skills/using-ouds-web/references/components/alerts.md @@ -0,0 +1,102 @@ +# Alerts + +Two types: **alert message** (`.alert-message`) and **inline alert** (`.alert` alone). + +## Common structure + +- Base class: `.alert` on a `
` +- `.alert-label` — mandatory title element +- `.alert-icon` — icon container + +## Alert message + +Add `.alert-message` to `.alert`. Uses extra layout classes: + +- `.alert-container` — aligns content +- `.alert-text-container` — vertically distributes text +- `.alert-action-container` — wraps action link + close button +- `.alert-close-container` — wraps `.btn-close` only (helps with rounded corners) + +```html +
+
+
+
+

Connection failed.

+
+
+
+``` + +### Functional variants + +`.alert-negative`, `.alert-positive`, `.alert-info`, `.alert-warning` — do NOT add custom icons; icons are automatic. + +### Non-functional variants + +Default (no modifier) and `.alert-accent` — require a custom icon in `.alert-icon` (SVG, ``, or `.icon`). Icon can be removed entirely for non-functional alerts (add `.visually-hidden` context in label). + +### Custom icon (non-functional only) + +- Place ``, ``, or `.icon` inside `.alert-icon` +- Or set CSS custom property `--bs-alert-icon` on the `.alert` +- Or apply `mask-image` on `.alert-icon` + +### Close button + +Place inside `.alert-action-container`: + +```html +
+
+ +
+
+``` + +### With action link + +Add a `.link` element (`` or ` +``` + +## Accessibility + +- Always add `.visually-hidden` text to describe the badge's meaning +- Functional badges should not be combined (colorblind users cannot differentiate); prefer badge-icon variant for distinction + +> **Not Bootstrap:** Variants are `.badge-neutral`, `.badge-accent`, `.badge-positive`, `.badge-info`, `.badge-warning` (not `.bg-danger`, `.text-bg-*`). Sizes use `.badge-xsmall`/`.badge-small`/`.badge-large` (not `.rounded-pill`). Count badges use `.badge-count`. Icon badges use `.badge-status-icon` or `.badge-icon`. Disabled state uses `.badge-disabled`. diff --git a/.github/skills/using-ouds-web/references/components/breadcrumb.md b/.github/skills/using-ouds-web/references/components/breadcrumb.md new file mode 100644 index 0000000000..92a9dc86d7 --- /dev/null +++ b/.github/skills/using-ouds-web/references/components/breadcrumb.md @@ -0,0 +1,29 @@ +# Breadcrumb + +Displays hierarchical navigation path. Uses standard `.breadcrumb` / `.breadcrumb-item` classes inside a `
+ + + + + +
+ + +
+ +
+ +
+ + +
+ +
+ +``` + +## Key classes + +- `.footer` + `.navbar` + `data-bs-theme="dark"` on `