@ibis-design/svelte 0.6.0 → 0.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/README.md +24 -39
  2. package/dist/components/buttons/Button.svelte +1 -1
  3. package/dist/components/buttons/Button.svelte.d.ts +1 -1
  4. package/dist/components/buttons/DropdownButton.svelte +1 -1
  5. package/dist/components/buttons/DropdownButton.svelte.d.ts +1 -1
  6. package/dist/components/buttons/PillTab.svelte +1 -1
  7. package/dist/components/buttons/PillTab.svelte.d.ts +1 -1
  8. package/dist/components/containers/Banner.svelte +1 -1
  9. package/dist/components/containers/Banner.svelte.d.ts +1 -1
  10. package/dist/components/containers/Card.svelte +2 -2
  11. package/dist/components/containers/TipIndicator.svelte +1 -1
  12. package/dist/components/containers/TipIndicator.svelte.d.ts +1 -1
  13. package/dist/components/containers/Toaster.svelte +1 -1
  14. package/dist/components/containers/Toaster.svelte.d.ts +1 -1
  15. package/dist/components/inputs/Checkbox.svelte +1 -1
  16. package/dist/components/inputs/Checkbox.svelte.d.ts +1 -1
  17. package/dist/components/inputs/Chips.svelte +1 -1
  18. package/dist/components/inputs/Chips.svelte.d.ts +1 -1
  19. package/dist/components/inputs/Dropdown.svelte +1 -1
  20. package/dist/components/inputs/Dropdown.svelte.d.ts +1 -1
  21. package/dist/components/inputs/Radio.svelte +1 -1
  22. package/dist/components/inputs/Radio.svelte.d.ts +1 -1
  23. package/dist/components/inputs/Switch.svelte +1 -1
  24. package/dist/components/inputs/Switch.svelte.d.ts +1 -1
  25. package/dist/components/inputs/TextArea.svelte +1 -1
  26. package/dist/components/inputs/TextArea.svelte.d.ts +1 -1
  27. package/dist/components/inputs/TextInput.svelte +1 -1
  28. package/dist/components/inputs/TextInput.svelte.d.ts +1 -1
  29. package/dist/components/inputs/TextLink.svelte +1 -1
  30. package/dist/components/inputs/TextLink.svelte.d.ts +1 -1
  31. package/dist/layouts/AppLayout.svelte +2 -2
  32. package/dist/layouts/AuthLayout.svelte +2 -2
  33. package/dist/layouts/DashboardLayout.svelte +2 -2
  34. package/package.json +49 -49
  35. package/dist/components/buttons/button.css +0 -193
  36. package/dist/components/buttons/dropdownButton.css +0 -82
  37. package/dist/components/buttons/pillTab.css +0 -59
  38. package/dist/components/containers/banner.css +0 -155
  39. package/dist/components/containers/tipIndicator.css +0 -79
  40. package/dist/components/containers/toaster.css +0 -137
  41. package/dist/components/containers/tooltip.css +0 -0
  42. package/dist/components/inputs/checkbox.css +0 -103
  43. package/dist/components/inputs/chips.css +0 -76
  44. package/dist/components/inputs/dropdown.css +0 -106
  45. package/dist/components/inputs/radio.css +0 -108
  46. package/dist/components/inputs/switch.css +0 -68
  47. package/dist/components/inputs/textInput.css +0 -152
  48. package/dist/components/inputs/textarea.css +0 -91
  49. package/dist/components/inputs/textlink.css +0 -163
