### Oxbow Button Icon Layouts

Source: https://github.com/unwrappeddesign/oxbow/blob/main/src/content/documentation/base-components/buttons.mdx

Illustrates different ways to integrate icons within Oxbow buttons, including left icons, right icons, and icon-only buttons. These examples utilize the 'Button' component along with specific icon components like 'Plus', 'ArrowRight', 'SearchIcon', and 'AlertTriangle'.

```astro
<Button variant="accent" gap="xs">
  <Plus slot="left-icon" size="sm" />
  Launch project
</Button>

<Button variant="outline" gap="xs">
  Next step
  <ArrowRight slot="right-icon" size="sm" />
</Button>

<Button variant="icon" iconOnly aria-label="Search">
  <SearchIcon slot="left-icon" size="sm" />
</Button>

<Button variant="onlyIcon" iconOnly aria-label="Alerts">
  <AlertTriangle slot="left-icon" size="sm" />
</Button>
```

--------------------------------

### Oxbow Button Rounding Helpers

Source: https://github.com/unwrappeddesign/oxbow/blob/main/src/content/documentation/base-components/buttons.mdx

Provides examples of controlling the border radius of Oxbow buttons using specific props. This includes 'noRounded', 'noRoundedLeft', 'noRoundedRight', 'noRoundedTop', and 'noRoundedBottom' props to customize button corners.

```astro
<Button variant="outline" noRounded>noRounded</Button>
<Button variant="outline" noRoundedLeft>noRoundedLeft</Button>
<Button variant="outline" noRoundedRight>noRoundedRight</Button>
<Button variant="outline" noRoundedTop>noRoundedTop</Button>
<Button variant="outline" noRoundedBottom>noRoundedBottom</Button>
```

--------------------------------

### Oxbow Button State Helpers

Source: https://github.com/unwrappeddesign/oxbow/blob/main/src/content/documentation/base-components/buttons.mdx

Demonstrates how to apply various states to Oxbow buttons, such as loading, disabled, and a full-width configuration. This section shows the 'Button' component used with 'loading', 'disabled', and 'fullWidth' props.

```astro
<Button loading variant="outline">Saving…</Button>
<Button disabled variant="ghost">Disabled</Button>
<Button variant="accent" iconOnly aria-label="Add">
  <Plus slot="left-icon" size="sm" />
</Button>

<Button fullWidth variant="default">Continue</Button>
```

--------------------------------

### Oxbow Button: Core Color Variants (Astro)

Source: https://github.com/unwrappeddesign/oxbow/blob/main/src/content/documentation/base-components/buttons.mdx

Demonstrates the core color variants for Oxbow buttons, including default, accent, muted, alternative, outline, ghost, text, and link styles. These components are built using Astro and Tailwind CSS. No external dependencies are required beyond the Button component itself.

```astro
<Button>Default</Button>
<Button variant="accent">Accent</Button>
<Button variant="accentDark">Accent Dark</Button>
<Button variant="muted">Muted</Button>
<Button variant="alternative">Alternative</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="text">Text</Button>
<Button variant="link">Link</Button>
```

--------------------------------

### Oxbow Button: Size Scale Variants (Astro)

Source: https://github.com/unwrappeddesign/oxbow/blob/main/src/content/documentation/base-components/buttons.mdx

Illustrates the different size options available for Oxbow buttons, ranging from 'xxs' to 'xl'. This allows for flexible UI design and consistent spacing across an application. The components are developed using Astro and Tailwind CSS.

```astro
<Button size="xxs">Size xxs</Button>
<Button size="xs">Size xs</Button>
<Button size="sm">Size sm</Button>
<Button size="base">Size base</Button>
<Button size="md">Size md</Button>
<Button size="lg">Size lg</Button>
<Button size="xl">Size xl</Button>
```

--------------------------------

### Trigger Upload Progress Notification - JavaScript

Source: https://github.com/unwrappeddesign/oxbow/blob/main/src/content/changelog/2025-09-26.md

Triggers an upload progress notification, displaying file name, size, and a link to the uploaded file. It uses a custom event 'notify-upload' dispatched on the window object. This is ideal for informing users about the status of file uploads.

```javascript
window.dispatchEvent(
  new CustomEvent("notify-upload", {
    detail: { name: "archive.zip", size: "80 MB", link: "/files/archive.zip" },
  })
);
```

--------------------------------

### Oxbow Button: Semantic Status Variants (Astro)

Source: https://github.com/unwrappeddesign/oxbow/blob/main/src/content/documentation/base-components/buttons.mdx

Showcases the semantic status variants for Oxbow buttons, including info, success, warning, and danger. These are useful for conveying specific states or feedback within an application. The components are built with Astro and Tailwind CSS.

```astro
<Button variant="info">Info</Button>
<Button variant="success">Success</Button>
<Button variant="warning">Warning</Button>
<Button variant="danger">Danger</Button>
```

--------------------------------

### Trigger Global Notification - JavaScript

Source: https://github.com/unwrappeddesign/oxbow/blob/main/src/content/changelog/2025-09-26.md

Triggers a global notification with specified type, title, message, and timeout. This is useful for providing user feedback on actions like saving or status updates. It utilizes a custom event 'notify' dispatched on the window object.

```javascript
window.dispatchEvent(
  new CustomEvent("notify", {
    detail: {
      type: "success",
      title: "Saved",
      message: "All good",
      timeout: 4000,
    },
  })
);
```

--------------------------------

### Oxbow Metal Color CSS Variables

Source: https://github.com/unwrappeddesign/oxbow/blob/main/src/content/documentation/foundations/colors.mdx

This snippet provides the CSS variables for the Metal color palette within the Oxbow design system. Utilizing the OKLCH color space, these variables enable consistent and accurate color implementation in web interfaces. They are designed for direct use in stylesheets.

```css
--color-metal-50:  oklch(0.970 0.003 264.5);
--color-metal-100: oklch(0.925 0.007 268.5);
--color-metal-200: oklch(0.852 0.016 270.0);
--color-metal-300: oklch(0.774 0.023 272.0);
--color-metal-400: oklch(0.693 0.024 269.3);
--color-metal-500: oklch(0.607 0.025 269.3);
--color-metal-600: oklch(0.512 0.029 273.1);
--color-metal-700: oklch(0.429 0.022 271.9);
--color-metal-800: oklch(0.341 0.016 270.9);
--color-metal-900: oklch(0.249 0.015 274.2);
```

--------------------------------

### Raspberry Color Palette CSS

Source: https://github.com/unwrappeddesign/oxbow/blob/main/src/content/documentation/foundations/colors.mdx

Defines CSS variables for the Raspberry color scale. These variables utilize the OKLCH color space for perceptual uniformity. No external dependencies are needed.

```css
--color-raspberry-50:  oklch(0.915 0.042 25.2);
--color-raspberry-100: oklch(0.824 0.097 18.6);
--color-raspberry-200: oklch(0.750 0.148 15.1);
--color-raspberry-300: oklch(0.701 0.186 10.9);
--color-raspberry-400: oklch(0.646 0.232 10.1);
--color-raspberry-500: oklch(0.577 0.213 4.3);
--color-raspberry-600: oklch(0.507 0.193 357.9);
--color-raspberry-700: oklch(0.436 0.171 351.4);
--color-raspberry-800: oklch(0.384 0.155 345.5);
--color-raspberry-900: oklch(0.328 0.131 345.7);
```

--------------------------------

### Turquoise Color Palette CSS Variables

Source: https://github.com/unwrappeddesign/oxbow/blob/main/src/content/documentation/foundations/colors.mdx

Defines the CSS variables for the Turquoise color palette using the oklch color space. These variables provide a range of turquoise shades, from light to dark, for design purposes. These variables can be directly included in your CSS files.

```css
--color-turquoise-50:  oklch(0.957 0.052 181.3);
--color-turquoise-100: oklch(0.925 0.094 185.7);
--color-turquoise-200: oklch(0.892 0.122 191.3);
--color-turquoise-300: oklch(0.846 0.130 198.7);
--color-turquoise-400: oklch(0.761 0.131 210.7);
--color-turquoise-500: oklch(0.642 0.118 222.1);
--color-turquoise-600: oklch(0.530 0.110 233.8);
--color-turquoise-700: oklch(0.427 0.101 242.1);
--color-turquoise-800: oklch(0.353 0.097 249.1);
--color-turquoise-900: oklch(0.306 0.082 248.2);
```

--------------------------------

### Fuchsia Color Palette CSS Variables

Source: https://github.com/unwrappeddesign/oxbow/blob/main/src/content/documentation/foundations/colors.mdx