package/README.md CHANGED
@@ -5,7 +5,7 @@ Svelte 5 component library for the IBIS design system. Provides primitives (Butt
5
5
  ## Requirements
6
6
 
7
7
  - **Svelte 5** (runes and snippets; no slots).
8
- - **@ibis-design/css** — design tokens. The consuming application must load the token stylesheet once so `:root` variables are available.
8
+ - **@ibis-design/css** — design tokens. Load the stylesheet once and set `data-theme` on `<html>` (`ib-light`, `ib-dark`, `alc-light`, `alc-dark`).
9
9
 
10
10
  ## Installation
11
11
 
@@ -15,16 +15,32 @@ npm install @ibis-design/svelte @ibis-design/css
15
15
 
16
16
  ## Token CSS
17
17
 
18
- Import the design tokens in your application entry or root layout so all components receive the correct variables:
18
+ Import tokens and set the theme on the document root:
19
19
 
20
- ```js
21
- // e.g. in your app entry (main.ts, +layout.svelte, or App.svelte)
22
- import '@ibis-design/css';
23
- // or
24
- import '@ibis-design/css/ibis-design.css';
20
+ ```svelte
21
+ <script>
22
+ import '@ibis-design/css';
23
+
24
+ if (typeof document !== 'undefined') {
25
+ document.documentElement.dataset.theme = 'ib-light'; // or alc-dark, etc.
26
+ }
27
+ </script>
25
28
  ```
26
29
 
27
- Without this import, components will not have colors, spacing, or typography from the design system.
30
+ Without the CSS import and `data-theme`, components will not resolve design-system variables.
31
+
32
+ ### Canonical variable names
33
+
34
+ Use semantic tokens from the active theme, for example:
35
+
36
+ - `--font-size-body-sm` (not legacy `normal-text` names)
37
+ - `--color-brand-secondary` for secondary actions
38
+ - `--shadow-focus-default` for focus rings
39
+ - `--border-radius-md`, `--border-color-button`
40
+
41
+ ### Component styles
42
+
43
+ Svelte components load their presentation CSS from `@ibis-design/css` automatically. You do not need a separate component CSS import unless you use `.ibis-*` class names outside these components (see [@ibis-design/css](https://www.npmjs.com/package/@ibis-design/css) component entry points).
28
44
 
29
45
  ## Usage
30
46
 
@@ -113,34 +129,3 @@ With inline snippets:
113
129
  - **Components:** `Button`, `Card`, `AuthLayout`, `AppLayout`, `DashboardLayout`
114
130
  - **Types:** `ButtonVariant`, `ButtonSize`, `AuthLayoutProps`, `AppLayoutProps`, `DashboardLayoutProps` (from `@ibis-design/svelte`)
115
131
 
116
- ## Build
117
-
118
- This package is built with **`@sveltejs/package`** (`svelte-package`), the supported Svelte library pipeline. It preprocesses Svelte, transpiles TypeScript, and emits **`.d.ts` next to outputs** so consumers get correct component prop types (not a separate Vite “library mode” + `vite-plugin-dts` flow).
119
-
120
- From the package directory:
121
-
122
- ```bash
123
- npm run build
124
- ```
125
-
126
- This runs `svelte-kit sync` (generates `.svelte-kit` types for the minimal Kit shell) then `svelte-package`, writing output to `dist/`.
127
-
128
- Watch mode during development:
129
-
130
- ```bash
131
- npm run dev
132
- ```
133
-
134
- From the monorepo root:
135
-
136
- ```bash
137
- npm run build -w @ibis-design/svelte
138
- ```
139
-
140
- ## Type checking
141
-
142
- ```bash
143
- npm run check
144
- ```
145
-
146
- Runs `svelte-kit sync` then `svelte-check` with the package `tsconfig.json`.
package/dist/components/buttons/Button.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import './button.css';
2
+ import '@ibis-design/css/components/button.css';
3
3
  import type { Snippet } from 'svelte';
4
4
  import type { ButtonVariant, ButtonSize } from '../../types/button';
5
5
  import type { HTMLButtonAttributes } from 'svelte/elements';
package/dist/components/buttons/Button.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import './button.css';
1
+ import '@ibis-design/css/components/button.css';
2
2
  import type { Snippet } from 'svelte';
3
3
  import type { ButtonVariant, ButtonSize } from '../../types/button';
4
4
  import type { HTMLButtonAttributes } from 'svelte/elements';
package/dist/components/buttons/DropdownButton.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import './dropdownButton.css';
2
+ import '@ibis-design/css/components/dropdownButton.css';
3
3
  import Button from './Button.svelte';
4
4
  import type { Snippet } from 'svelte';
5
5
 
package/dist/components/buttons/DropdownButton.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import './dropdownButton.css';
1
+ import '@ibis-design/css/components/dropdownButton.css';
2
2
  import type { Snippet } from 'svelte';
3
3
  interface Props {
4
4
  /**
package/dist/components/buttons/PillTab.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import './pillTab.css';
2
+ import '@ibis-design/css/components/pillTab.css';
3
3
  import type { HTMLInputAttributes } from 'svelte/elements';
4
4
 
5
5
  interface Props extends HTMLInputAttributes {
package/dist/components/buttons/PillTab.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import './pillTab.css';
1
+ import '@ibis-design/css/components/pillTab.css';
2
2
  import type { HTMLInputAttributes } from 'svelte/elements';
3
3
  interface Props extends HTMLInputAttributes {
4
4
  /**
package/dist/components/containers/Banner.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import "./banner.css";
2
+ import "@ibis-design/css/components/banner.css";
3
3
  import type { Snippet } from "svelte";
4
4
 
5
5
  type BannerType = "success" | "error" | "default";
package/dist/components/containers/Banner.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import "./banner.css";
1
+ import "@ibis-design/css/components/banner.css";
2
2
  import type { Snippet } from "svelte";
3
3
  type BannerType = "success" | "error" | "default";
4
4
  interface Props {
package/dist/components/containers/Card.svelte CHANGED
@@ -23,12 +23,12 @@
23
23
 
24
24
  <style>
25
25
  .ibis-card {
26
- background-color: var(--color-backgrounds-classic-bg-light);
26
+ background-color: var(--color-backgrounds-classic-light);
27
27
  border-radius: var(--border-radius-md);
28
28
  box-shadow: var(--shadow-default);
29
29
  padding: var(--spacing-4);
30
30
  font-family: var(--font-family-sans);
31
- font-size: var(--font-size-normal-text-default);
31
+ font-size: var(--font-size-body-md);
32
32
  line-height: var(--line-height-normal);
33
33
  }
34
34
  </style>
package/dist/components/containers/TipIndicator.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import './tipIndicator.css';
2
+ import '@ibis-design/css/components/tipIndicator.css';
3
3
 
4
4
  interface Props {
5
5
  /**
package/dist/components/containers/TipIndicator.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import './tipIndicator.css';
1
+ import '@ibis-design/css/components/tipIndicator.css';
2
2
  interface Props {
3
3
  /**
4
4
  * Controls the position of the tooltip relative to the indicator.
package/dist/components/containers/Toaster.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import './toaster.css';
2
+ import '@ibis-design/css/components/toaster.css';
3
3
  import type { Snippet } from 'svelte';
4
4
 
5
5
  type ToastType = 'success' | 'error' | 'accent' | 'default';
package/dist/components/containers/Toaster.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import './toaster.css';
1
+ import '@ibis-design/css/components/toaster.css';
2
2
  import type { Snippet } from 'svelte';
3
3
  type ToastType = 'success' | 'error' | 'accent' | 'default';
4
4
  interface Props {
package/dist/components/inputs/Checkbox.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import "./checkbox.css";
2
+ import "@ibis-design/css/components/checkbox.css";
3
3
  import type { Snippet } from "svelte";
4
4
  import type { HTMLInputAttributes } from "svelte/elements";
5
5
 
package/dist/components/inputs/Checkbox.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import "./checkbox.css";
1
+ import "@ibis-design/css/components/checkbox.css";
2
2
  import type { Snippet } from "svelte";
3
3
  import type { HTMLInputAttributes } from "svelte/elements";
4
4
  interface Props extends HTMLInputAttributes {
package/dist/components/inputs/Chips.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import "./chips.css";
2
+ import "@ibis-design/css/components/chips.css";
3
3
  import type { HTMLButtonAttributes } from "svelte/elements";
4
4
  import type { Snippet } from "svelte";
5
5
  // define props
package/dist/components/inputs/Chips.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import "./chips.css";
1
+ import "@ibis-design/css/components/chips.css";
2
2
  import type { HTMLButtonAttributes } from "svelte/elements";
3
3
  import type { Snippet } from "svelte";
4
4
  interface Props extends HTMLButtonAttributes {
package/dist/components/inputs/Dropdown.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import "./dropdown.css";
2
+ import "@ibis-design/css/components/dropdown.css";
3
3
  import TextInput from "./TextInput.svelte";
4
4
 
5
5
  interface Options {
package/dist/components/inputs/Dropdown.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import "./dropdown.css";
1
+ import "@ibis-design/css/components/dropdown.css";
2
2
  interface Options {
3
3
  label: string;
4
4
  value: string;
package/dist/components/inputs/Radio.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import "./radio.css";
2
+ import "@ibis-design/css/components/radio.css";
3
3
  import type { HTMLInputAttributes } from "svelte/elements";
4
4
 
5
5
  interface Props extends HTMLInputAttributes {
package/dist/components/inputs/Radio.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import "./radio.css";
1
+ import "@ibis-design/css/components/radio.css";
2
2
  import type { HTMLInputAttributes } from "svelte/elements";
3
3
  interface Props extends HTMLInputAttributes {
4
4
  /**
package/dist/components/inputs/Switch.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import "./switch.css";
2
+ import "@ibis-design/css/components/switch.css";
3
3
  import type { HTMLInputAttributes } from "svelte/elements";
4
4
 
5
5
  interface Props extends HTMLInputAttributes {
package/dist/components/inputs/Switch.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import "./switch.css";
1
+ import "@ibis-design/css/components/switch.css";
2
2
  import type { HTMLInputAttributes } from "svelte/elements";
3
3
  interface Props extends HTMLInputAttributes {
4
4
  id?: string;
package/dist/components/inputs/TextArea.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import "./textarea.css";
2
+ import "@ibis-design/css/components/textarea.css";
3
3
  import type { HTMLTextareaAttributes } from "svelte/elements";
4
4
 
5
5
  interface Props extends HTMLTextareaAttributes {
package/dist/components/inputs/TextArea.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import "./textarea.css";
1
+ import "@ibis-design/css/components/textarea.css";
2
2
  import type { HTMLTextareaAttributes } from "svelte/elements";
3
3
  interface Props extends HTMLTextareaAttributes {
4
4
  label?: string;
package/dist/components/inputs/TextInput.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import "./textInput.css";
2
+ import "@ibis-design/css/components/textInput.css";
3
3
  import type { Snippet } from "svelte";
4
4
  import type { HTMLInputAttributes } from "svelte/elements";
5
5
 
package/dist/components/inputs/TextInput.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import "./textInput.css";
1
+ import "@ibis-design/css/components/textInput.css";
2
2
  import type { Snippet } from "svelte";
3
3
  import type { HTMLInputAttributes } from "svelte/elements";
4
4
  interface Props extends HTMLInputAttributes {
package/dist/components/inputs/TextLink.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import "./textlink.css";
2
+ import "@ibis-design/css/components/textlink.css";
3
3
  import type { HTMLAnchorAttributes } from "svelte/elements";
4
4
  import type { Snippet } from "svelte";
5
5
 
package/dist/components/inputs/TextLink.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import "./textlink.css";
1
+ import "@ibis-design/css/components/textlink.css";
2
2
  import type { HTMLAnchorAttributes } from "svelte/elements";
3
3
  import type { Snippet } from "svelte";
4
4
  interface Props extends HTMLAnchorAttributes {
package/dist/layouts/AppLayout.svelte CHANGED
@@ -45,7 +45,7 @@
45
45
  min-height: 100vh;
46
46
  display: flex;
47
47
  flex-direction: column;
48
- background-color: var(--color-backgrounds-classic-bg-light);
48
+ background-color: var(--color-backgrounds-classic-light);
49
49
  font-family: var(--font-family-sans);
50
50
  }
51
51
 
@@ -77,7 +77,7 @@
77
77
  flex: 0 0 auto;
78
78
  padding: var(--spacing-4);
79
79
  border-top: var(--border-width-thin) solid var(--color-neutral-200);
80
- font-size: var(--font-size-normal-text-sm);
80
+ font-size: var(--font-size-body-sm);
81
81
  color: var(--color-neutral-600);
82
82
  }
83
83
  </style>
package/dist/layouts/AuthLayout.svelte CHANGED
@@ -41,7 +41,7 @@
41
41
  align-items: center;
42
42
  justify-content: center;
43
43
  padding: var(--spacing-6);
44
- background-color: var(--color-backgrounds-themed-bg-ibis-white);
44
+ background-color: var(--color-white);
45
45
  font-family: var(--font-family-sans);
46
46
  }
47
47
 
@@ -57,7 +57,7 @@
57
57
 
58
58
  .ibis-auth-layout__footer {
59
59
  margin-top: var(--spacing-8);
60
- font-size: var(--font-size-normal-text-sm);
60
+ font-size: var(--font-size-body-sm);
61
61
  color: var(--color-neutral-600);
62
62
  }
63
63
  </style>
package/dist/layouts/DashboardLayout.svelte CHANGED
@@ -45,7 +45,7 @@
45
45
  min-height: 100vh;
46
46
  display: flex;
47
47
  flex-direction: column;
48
- background-color: var(--color-backgrounds-classic-bg-light);
48
+ background-color: var(--color-backgrounds-classic-light);
49
49
  font-family: var(--font-family-sans);
50
50
  }
51
51
 
@@ -82,7 +82,7 @@
82
82
  flex: 0 0 auto;
83
83
  padding: var(--spacing-3);
84
84
  border-top: var(--border-width-thin) solid var(--color-neutral-200);
85
- font-size: var(--font-size-normal-text-xs);
85
+ font-size: var(--font-size-body-xs);
86
86
  color: var(--color-neutral-600);
87
87
  }
88
88
  </style>
package/package.json CHANGED
@@ -1,49 +1,49 @@
1
- {
2
- "name": "@ibis-design/svelte",
3
- "version": "0.6.0",
4
- "description": "Svelte component library for the IBIS design system.",
5
- "type": "module",
6
- "main": "./dist/index.js",
7
- "module": "./dist/index.js",
8
- "types": "./dist/index.d.ts",
9
- "svelte": "./dist/index.js",
10
- "exports": {
11
- ".": {
12
- "types": "./dist/index.d.ts",
13
- "svelte": "./dist/index.js",
14
- "import": "./dist/index.js",
15
- "default": "./dist/index.js"
16
- }
17
- },
18
- "files": [
19
- "dist"
20
- ],
21
- "sideEffects": [
22
- "**/*.css"
23
- ],
24
- "peerDependencies": {
25
- "@ibis-design/css": "^0.6.0",
26
- "svelte": "^5.54.0"
27
- },
28
- "devDependencies": {
29
- "@ibis-design/css": "0.6.0",
30
- "@sveltejs/adapter-auto": "7.0.1",
31
- "@sveltejs/kit": "2.59.1",
32
- "@sveltejs/package": "2.5.7",
33
- "@sveltejs/vite-plugin-svelte": "^7.1.2",
34
- "@types/node": "25.7.0",
35
- "svelte": "5.55.5",
36
- "svelte-check": "^4.4.8",
37
- "typescript": "^5.9.3",
38
- "vite": "^8.0.12"
39
- },
40
- "scripts": {
41
- "build": "svelte-kit sync && svelte-package",
42
- "prepublishOnly": "npm run build",
43
- "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
44
- "dev": "svelte-package -w"
45
- },
46
- "dependencies": {
47
- "@solar-icons/svelte": "^1.1.0"
48
- }
49
- }
1
+ {
2
+ "name": "@ibis-design/svelte",
3
+ "version": "0.7.1",
4
+ "description": "Svelte component library for the IBIS design system.",
5
+ "type": "module",
6
+ "main": "./dist/index.js",
7
+ "module": "./dist/index.js",
8
+ "types": "./dist/index.d.ts",
9
+ "svelte": "./dist/index.js",
10
+ "exports": {
11
+ ".": {
12
+ "types": "./dist/index.d.ts",
13
+ "svelte": "./dist/index.js",
14
+ "import": "./dist/index.js",
15
+ "default": "./dist/index.js"
16
+ }
17
+ },
18
+ "files": [
19
+ "dist"
20
+ ],
21
+ "sideEffects": [
22
+ "**/*.css"
23
+ ],
24
+ "peerDependencies": {
25
+ "@ibis-design/css": "^0.7.1",
26
+ "svelte": "^5.54.0"
27
+ },
28
+ "devDependencies": {
29
+ "@ibis-design/css": "0.7.1",
30
+ "@sveltejs/adapter-auto": "7.0.1",
31
+ "@sveltejs/kit": "2.60.1",
32
+ "@sveltejs/package": "2.5.7",
33
+ "@sveltejs/vite-plugin-svelte": "^7.1.2",
34
+ "@types/node": "25.9.0",
35
+ "svelte": "5.55.8",
36
+ "svelte-check": "^4.4.8",
37
+ "typescript": "^5.9.3",
38
+ "vite": "^8.0.13"
39
+ },
40
+ "scripts": {
41
+ "build": "svelte-kit sync && svelte-package",
42
+ "prepublishOnly": "npm run build",
43
+ "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
44
+ "dev": "svelte-package -w"
45
+ },
46
+ "dependencies": {
47
+ "@solar-icons/svelte": "^1.1.1"
48
+ }
49
+ }
package/dist/components/buttons/button.css DELETED
@@ -1,193 +0,0 @@
1
- .ibis-button {
2
- font-family: var(--font-family-sans);
3
- font-weight: var(--font-weight-normal);
4
- border: var(--border-width-default) solid transparent;
5
- cursor: pointer;
6
- transition:
7
- filter var(--transition-duration-fast) var(--transition-timing-default),
8
- transform var(--transition-duration-fast) var(--transition-timing-default),
9
- box-shadow var(--transition-duration-fast) var(--transition-timing-default);
10
- display: inline-flex;
11
- align-items: center;
12
- justify-content: center;
13
- }
14
-
15
- .ibis-button :global(svg) {
16
- width: 1em;
17
- height: 1em;
18
- display: inline-block;
19
- vertical-align: middle;
20
- gap: var(--spacing-1);
21
- }
22
-
23
- /* Content Layout */
24
- .ibis-button__content {
25
- display: inline-flex;
26
- align-items: center;
27
- justify-content: center;
28
- gap: var(--spacing-1);
29
- }
30
-
31
- .ibis-button__content--hidden {
32
- visibility: hidden;
33
- }
34
-
35
- /* Icon Only */
36
- .ibis-button--icon-only {
37
- padding: var(--spacing-2);
38
- }
39
-
40
- .ibis-button--icon-only .ibis-button__content {
41
- gap: 0;
42
- }
43
-
44
- /* Disabled State */
45
- .ibis-button:disabled {
46
- opacity: var(--opacity-disabled);
47
- cursor: not-allowed;
48
- }
49
-
50
- /* Loading State */
51
- .ibis-button--loading {
52
- position: relative;
53
- cursor: not-allowed;
54
- pointer-events: none;
55
- }
56
-
57
- /* Primary Variant */
58
- .ibis-button--primary {
59
- background: linear-gradient(180deg, #9665df 0%, #7945c8 100%); /* Hardcoded */
60
- color: var(--color-white);
61
-
62
- box-shadow: var(--component-button-primary-default-shadow);
63
- border: 0.5px solid #bd91ff; /* Hardcoded */
64
- }
65
-
66
- .ibis-button--primary:not(:disabled):hover,
67
- .ibis-button--primary:not(:disabled):active {
68
- box-shadow: none;
69
- }
70
-
71
- .ibis-button--primary:not(:disabled):hover {
72
- background: var(--color-primary-800);
73
- border-color: none;
74
- border-width: 0.7 px; /* Hardcoded */
75
- }
76
-
77
- .ibis-button--primary:not(:disabled):active {
78
- background: var(--color-primary-800);
79
- border-color: var(--color-primary-400);
80
- border-width: var(--border-width-thin);
81
- }
82
-
83
- .ibis-button--primary:disabled {
84
- background: var(--color-neutral-400);
85
- color: var(--color-neutral-600);
86
- border-color: var(--color-neutral-600);
87
- }
88
-
89
- /* Secondary Variant */
90
- .ibis-button--secondary {
91
- background-color: transparent;
92
- color: var(--color-primary-pink-500);
93
- border-color: var(--color-primary-pink-700);
94
- }
95
-
96
- .ibis-button--secondary:not(:disabled):hover {
97
- background-color: var(--color-primary-pink-100);
98
- }
99
-
100
- /* Variant Sizes */
101
- .ibis-button--sm {
102
- padding: var(--spacing-1) var(--spacing-2);
103
- font-size: var(--font-size-normal-text-sm);
104
- border-radius: var(--component-button-size-sm-border-radius);
105
- }
106
-
107
- .ibis-button--md {
108
- padding: var(--spacing-2) var(--spacing-4);
109
- font-size: var(--font-size-normal-text-DEFAULT);
110
- border-radius: var(--component-button-size-md-border-radius);
111
- }
112
-
113
- .ibis-button--lg {
114
- padding: var(--spacing-3) var(--spacing-6);
115
- font-size: var(--font-size-normal-text-lg);
116
- border-radius: var(--component-button-size-lg-border-radius);
117
- }
118
-
119
- /* Loader Spinner */
120
- .ibis-button__loader {
121
- position: absolute;
122
- width: 1em;
123
- height: 1em;
124
- border: var(--border-width-default) solid var(--color-black);
125
- border-top-color: var(--color-white);
126
- border-radius: 50%;
127
- animation: ibis-spin 0.8s linear infinite;
128
- top: 50%;
129
- left: 50%;
130
- transform: translate(-50%, -50%);
131
- }
132
-
133
- @keyframes ibis-spin {
134
- from {
135
- transform: translate(-50%, -50%) rotate(0deg);
136
- }
137
- to {
138
- transform: translate(-50%, -50%) rotate(360deg);
139
- }
140
- }
141
-
142
- /* Skeleton State */
143
- .ibis-button--skeleton {
144
- position: relative;
145
- overflow: hidden;
146
- background: var(--color-neutral-200);
147
- color: transparent;
148
- border-color: var(--color-neutral-500);
149
- cursor: default;
150
- pointer-events: none;
151
- }
152
-
153
- .ibis-button--skeleton::after {
154
- content: '';
155
- position: absolute;
156
- top: 50%;
157
- left: 50%;
158
- transform: translate(-50%, -50%);
159
- width: 80%;
160
- height: 1em;
161
- background-color: var(--color-neutral-400);
162
- }
163
-
164
- .ibis-button--icon-only--skeleton::after {
165
- width: 1em;
166
- height: 1em;
167
- border-radius: 4px;
168
- }
169
-
170
- .ibis-button--skeleton::before {
171
- content: '';
172
- position: absolute;
173
- inset: 0;
174
- background: linear-gradient(
175
- 90deg,
176
- rgba(255, 255, 255, 0.25) 0%,
177
- rgba(255, 255, 255, 0.6) 50%,
178
- rgba(255, 255, 255, 0.25) 100%
179
- );
180
- transform: translateX(-100%);
181
- animation: ibis-shimmer 2s infinite;
182
- border-radius: inherit;
183
- }
184
-
185
- @keyframes ibis-shimmer {
186
- 0% {
187
- transform: translateX(-100%);
188
- }
189
-
190
- 100% {
191
- transform: translateX(100%);
192
- }
193
- }