Defines CSS variables for various shades of the Fuchsia color. These variables are represented using the OKLCH color space, allowing for consistent color application across different themes and devices. No external dependencies are required, and the input is directly the CSS variable definitions.

```css
--color-fuchsia-50:  oklch(0.898 0.070 340.0);
--color-fuchsia-100: oklch(0.810 0.150 337.6);
--color-fuchsia-200: oklch(0.742 0.229 335.2);
--color-fuchsia-300: oklch(0.712 0.279 332.4);
--color-fuchsia-400: oklch(0.699 0.320 328.8);
--color-fuchsia-500: oklch(0.597 0.281 324.0);
--color-fuchsia-600: oklch(0.498 0.240 318.9);
--color-fuchsia-700: oklch(0.406 0.202 313.5);
--color-fuchsia-800: oklch(0.337 0.172 308.0);
--color-fuchsia-900: oklch(0.291 0.148 309.2);

```

--------------------------------

### Red Color Palette CSS

Source: https://github.com/unwrappeddesign/oxbow/blob/main/src/content/documentation/foundations/colors.mdx

Defines CSS variables for the Red color scale. These variables use the OKLCH color space for consistent perception. No external dependencies are required.

```css
--color-red-50:  oklch(0.934 0.036 51.0);
--color-red-100: oklch(0.858 0.076 39.8);
--color-red-200: oklch(0.772 0.127 32.5);
--color-red-300: oklch(0.702 0.173 27.7);
--color-red-400: oklch(0.625 0.232 27.2);
--color-red-500: oklch(0.555 0.208 23.8);
--color-red-600: oklch(0.486 0.183 19.8);
--color-red-700: oklch(0.415 0.157 15.0);
--color-red-800: oklch(0.364 0.139 9.4);
--color-red-900: oklch(0.316 0.119 8.2);
```

--------------------------------

### Carrot Color Palette (CSS)

Source: https://github.com/unwrappeddesign/oxbow/blob/main/src/content/documentation/foundations/colors.mdx

Defines the 'Carrot' color palette using CSS variables with oklch color values. These variables are used to style elements with specific shades of orange. No external dependencies are required.

```css
--color-carrot-50:  oklch(0.966 0.041 88.8);
--color-carrot-100: oklch(0.928 0.079 85.5);
--color-carrot-200: oklch(0.884 0.111 80.4);
--color-carrot-300: oklch(0.844 0.132 73.8);
--color-carrot-400: oklch(0.785 0.162 64.8);
--color-carrot-500: oklch(0.681 0.150 59.0);
--color-carrot-600: oklch(0.579 0.137 53.2);
--color-carrot-700: oklch(0.483 0.122 49.3);
--color-carrot-800: oklch(0.410 0.113 44.3);
--color-carrot-900: oklch(0.350 0.093 45.6);
```

--------------------------------

### Sky Color Palette CSS Variables

Source: https://github.com/unwrappeddesign/oxbow/blob/main/src/content/documentation/foundations/colors.mdx

Defines the CSS variables for the Sky color palette using the oklch color space. These variables represent different shades of sky blue, from light to dark, suitable for UI design elements. No external dependencies are required to use these variables.

```css
--color-sky-50:  oklch(0.962 0.048 198.0);
--color-sky-100: oklch(0.915 0.085 205.0);
--color-sky-200: oklch(0.862 0.113 213.2);
--color-sky-300: oklch(0.808 0.131 223.4);
--color-sky-400: oklch(0.730 0.158 237.3);
--color-sky-500: oklch(0.618 0.153 244.7);
--color-sky-600: oklch(0.514 0.145 250.4);
--color-sky-700: oklch(0.416 0.136 255.2);
--color-sky-800: oklch(0.345 0.127 258.3);
--color-sky-900: oklch(0.295 0.104 257.6);
```

--------------------------------

### Define Grass Colors (CSS)

Source: https://github.com/unwrappeddesign/oxbow/blob/main/src/content/documentation/foundations/colors.mdx

Defines the color palette for 'Grass' using CSS variables. Similar to Pastel Green, these variables utilize the oklch color space for perceptual uniformity and ease of use in stylesheets. This ensures a consistent 'grass' color theme throughout the design.

```css
--color-grass-50:  oklch(0.959 0.053 134.2);
--color-grass-100: oklch(0.920 0.109 137.2);
--color-grass-200: oklch(0.841 0.154 139.7);
--color-grass-300: oklch(0.751 0.175 141.7);
--color-grass-400: oklch(0.634 0.188 142.8);
--color-grass-500: oklch(0.564 0.168 143.8);
--color-grass-600: oklch(0.495 0.145 145.0);
--color-grass-700: oklch(0.425 0.121 146.4);
--color-grass-800: oklch(0.375 0.102 148.4);
--color-grass-900: oklch(0.330 0.088 148.5);
```

--------------------------------

### Orange Color Palette (CSS)

Source: https://github.com/unwrappeddesign/oxbow/blob/main/src/content/documentation/foundations/colors.mdx

Defines the 'Orange' color palette using CSS variables with oklch color values. These variables are used to style elements with specific shades of orange. No external dependencies are required.

```css
--color-orange-50:  oklch(0.948 0.039 71.0);
--color-orange-100: oklch(0.885 0.076 60.8);
--color-orange-200: oklch(0.816 0.117 52.3);
--color-orange-300: oklch(0.756 0.154 43.8);
--color-orange-400: oklch(0.679 0.213 36.5);
--color-orange-500: oklch(0.589 0.203 32.9);
--color-orange-600: oklch(0.504 0.187 30.4);
--color-orange-700: oklch(0.423 0.165 28.9);
--color-orange-800: oklch(0.368 0.145 27.2);
--color-orange-900: oklch(0.314 0.122 26.5);
```

--------------------------------

### BlueBerry Color Palette CSS Variables

Source: https://github.com/unwrappeddesign/oxbow/blob/main/src/content/documentation/foundations/colors.mdx

Defines the CSS variables for the BlueBerry color scale. These variables use the OKLCH color space for accurate representation and are intended for use in web development projects. The variables range from --color-blueBerry-50 (lightest) to --color-blueBerry-900 (darkest).

```css
--color-blueBerry-50:  oklch(0.931 0.033 268.7);
--color-blueBerry-100: oklch(0.861 0.068 269.4);
--color-blueBerry-200: oklch(0.789 0.106 269.7);
--color-blueBerry-300: oklch(0.733 0.137 269.9);
--color-blueBerry-400: oklch(0.643 0.190 269.1);
--color-blueBerry-500: oklch(0.542 0.189 269.3);
--color-blueBerry-600: oklch(0.450 0.180 269.0);
--color-blueBerry-700: oklch(0.366 0.164 268.7);
--color-blueBerry-800: oklch(0.306 0.152 268.1);
--color-blueBerry-900: oklch(0.264 0.129 268.6);
```

--------------------------------

### Define Pastel Green Colors (CSS)

Source: https://github.com/unwrappeddesign/oxbow/blob/main/src/content/documentation/foundations/colors.mdx

Defines the color palette for 'Pastel Green' using CSS variables. These variables are based on the oklch color space, providing perceptually uniform color definitions. This allows for consistent color representation and easy manipulation.

```css
--color-pastelGreen-50:  oklch(0.948 0.071 143.8);
  --color-pastelGreen-100: oklch(0.903 0.134 146.0);
  --color-pastelGreen-200: oklch(0.841 0.175 147.2);
  --color-pastelGreen-300: oklch(0.773 0.182 148.7);
  --color-pastelGreen-400: oklch(0.686 0.186 149.1);
  --color-pastelGreen-500: oklch(0.615 0.156 152.2);
  --color-pastelGreen-600: oklch(0.541 0.126 156.8);
  --color-pastelGreen-700: oklch(0.465 0.098 162.8);
  --color-pastelGreen-800: oklch(0.410 0.080 169.2);
  --color-pastelGreen-900: oklch(0.358 0.069 170.0);
```

--------------------------------

### Haiti Color Palette CSS Variables

Source: https://github.com/unwrappeddesign/oxbow/blob/main/src/content/documentation/foundations/colors.mdx

Defines CSS variables for the Haiti color palette. These variables represent different shades of the color, ranging from light to dark, using the oklch color space. They can be directly used in CSS to apply consistent coloring.

```css
--color-haiti-50:  oklch(0.964 0.008 301.4);
--color-haiti-100: oklch(0.933 0.015 298.6);
--color-haiti-200: oklch(0.846 0.021 295.1);
--color-haiti-300: oklch(0.724 0.023 297.3);
--color-haiti-400: oklch(0.560 0.023 294.8);
--color-haiti-500: oklch(0.458 0.044 293.1);
--color-haiti-600: oklch(0.367 0.060 291.0);
--color-haiti-700: oklch(0.287 0.068 287.3);
--color-haiti-800: oklch(0.228 0.074 284.6);
--color-haiti-900: oklch(0.204 0.061 285.3);
```

--------------------------------

### Define Persian Green Color Palette (CSS)

Source: https://github.com/unwrappeddesign/oxbow/blob/main/src/content/documentation/foundations/colors.mdx

This snippet defines the Persian Green color palette using CSS custom properties. The colors are specified in the oklch color space, offering perceptually uniform color representation. This palette is intended for use in web design to maintain visual consistency.

```css
--color-persianGreen-50:  oklch(0.946 0.057 165.6);
--color-persianGreen-100: oklch(0.902 0.103 168.3);
--color-persianGreen-200: oklch(0.830 0.127 172.1);
--color-persianGreen-300: oklch(0.746 0.125 177.0);
--color-persianGreen-400: oklch(0.637 0.112 183.3);
--color-persianGreen-500: oklch(0.573 0.097 193.9);
--color-persianGreen-600: oklch(0.479 0.081 205.1);
--color-persianGreen-700: oklch(0.388 0.069 218.0);
--color-persianGreen-800: oklch(0.320 0.064 230.9);
--color-persianGreen-900: oklch(0.274 0.053 228.8);
```

--------------------------------

### Purple Color Palette CSS Variables

Source: https://github.com/unwrappeddesign/oxbow/blob/main/src/content/documentation/foundations/colors.mdx

Defines CSS variables for the Purple color palette. These variables provide a spectrum of purple shades, from very light to very dark, specified in the oklch color space. They are intended for use in styling to maintain visual consistency.

```css
--color-purple-50:  oklch(0.922 0.039 293.5);
--color-purple-100: oklch(0.848 0.079 292.7);
--color-purple-200: oklch(0.767 0.118 290.5);
--color-purple-300: oklch(0.702 0.147 288.3);
--color-purple-400: oklch(0.605 0.193 284.9);
--color-purple-500: oklch(0.507 0.190 282.6);
--color-purple-600: oklch(0.419 0.181 279.7);
--color-purple-700: oklch(0.341 0.165 276.9);
--color-purple-800: oklch(0.285 0.151 274.4);
--color-purple-900: oklch(0.247 0.126 274.9);
```

--------------------------------

### Blue Color Palette CSS Variables

Source: https://github.com/unwrappeddesign/oxbow/blob/main/src/content/documentation/foundations/colors.mdx

Defines the CSS variables for the Blue color scale. These variables utilize the OKLCH color space for precise color definition and are designed for web styling. The scale progresses from --color-blue-50 (lightest) to --color-blue-900 (darkest).

```css
--color-blue-50:  oklch(0.950 0.023 250.1);
--color-blue-100: oklch(0.883 0.057 246.9);
--color-blue-200: oklch(0.814 0.095 245.4);
--color-blue-300: oklch(0.749 0.130 245.9);
--color-blue-400: oklch(0.701 0.156 247.3);
--color-blue-500: oklch(0.609 0.202 257.2);
--color-blue-600: oklch(0.544 0.188 258.2);
--color-blue-700: oklch(0.477 0.173 259.6);
--color-blue-800: oklch(0.411 0.158 261.0);
--color-blue-900: oklch(0.348 0.138 261.6);
```

--------------------------------

### Oxbow Charcoal Color CSS Variables

Source: https://github.com/unwrappeddesign/oxbow/blob/main/src/content/documentation/foundations/colors.mdx

This snippet defines the CSS variables for the Charcoal color palette in the Oxbow design system. It uses the OKLCH color space for precise color definition. These variables are intended for use in web design and UI development to ensure consistent color application.

```css
--color-charcoal-50:  oklch(0.973 0.002 247.8);
--color-charcoal-100: oklch(0.930 0.003 247.9);
--color-charcoal-200: oklch(0.863 0.006 255.5);
--color-charcoal-300: oklch(0.787 0.011 256.7);
--color-charcoal-400: oklch(0.702 0.016 264.5);
--color-charcoal-500: oklch(0.612 0.018 262.7);
--color-charcoal-600: oklch(0.519 0.021 261.3);
--color-charcoal-700: oklch(0.427 0.021 264.3);
--color-charcoal-800: oklch(0.339 0.019 260.7);
--color-charcoal-900: oklch(0.256 0.018 266.3);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.