@demos-europe/demosplan-ui 0.4.21 → 0.4.22

package/storybook-static/assets/index-BbC7EF1e.js

@@ -1 +0,0 @@
-import{e}from"./blocks-kyJuz3C5.js";import"./iframe-KFxwsBtW.js";import"./_commonjsHelpers-CE1G-McA.js";const o={},c=e.createContext(o);function u(n){const t=e.useContext(c);return e.useMemo(function(){return typeof n=="function"?n(t):{...t,...n}},[t,n])}function i(n){let t;return n.disableParentContext?t=typeof n.components=="function"?n.components(o):n.components||o:t=u(n.components),e.createElement(c.Provider,{value:t},n.children)}export{i as MDXProvider,u as useMDXComponents};

package/storybook-static/assets/index-CTxdm8FW.js

@@ -1 +0,0 @@
-import{A as L,H as N,I as G,J as H,K as Y,l as x,L as B,z as T,M as f,G as F,N as _}from"./iframe-KFxwsBtW.js";function D(e){return N()?(G(e),!0):!1}const R=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const X=Object.prototype.toString,q=e=>X.call(e)==="[object Object]",v=()=>{},C=z();function z(){var e,t;return R&&((e=window?.navigator)==null?void 0:e.userAgent)&&(/iP(?:ad|hone|od)/.test(window.navigator.userAgent)||((t=window?.navigator)==null?void 0:t.maxTouchPoints)>2&&/iPad|Macintosh/.test(window?.navigator.userAgent))}function J(...e){if(e.length!==1)return H(...e);const t=e[0];return typeof t=="function"?Y(B(()=>({get:t,set:v}))):x(t)}function S(e){return Array.isArray(e)?e:[e]}function K(e,t,n){return L(e,t,{...n,immediate:!0})}const j=R?window:void 0;function y(e){var t;const n=f(e);return(t=n?.$el)!=null?t:n}function h(...e){const t=[],n=()=>{t.forEach(r=>r()),t.length=0},s=(r,l,i,d)=>(r.addEventListener(l,i,d),()=>r.removeEventListener(l,i,d)),c=T(()=>{const r=S(f(e[0])).filter(l=>l!=null);return r.every(l=>typeof l!="string")?r:void 0}),p=K(()=>{var r,l;return[(l=(r=c.value)==null?void 0:r.map(i=>y(i)))!=null?l:[j].filter(i=>i!=null),S(f(c.value?e[1]:e[0])),S(F(c.value?e[2]:e[1])),f(c.value?e[3]:e[2])]},([r,l,i,d])=>{if(n(),!r?.length||!l?.length||!i?.length)return;const k=q(d)?{...d}:d;t.push(...r.flatMap(g=>l.flatMap(w=>i.map(O=>s(g,w,O,k)))))},{flush:"post"}),m=()=>{p(),n()};return D(n),m}let W=!1;function I(e,t,n={}){const{window:s=j,ignore:c=[],capture:p=!0,detectIframe:m=!1,controls:r=!1}=n;if(!s)return r?{stop:v,cancel:v,trigger:v}:v;if(C&&!W){W=!0;const o={passive:!0};Array.from(s.document.body.children).forEach(u=>h(u,"click",v,o)),h(s.document.documentElement,"click",v,o)}let l=!0;const i=o=>f(c).some(u=>{if(typeof u=="string")return Array.from(s.document.querySelectorAll(u)).some(a=>a===o.target||o.composedPath().includes(a));{const a=y(u);return a&&(o.target===a||o.composedPath().includes(a))}});function d(o){const u=f(o);return u&&u.$.subTree.shapeFlag===16}function k(o,u){const a=f(o),E=a.$.subTree&&a.$.subTree.children;return E==null||!Array.isArray(E)?!1:E.some(P=>P.el===u.target||u.composedPath().includes(P.el))}const g=o=>{const u=y(e);if(o.target!=null&&!(!(u instanceof Element)&&d(e)&&k(e,o))&&!(!u||u===o.target||o.composedPath().includes(u))){if("detail"in o&&o.detail===0&&(l=!i(o)),!l){l=!0;return}t(o)}};let w=!1;const O=[h(s,"click",o=>{w||(w=!0,setTimeout(()=>{w=!1},0),g(o))},{passive:!0,capture:p}),h(s,"pointerdown",o=>{const u=y(e);l=!i(o)&&!!(u&&!o.composedPath().includes(u))},{passive:!0}),m&&h(s,"blur",o=>{setTimeout(()=>{var u;const a=y(e);((u=s.document.activeElement)==null?void 0:u.tagName)==="IFRAME"&&!a?.contains(s.document.activeElement)&&t(o)},0)},{passive:!0})].filter(Boolean),M=()=>O.forEach(o=>o());return r?{stop:M,cancel:()=>{l=!1},trigger:o=>{l=!0,g(o),l=!1}}:M}const ee={mounted(e,t){const n=!t.modifiers.bubble;if(typeof t.value=="function")e.__onClickOutside_stop=I(e,t.value,{capture:n});else{const[s,c]=t.value;e.__onClickOutside_stop=I(e,s,Object.assign({capture:n},c))}},unmounted(e){e.__onClickOutside_stop()}};function b(e){return typeof Window<"u"&&e instanceof Window?e.document.documentElement:typeof Document<"u"&&e instanceof Document?e.documentElement:e}function $(e){const t=window.getComputedStyle(e);if(t.overflowX==="scroll"||t.overflowY==="scroll"||t.overflowX==="auto"&&e.clientWidth<e.scrollWidth||t.overflowY==="auto"&&e.clientHeight<e.scrollHeight)return!0;{const n=e.parentNode;return!n||n.tagName==="BODY"?!1:$(n)}}function V(e){const t=e||window.event,n=t.target;return $(n)?!1:t.touches.length>1?!0:(t.preventDefault&&t.preventDefault(),!1)}const A=new WeakMap;function Q(e,t=!1){const n=_(t);let s=null,c="";L(J(e),r=>{const l=b(f(r));if(l){const i=l;if(A.get(i)||A.set(i,i.style.overflow),i.style.overflow!=="hidden"&&(c=i.style.overflow),i.style.overflow==="hidden")return n.value=!0;if(n.value)return i.style.overflow="hidden"}},{immediate:!0});const p=()=>{const r=b(f(e));!r||n.value||(C&&(s=h(r,"touchmove",l=>{V(l)},{passive:!1})),r.style.overflow="hidden",n.value=!0)},m=()=>{const r=b(f(e));!r||!n.value||(C&&s?.(),r.style.overflow=c,A.delete(r),n.value=!1)};return D(m),T({get(){return n.value},set(r){r?p():m()}})}function U(){let e=!1;const t=_(!1);return(n,s)=>{if(t.value=s.value,e)return;e=!0;const c=Q(n,s.value);L(t,p=>c.value=p)}}U();export{ee as v};

package/storybook-static/assets/index-Ccl8MXhV.js

@@ -1,79 +0,0 @@
-import{j as e,M as t}from"./blocks-kyJuz3C5.js";import{useMDXComponents as o}from"./index-BbC7EF1e.js";import{T as r}from"./Table-DSJ5DLHV.js";import"./iframe-KFxwsBtW.js";import"./_commonjsHelpers-CE1G-McA.js";function s(i){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...o(),...i.components};return e.jsxs(e.Fragment,{children:[e.jsx(t,{title:"Welcome"}),`
-`,e.jsx(n.h1,{id:"demosplan-ui-component-library",children:"demosplan-ui Component Library"}),`
-`,e.jsx(n.p,{children:`Welcome to the demosplan-ui component library. This library provides a set of Vue components, directives,
-and design tokens to build consistent interfaces for demosPlan applications.`}),`
-`,e.jsx(n.h2,{id:"overview",children:"Overview"}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Component System"}),": A comprehensive set of Vue components built with consistent design patterns"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Directives"}),": Custom Vue directives for common UI behaviors"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Design Tokens"}),": Named entities that store visual design attributes for maintaining consistency"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Tailwind Integration"}),": Progressive adoption of Tailwind CSS for utility-based styling"]}),`
-`]}),`
-`,e.jsx(n.h2,{id:"getting-started",children:"Getting Started"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-shell",children:`# Install the package
-yarn add @demos-europe/demosplan-ui
-
-# Import components in your Vue application
-import { DpButton, DpInput } from '@demos-europe/demosplan-ui'
-`})}),`
-`,e.jsx(n.h2,{id:"component-categories",children:"Component Categories"}),`
-`,e.jsx(n.h3,{id:"form-components",children:"Form Components"}),`
-`,e.jsx(n.p,{children:"Our form components provide consistent styling, validation states, and accessibility features:"}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.a,{href:"/docs/components-input--docs",children:"DpInput"}),": Text input fields with various types (text, email, number, etc.)"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.a,{href:"/docs/components-textarea--docs",children:"DpTextArea"}),": Multi-line text input"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.a,{href:"/docs/components-select--docs",children:"DpSelect"}),": Dropdown selection"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.a,{href:"/docs/components-checkbox--docs",children:"DpCheckbox"}),": Checkbox control"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.a,{href:"/docs/components-radio--docs",children:"DpRadio"}),": Radio button control"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.a,{href:"/docs/components-datepicker--docs",children:"DpDatepicker"}),": Date selection"]}),`
-`]}),`
-`,e.jsx(n.h3,{id:"layout-components",children:"Layout Components"}),`
-`,e.jsx(n.p,{children:"Components to structure your application layouts:"}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.a,{href:"/docs/components-accordion--docs",children:"DpAccordion"}),": Collapsible content sections"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.a,{href:"/docs/components-card--docs",children:"DpCard"}),": Content container with optional header"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.a,{href:"/docs/components-modal--docs",children:"DpModal"}),": Dialog windows for focused interactions"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.a,{href:"/docs/components-tabs--docs",children:"DpTabs"}),": Tabbed interface for switching between views"]}),`
-`]}),`
-`,e.jsx(n.h3,{id:"data-display-components",children:"Data Display Components"}),`
-`,e.jsx(n.p,{children:"Components for displaying and interacting with data collections:"}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.a,{href:"/docs/components-datatable--docs",children:"DpDataTable"}),": Tabular data representation"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.a,{href:"/docs/components-treelist--docs",children:"DpTreeList"}),": Hierarchical data display with expandable nodes"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.a,{href:"/docs/components-pager--docs",children:"DpPager"}),": Pagination control"]}),`
-`]}),`
-`,e.jsx(n.h3,{id:"feedback-components",children:"Feedback Components"}),`
-`,e.jsx(n.p,{children:"Components for providing feedback to users:"}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.a,{href:"/docs/components-notification--docs",children:"DpNotification"}),": Toast notifications"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.a,{href:"/docs/components-inlinenotification--docs",children:"DpInlineNotification"}),": In-place message display"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.a,{href:"/docs/components-loading--docs",children:"DpLoading"}),": Loading indicators"]}),`
-`]}),`
-`,e.jsx(n.h2,{id:"overriding-component-styles",children:"Overriding Component Styles"}),`
-`,e.jsxs(n.p,{children:["Components can be overridden to customize their appearance. Apart from ",e.jsx(n.a,{href:"?path=/docs/design-tokens-overview--docs#overriding-tailwind-tokens",children:"overriding the Css Variables"}),`,
-distinct classes within the markup of demosplan components can be used to apply custom styles.
-To target components and their elements, you can use specific css selectors that should be part of any
-of the components. They do not carry any styles and are solely used for this purpose. They are
-prefixed with `,e.jsx(n.code,{children:"dp-"}),` to avoid conflicts with other classes. For example, DpFlyout provides
-the selectors `,e.jsx(n.code,{children:"dp-flyout"})," for the outer container, ",e.jsx(n.code,{children:"dp-flyout-trigger"}),` for the trigger element,
-and `,e.jsx(n.code,{children:"dp-flyout-content"})," for the content area."]}),`
-`,e.jsx(n.h2,{id:"design-tokens",children:"Design Tokens"}),`
-`,e.jsx(n.p,{children:"Design tokens are the foundation of our design system, providing consistent visual attributes across components:"}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Color Tokens"}),": Brand colors, UI colors, and message states"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Space Tokens"}),": Spacing scales for margins, padding, and layout"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Typography Tokens"}),": Font sizes, weights, and line heights"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Effect Tokens"}),": Shadows, borders, and other visual effects"]}),`
-`]}),`
-`,e.jsx(n.p,{children:e.jsx(n.a,{href:"/docs/design-tokens-overview--docs",children:"Learn more about Design Tokens"})}),`
-`,e.jsx(n.h2,{id:"tailwind-css-integration",children:"Tailwind CSS Integration"}),`
-`,e.jsx(n.p,{children:"demosplan-ui is progressively adopting Tailwind CSS for utility-based styling. This provides:"}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsx(n.li,{children:"More flexibility in component styling"}),`
-`,e.jsx(n.li,{children:"Reduction in custom CSS"}),`
-`,e.jsx(n.li,{children:"Faster development through utility classes"}),`
-`]}),`
-`,e.jsx(n.p,{children:"Components are being migrated from traditional CSS classes to Tailwind utilities while maintaining the same visual appearance and functionality."}),`
-`,e.jsx(n.h2,{id:"tailwind-migration-status",children:"Tailwind Migration Status"}),`
-`,e.jsx(n.p,{children:"The table below shows the current status of component migration to Tailwind CSS:"}),`
-`,e.jsx(r,{headers:["Component","Migrated to Tailwind"],rows:[["DpAccordion","Partially (font weight cannot be migrated)"],["DpAnonymizeText","❌"],["DpAutocomplete","❌"],["DpBadge","✅"],["DpBulkEditHeader","✅"],["DpButton","✅"],["DpButtonRow","✅"],["DpCard","Partially (font weight cannot be migrated)"],["DpCheckbox","❌"],["DpCheckboxGroup","❌"],["DpColumnSelector","❌"],["DpConfirmDialog","❌"],["DpContextualHelp","✅"],["DpDataTable","❌"],["DpDataTableExtended","❌"],["DpDateRangePicker","❌"],["DpDatepicker","❌"],["DpDatetimePicker","❌"],["DpDetails","❌"],["DpDraggable","❌"],["DpEditableList","❌"],["DpEditor","❌"],["DpFlyout","✅"],["DpFormRow","❌"],["DpIcon","✅"],["DpInlineNotification","❌"],["DpInput","✅"],["DpLabel","✅"],["DpLoading","❌"],["DpModal","❌"],["DpMultiselect","❌"],["DpMultistepNav","❌"],["DpNotification","❌"],["DpObscure","❌"],["DpPager","❌"],["DpProgressBar","❌"],["DpRadio","❌"],["DpResettableInput","❌"],["DpSearchField","❌"],["DpSelect","❌"],["DpSkeletonBox","❌"],["DpSlidebar","❌"],["DpSlidingPagination","❌"],["DpSplitButton","❌"],["DpStickyElement","❌"],["DpTabs","❌"],["DpTextArea","❌"],["DpTimePicker","❌"],["DpToggle","❌"],["DpTooltip","✅"],["DpTransitionExpand","✅"],["DpTreeList","❌"],["DpUploadFiles","❌"],["DpVideoPlayer","❌"]]})]})}function h(i={}){const{wrapper:n}={...o(),...i.components};return n?e.jsx(n,{...i,children:e.jsx(s,{...i})}):s(i)}export{h as default};

package/storybook-static/assets/lengthHint-zGawKYxB.js

@@ -1 +0,0 @@
-import{d as n}from"./translations-DDOZrg-p.js";const r=(s,e)=>{const t=Number(e);return t?n.input.text.exactlength({requiredlength:e,cssClass:s===t?"color-status-progress-text":"color-status-failed-text",count:s}):""},l=(s,e)=>{const t=e>50?15:3,o=Number(e);return o?n.input.text.maxlength({cssClass:o-s>t?"text-status-progress":"text-status-failed",count:o-s,max:o}):""},c=(s,e)=>{const t=Number(e);return t?n.input.text.minlength({cssClass:t<=s?"color-status-progress-text":"color-status-failed-text",count:t-s,min:t}):""};export{c as a,r as e,l as m};

package/storybook-static/assets/prefixClass-BBJiSKc2.js

@@ -1 +0,0 @@
-function l(e=""){let i="";typeof dplan<"u"&&dplan.settings&&dplan.settings.publicCSSClassPrefix&&(i=dplan.settings.publicCSSClassPrefix);let n="";if(i==="")return e;if(typeof e!="string")throw new Error("classList is an"+typeof e+". should be String.",e);return/[.#[]/gi.test(e)?n=e.replace(/(\.)(\S+)/gi,(r,f,t)=>`.${i}${t}`):n=e.replace(/(\S+)/gi,r=>`${i}${r}`),n}export{l as p};

package/storybook-static/assets/prefixClassMixin-FjEzRm2G.js

@@ -1 +0,0 @@
-import"./dayjs.min-C3DHb-Vr.js";import{p as r}from"./prefixClass-BBJiSKc2.js";const e={methods:{prefixClass(s){return r(s)}}};export{e as p};

package/storybook-static/assets/tokens._overview-DfWYzL-L.js

@@ -1,111 +0,0 @@
-import{j as e,M as o}from"./blocks-kyJuz3C5.js";import{useMDXComponents as r}from"./index-BbC7EF1e.js";import{T as t}from"./Table-DSJ5DLHV.js";import{N as a}from"./Notice-FIynXtzj.js";import"./iframe-KFxwsBtW.js";import"./_commonjsHelpers-CE1G-McA.js";function s(i){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...r(),...i.components};return e.jsxs(e.Fragment,{children:[e.jsx(o,{title:"Design Tokens/Overview"}),`
-`,e.jsx(n.h1,{id:"design-tokens",children:"Design Tokens"}),`
-`,e.jsxs(n.p,{children:["Design tokens are ",e.jsx(n.strong,{children:"named entities that store visual design attributes"}),`. They are the smallest building blocks of the
-design system and provide a specific usage context for the values they represent.`]}),`
-`,e.jsxs(n.p,{children:["Design tokens help ",e.jsx(n.strong,{children:"maintain a scalable and consistent visual system"}),` for UI development. By introducing specific
-brand tokens, we also lay the groundwork for a themeable system that can be customized across different applications.`]}),`
-`,e.jsx(n.h2,{id:"naming-scheme",children:"Naming Scheme"}),`
-`,e.jsx(n.p,{children:"Tokens follow a consistent naming pattern:"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{children:`<Namespace>-<Category>(-<Domain>)?-<Concept/Element>-<Variant/State>(-<Context>)?
-`})}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Namespace"}),': Always "dp" (demosplan)']}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Category"}),': "color", "space", "text", "radius", "shadow", "z" (z-index)']}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Domain"}),': Can be "brand", "data", "ui" or "palette" (omitted in variable names for readability)']}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Concept/Element"}),': A color name (in palette colors), or a concept the token applies to (like "interactive")']}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Variant/State"}),': A shade ("dark-2" or "base") or a state (like "hover", "active")']}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Context"}),': Further specifies where a value should be used (e.g., "fill", "text", "border")']}),`
-`]}),`
-`,e.jsx(n.h2,{id:"how-to-use-design-tokens",children:"How to Use Design Tokens"}),`
-`,e.jsxs(n.p,{children:["Design tokens can be used through ",e.jsx(n.strong,{children:"Tailwind utility classes"})," (recommended) or ",e.jsx(n.strong,{children:"SCSS variables"}),"."]}),`
-`,e.jsx(n.h3,{id:"tailwind-utility-classes",children:"Tailwind Utility Classes"}),`
-`,e.jsx(n.p,{children:"All tokens are available as Tailwind utility classes in the latest version. To use tokens via Tailwind:"}),`
-`,e.jsx(n.h4,{id:"tailwind-v3-configuration",children:"Tailwind v3 Configuration"}),`
-`,e.jsx(n.p,{children:"For Tailwind v3 projects, import the configuration from demosplan-ui:"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-js",children:`// tailwind.config.js (Tailwind v3)
-const config = {
-  ...require('@demos-europe/demosplan-ui/tailwind.config'),
-  content: [ // Files to watch for tailwind classes ],
-  // Other config options
-}
-
-module.exports = config
-`})}),`
-`,e.jsx(n.h4,{id:"tailwind-v4-configuration",children:"Tailwind v4 Configuration"}),`
-`,e.jsx(n.p,{children:"For Tailwind v4 projects, import the theme CSS file and use the @theme directive:"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-css",children:`/* Either, use the simple approach importing everything tailwindcss contains */
-@import "tailwindcss";
-@import "@demos-europe/demosplan-ui/styles/theme.css" layer(theme);
-@import "@demos-europe/demosplan-ui/styles/utilities.css";
-
-/* Or, only use demosplan-ui Theme and Utilities, and Tailwind Preflight and Utilities */
-@layer theme, base, utilities;
-@import "@demos-europe/demosplan-ui/styles/theme.css" layer(theme);
-@import "tailwindcss/preflight.css" layer(base);
-@import "tailwindcss/utilities.css" layer(utilities);
-@import "@demos-europe/demosplan-ui/styles/utilities.css";
-
-/* Optional: Override specific tokens */
-@theme {
-  --color-interactive: var(--dp-color-purple-base, #5000ca);
-}
-`})}),`
-`,e.jsx(a,{content:'The utilities.css provided by demosplan-ui can not be imported into the "layer(utilities)" layer, nevertheless Tailwind picks them up accordingly.'}),`
-`,e.jsx(n.h4,{id:"using-design-tokens-in-markup",children:"Using Design Tokens in Markup"}),`
-`,e.jsx(n.p,{children:"Once configured, use tokens in your markup:"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-html",children:`<div class="text-interactive hover:text-interactive-hover p-4 rounded-md shadow bg-surface">
-  Content with design tokens applied
-</div>
-`})}),`
-`,e.jsx(n.h4,{id:"tailwind-v4-css-variables-system",children:"Tailwind v4 CSS Variables System"}),`
-`,e.jsx(n.p,{children:"With Tailwind v4, design tokens are exposed as CSS variables in two formats:"}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:["In ",e.jsx(n.code,{children:":root"}),": All tokens with their raw values (e.g., ",e.jsx(n.code,{children:"--dp-color-blue-base: #0057b8"}),")"]}),`
-`,e.jsxs(n.li,{children:["In ",e.jsx(n.code,{children:"@theme"}),": Tokens mapped to tailwind-specific properties (e.g., ",e.jsx(n.code,{children:"--text-color-default: var(--dp-color-neutral-dark-2, #333333)"}),")"]}),`
-`]}),`
-`,e.jsx(n.p,{children:"This system allows for simpler theming and more predictable inheritance."}),`
-`,e.jsx(n.h3,{id:"scss-variables-legacy",children:"SCSS Variables (Legacy)"}),`
-`,e.jsx(n.p,{children:"For projects still using SCSS, tokens can be imported and used as variables:"}),`
-`,e.jsxs(n.ol,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Import tokens"}),":"]}),`
-`]}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-scss",children:`// Import all tokens
-@import "@demos-europe/demosplan-ui/tokens/scss/color";
-@import "@demos-europe/demosplan-ui/tokens/scss/space";
-// ...other token categories
-`})}),`
-`,e.jsxs(n.ol,{start:"2",children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Use tokens in your styles"}),":"]}),`
-`]}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-scss",children:`.custom-element {
-  font-size: $dp-font-size-medium;
-  color: $dp-color-interactive-default;
-  padding: $dp-space-4;
-
-  &:hover {
-    color: $dp-color-interactive-hover;
-  }
-}
-`})}),`
-`,e.jsx(n.h2,{id:"overriding-tokens",children:"Overriding Tokens"}),`
-`,e.jsx(n.h3,{id:"overriding-tailwind-tokens",children:"Overriding Tailwind Tokens"}),`
-`,e.jsx(n.p,{children:"You can override design tokens by setting CSS variables:"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-css",children:`:root {
-  /* Override a brand color */
-  --dp-color-blue-base: #2400d0;
-
-  /* Override a specific semantic token */
-  --dp-color-interactive-hover: #e100bd;
-}
-`})}),`
-`,e.jsx(n.h3,{id:"overriding-scss-variables",children:"Overriding SCSS Variables"}),`
-`,e.jsx(n.p,{children:"To override SCSS variables, define your overrides before importing the token files:"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-scss",children:`// Override a token
-$dp-color-interactive-hover: #9700ff;
-
-// Import tokens after overrides
-@import '@demos-europe/demosplan-ui/tokens/scss/color.ui';
-`})}),`
-`,e.jsx(n.h2,{id:"available-token-categories",children:"Available Token Categories"}),`
-`,e.jsx(t,{headers:["Token Category","Description","Tailwind Example","SCSS Example"],rows:[["Color","Brand, UI, and data visualization colors","text-interactive hover:text-interactive-hover","$dp-color-interactive-default"],["Space","Spacing scale for margins, padding, etc.","p-4 m-2 gap-1.5","$dp-space-4"],["Font Size","Typography scale and semantic sizes","text-xs text-h1","$dp-font-size-medium"],["Border Radius","Rounded corners for UI elements","rounded-md rounded-full","$dp-rounded-md"],["Box Shadow","Elevation effects for components","shadow-sm shadow-lg","$dp-box-shadow"],["Z-Index","Stacking context values","z-dropdown z-modal","$dp-z-index-dropdown"],["Breakpoints","Responsive design breakpoints","sm:flex lg:grid","$dp-breakpoints-lg"]]}),`
-`,e.jsx(n.p,{children:"See the individual token pages for complete details and available values for each category."})]})}function u(i={}){const{wrapper:n}={...r(),...i.components};return n?e.jsx(n,{...i,children:e.jsx(s,{...i})}):s(i)}export{u as default};

package/storybook-static/assets/tokens.boxShadow-BRgz_5Oh.js

@@ -1,64 +0,0 @@
-import{j as e,M as o}from"./blocks-kyJuz3C5.js";import{useMDXComponents as d}from"./index-BbC7EF1e.js";import{T as i}from"./Table-DSJ5DLHV.js";import{N as t}from"./Notice-FIynXtzj.js";import"./iframe-KFxwsBtW.js";import"./_commonjsHelpers-CE1G-McA.js";function n(a){const s={code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...d(),...a.components};return e.jsxs(e.Fragment,{children:[e.jsx(o,{title:"Design Tokens/Box Shadow"}),`
-`,e.jsx(s.h1,{id:"box-shadow-tokens",children:"Box Shadow Tokens"}),`
-`,e.jsx(s.p,{children:"Box shadow tokens provide consistent elevation effects across the UI. These tokens help create visual hierarchy and depth in the interface."}),`
-`,e.jsx(s.h2,{id:"available-shadow-values",children:"Available Shadow Values"}),`
-`,e.jsx(i,{headers:["Description","Tailwind Class","SCSS Variable","Use Case"],rows:[["Default shadow","shadow-sm","$dp-box-shadow-sm","Cards, buttons, dropdowns"],["Medium shadow","shadow-md","$dp-box-shadow-md","Elevated cards, active buttons"],["Large shadow","shadow-lg","$dp-box-shadow-lg","Modals, popovers"],["Extra large shadow","shadow-xl","$dp-box-shadow-xl","Full-width/height elements (sidebars, bottom bars)"]]}),`
-`,e.jsx(t,{content:"The legacy SCSS variables $dp-box-shadow-1 through $dp-box-shadow-4 are deprecated and will be removed in a future release."}),`
-`,e.jsx(s.h2,{id:"shadow-examples",children:"Shadow Examples"}),`
-`,e.jsxs("div",{className:"flex flex-wrap gap-6 p-4",children:[e.jsx("div",{className:"w-10 h-10 bg-surface shadow-sm flex items-center justify-center",children:"shadow-sm"}),e.jsx("div",{className:"w-10 h-10 bg-surface shadow-md flex items-center justify-center",children:"shadow-md"}),e.jsx("div",{className:"w-10 h-10 bg-surface shadow-lg flex items-center justify-center",children:"shadow-lg"}),e.jsx("div",{className:"w-10 h-10 bg-surface shadow-xl flex items-center justify-center",children:"shadow-xl"})]}),`
-`,e.jsx(s.h2,{id:"usage",children:"Usage"}),`
-`,e.jsx(s.h3,{id:"tailwind-usage",children:"Tailwind Usage"}),`
-`,e.jsx(s.p,{children:"Box shadow tokens can be applied directly in HTML with Tailwind utility classes:"}),`
-`,e.jsx(s.pre,{children:e.jsx(s.code,{className:"language-html",children:`<!-- Basic shadow -->
-<div class="shadow-sm p-4 bg-surface">
-  Card with standard shadow
-</div>
-
-<!-- Elevated element -->
-<div class="shadow-md p-4 bg-surface">
-  Elevated card
-</div>
-
-<!-- Modal -->
-<div class="shadow-lg p-6 bg-surface">
-  Modal content
-</div>
-
-<!-- Sidebar -->
-<aside class="shadow-xl p-4 bg-surface h-screen">
-  Sidebar content
-</aside>
-
-<!-- Hover effects -->
-<button class="shadow-sm hover:shadow-md active:shadow-lg">
-  Button with dynamic shadows
-</button>
-`})}),`
-`,e.jsx(s.h3,{id:"scss-usage",children:"SCSS Usage"}),`
-`,e.jsx(s.pre,{children:e.jsx(s.code,{className:"language-scss",children:`// Import box shadow tokens
-@import '@demos-europe/demosplan-ui/tokens/scss/boxShadow';
-
-// Use in your styles
-.card {
-  box-shadow: $dp-box-shadow;
-}
-
-.modal {
-  box-shadow: $dp-box-shadow-lg;
-}
-
-.button {
-  box-shadow: $dp-box-shadow;
-
-  &:hover {
-    box-shadow: $dp-box-shadow-md;
-  }
-}
-`})}),`
-`,e.jsx(s.h2,{id:"guidelines",children:"Guidelines"}),`
-`,e.jsxs(s.ul,{children:[`
-`,e.jsx(s.li,{children:"Use shadows consistently to convey elevation in the interface"}),`
-`,e.jsx(s.li,{children:'Higher elevation (larger shadows) should be used for elements that appear "closer" to the user'}),`
-`,e.jsx(s.li,{children:"Combine shadows with slight background color changes for more distinct separation"}),`
-`,e.jsx(s.li,{children:"Use shadows sparingly to avoid visual clutter"}),`
-`]})]})}function m(a={}){const{wrapper:s}={...d(),...a.components};return s?e.jsx(s,{...a,children:e.jsx(n,{...a})}):n(a)}export{m as default};

package/storybook-static/assets/tokens.breakpoints-V5SksMvF.js

@@ -1,66 +0,0 @@
-import{j as e,M as r}from"./blocks-kyJuz3C5.js";import{useMDXComponents as a}from"./index-BbC7EF1e.js";import{T as o}from"./Table-DSJ5DLHV.js";import{N as t}from"./Notice-FIynXtzj.js";import"./iframe-KFxwsBtW.js";import"./_commonjsHelpers-CE1G-McA.js";function s(i){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...a(),...i.components};return e.jsxs(e.Fragment,{children:[e.jsx(r,{title:"Design Tokens/Breakpoints"}),`
-`,e.jsx(n.h1,{id:"breakpoint-tokens",children:"Breakpoint Tokens"}),`
-`,e.jsx(n.p,{children:"Breakpoint tokens define the consistent responsive design thresholds throughout the application. These tokens help create a responsive UI that adapts to different screen sizes."}),`
-`,e.jsx(n.h2,{id:"available-breakpoint-values",children:"Available Breakpoint Values"}),`
-`,e.jsx(o,{headers:["Description","Tailwind Modifier","SCSS Variable","Value"],rows:[["Small","sm:","$dp-breakpoints-sm","620px"],["Medium","md:","$dp-breakpoints-md","904px"],["Large","lg:","$dp-breakpoints-lg","1200px"],["Extra Large","xl:","$dp-breakpoints-xl","1400px"]]}),`
-`,e.jsx(t,{content:'Breakpoints in demosplan-ui follow a "mobile-first" approach, meaning they trigger at the specified width and above.'}),`
-`,e.jsx(n.h2,{id:"usage",children:"Usage"}),`
-`,e.jsx(n.h3,{id:"tailwind-usage",children:"Tailwind Usage"}),`
-`,e.jsx(n.p,{children:"Breakpoint tokens can be used as modifiers with any Tailwind utility class:"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-html",children:`<!-- Responsive layout -->
-<div class="flex flex-col md:flex-row">
-  <!-- Changes from column to row at md breakpoint -->
-</div>
-
-<!-- Responsive visibility -->
-<div class="hidden lg:block">
-  <!-- Only visible on large screens and up -->
-</div>
-
-<div class="block md:hidden">
-  <!-- Only visible on screens smaller than md -->
-</div>
-
-<!-- Responsive spacing -->
-<div class="p-2 md:p-4 lg:p-6">
-  <!-- Padding increases at each breakpoint -->
-</div>
-
-<!-- Complex responsive design -->
-<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-2 md:gap-4">
-  <!-- Grid that changes columns and spacing at different breakpoints -->
-</div>
-`})}),`
-`,e.jsx(n.h3,{id:"tailwind-v4-container-queries",children:"Tailwind v4 Container Queries"}),`
-`,e.jsx(n.p,{children:"In Tailwind v4, container queries allow for responsive behavior based on parent container width rather than viewport width:"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-html",children:`<div class="@container">
-  <div class="@md:flex @md:flex-row">
-    <!-- Content that responds to container width -->
-  </div>
-</div>
-`})}),`
-`,e.jsx(n.h3,{id:"scss-usage",children:"SCSS Usage"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-scss",children:`// Import breakpoint tokens
-@import '@demos-europe/demosplan-ui/tokens/scss/breakpoints';
-
-// Use in media queries
-.element {
-  display: block;
-
-  @media (min-width: $dp-breakpoints-md) {
-    display: flex;
-  }
-
-  @media (min-width: $dp-breakpoints-lg) {
-    max-width: 75%;
-  }
-}
-`})}),`
-`,e.jsx(n.h2,{id:"responsive-design-guidelines",children:"Responsive Design Guidelines"}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsx(n.li,{children:"Begin designing for mobile (smallest screens) first"}),`
-`,e.jsx(n.li,{children:"Use breakpoints to enhance the experience as screen size increases"}),`
-`,e.jsx(n.li,{children:"Avoid creating designs that only work at specific breakpoints"}),`
-`,e.jsx(n.li,{children:"Test your designs across a range of screen sizes, not just at the defined breakpoints"}),`
-`,e.jsx(n.li,{children:"Consider using container queries (Tailwind v4) for component-specific responsiveness"}),`
-`]})]})}function g(i={}){const{wrapper:n}={...a(),...i.components};return n?e.jsx(n,{...i,children:e.jsx(s,{...i})}):s(i)}export{g as default};

package/storybook-static/assets/tokens.color-BpZbPjHk.js

@@ -1,107 +0,0 @@
-import{e as o,j as r,M as S}from"./blocks-kyJuz3C5.js";import{useMDXComponents as k}from"./index-BbC7EF1e.js";import{g as P}from"./_commonjsHelpers-CE1G-McA.js";import{N as b}from"./Notice-FIynXtzj.js";import"./iframe-KFxwsBtW.js";var m={exports:{}},f,v;function R(){if(v)return f;v=1;var t="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";return f=t,f}var g,y;function q(){if(y)return g;y=1;var t=R();function e(){}function n(){}return n.resetWarningCache=e,g=function(){function a(d,c,O,$,B,N){if(N!==t){var x=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw x.name="Invariant Violation",x}}a.isRequired=a;function s(){return a}var l={array:a,bigint:a,bool:a,func:a,number:a,object:a,string:a,symbol:a,any:a,arrayOf:s,element:a,elementType:a,instanceOf:s,node:a,objectOf:s,oneOf:s,oneOfType:s,shape:s,exact:s,checkPropTypes:n,resetWarningCache:e};return l.PropTypes=l,l},g}var j;function I(){return j||(j=1,m.exports=q()()),m.exports}var D=I();const T=P(D),C=t=>{const e=[];for(let n in t)if(typeof t[n]=="object"&&t[n]!==null)if(t[n].value){const s=t[n].path.toSpliced(0,2).filter(Boolean).join("-").replace(/-DEFAULT/g,""),l=d=>{let c=d.replace(/^color-/,"(text|bg|border...)-");return c=c.replace(/^textColor-/,"text-"),c=c.replace(/^backgroundColor-/,"bg-"),c.replace(/^borderColor-/,"border-")};e.push({twClass:s.replace(/^(color|textColor|backgroundColor|borderColor)-/,"bg-"),name:s,nameModified:l(s),value:t[n].value,description:t[n].$description})}else e.push(...C(t[n]));return e},E=["color","textColor","backgroundColor","borderColor"],i={};E.forEach(t=>{i[t]={}});const F=C(require("../../tokens/dist/js/color.ui").color["ui-tailwind"]);F.forEach(t=>{E.forEach(e=>{t.name.startsWith(`${e}-`)&&(i[e][t.name]=t)})});const p=({module:t})=>o.createElement("table",null,o.createElement("thead",null,o.createElement("tr",null,o.createElement("th",{className:"whitespace-nowrap"},"Color"),o.createElement("th",{className:"whitespace-nowrap"},"Name"),o.createElement("th",{className:"whitespace-nowrap"},"Hex value"),o.createElement("th",{className:"whitespace-nowrap"},"Description"))),o.createElement("tbody",null,Object.keys(i[t]).map(e=>o.createElement("tr",{className:"align-top",key:e.name},o.createElement("td",{className:"whitespace-nowrap"},o.createElement("div",{className:"w-4 h-4",style:{backgroundColor:i[t][e].value,border:"1px solid hsla(203, 50%, 30%, 0.15)"}})),o.createElement("td",{className:"whitespace-nowrap"},i[t][e].nameModified),o.createElement("td",{className:"whitespace-nowrap"},i[t][e].value),o.createElement("td",null,i[t][e].description)))));p.propTypes={module:T.string.isRequired};const h=t=>{const e=[];for(let n in t)if(typeof t[n]=="object"&&t[n]!==null)if(t[n].value){const{item:a,subitem:s,state:l}=t[n].attributes||{},d=[a,s,l].filter(Boolean).join("-").replace(/-DEFAULT/g,"");e.push({twClass:"bg-"+d,name:d,value:t[n].value,description:t[n].$description})}else e.push(...h(t[n]));return e},U={brand:h(require("../../tokens/dist/js/color.brand").color.brand),data:h(require("../../tokens/dist/js/color.data").color.data),palette:h(require("../../tokens/dist/js/color.palette").color.palette)},u=({namespace:t})=>o.createElement("table",null,o.createElement("thead",null,o.createElement("tr",null,o.createElement("th",{className:"whitespace-nowrap"},"Color"),o.createElement("th",{className:"whitespace-nowrap"},"Name"),o.createElement("th",{className:"whitespace-nowrap"},"Hex value"),o.createElement("th",{className:"whitespace-nowrap"},"Description"))),o.createElement("tbody",null,U[t].map(e=>o.createElement("tr",{key:e.name},o.createElement("td",null,o.createElement("div",{className:"w-4 h-4",style:{backgroundColor:e.value,border:"1px solid hsla(203, 50%, 30%, 0.15)"}})),o.createElement("td",{className:"whitespace-nowrap"},t!=="palette"?"(text|bg|border)-"+e.name:e.name),o.createElement("td",{className:"whitespace-nowrap"},e.value),o.createElement("td",null,e.description)))));u.propTypes={namespace:T.string.isRequired};function w(t){const e={code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...k(),...t.components};return r.jsxs(r.Fragment,{children:[r.jsx(S,{title:"Design Tokens/Color"}),`
-`,`
-`,r.jsx(e.h1,{id:"color-tokens",children:"Color Tokens"}),`
-`,r.jsx(e.p,{children:"The demosplan-ui color tokens are grouped into several key categories:"}),`
-`,r.jsxs(e.ul,{children:[`
-`,r.jsxs(e.li,{children:[r.jsx(e.strong,{children:"Functional (Semantic) Colors"}),": UI elements with specific meaning like status, interactive elements, and more"]}),`
-`,r.jsxs(e.li,{children:[r.jsx(e.strong,{children:"Brand Colors"}),": For branded contexts"]}),`
-`,r.jsxs(e.li,{children:[r.jsx(e.strong,{children:"Data Visualization Colors"}),": For charts and data displays"]}),`
-`,r.jsxs(e.li,{children:[r.jsx(e.strong,{children:"Palette Colors"}),": Base color palette (not meant for direct use)"]}),`
-`]}),`
-`,r.jsx(b,{content:"Note: In Tailwind, color tokens follow a property-specific naming scheme, where the property name comes first (like 'text-color-' or 'background-color-')."}),`
-`,r.jsx(e.h2,{id:"usage",children:"Usage"}),`
-`,r.jsx(e.h3,{id:"tailwind-usage",children:"Tailwind Usage"}),`
-`,r.jsx(e.p,{children:"Color tokens can be used directly in your HTML with Tailwind utility classes:"}),`
-`,r.jsx(e.pre,{children:r.jsx(e.code,{className:"language-html",children:`<!-- Text colors -->
-<p class="text-interactive">Interactive text</p>
-<p class="text-interactive-hover">Hover state text</p>
-<p class="text-message-severe">Error message</p>
-
-<!-- Background colors -->
-<div class="bg-surface">Default background</div>
-<div class="bg-surface-light">Light background</div>
-<div class="bg-message-info">Info message background</div>
-
-<!-- Border colors -->
-<div class="border border-neutral">Default border</div>
-<div class="border border-status-failed">Error border</div>
-`})}),`
-`,r.jsx(e.h3,{id:"scss-usage",children:"SCSS Usage"}),`
-`,r.jsx(e.pre,{children:r.jsx(e.code,{className:"language-scss",children:`// Import token files
-@import '@demos-europe/demosplan-ui/tokens/scss/color.palette';
-@import '@demos-europe/demosplan-ui/tokens/scss/color.brand';
-@import '@demos-europe/demosplan-ui/tokens/scss/color.ui';
-
-// Use in your styles
-.element {
-  color: $dp-color-interactive-default;
-
-  &:hover {
-    color: $dp-color-interactive-hover;
-    background-color: $dp-color-surface-light;
-  }
-}
-`})}),`
-`,r.jsx(e.h4,{id:"overriding-scss-variables",children:"Overriding SCSS Variables"}),`
-`,r.jsx(e.p,{children:"To override the value of a specific token, define the override before importing the provided file:"}),`
-`,r.jsx(e.pre,{children:r.jsx(e.code,{children:`// Set a new color for just this one token:
-$dp-color-interactive-hover: #9700ff;
-
-// Import tokens. Only the ones that are not yet defined
-// will be assigned their default values.
-@import '@demos-europe/demosplan-ui/tokens/scss/color.ui';
-
-// Use tokens...
-`})}),`
-`,r.jsx(e.p,{children:`If you want to override tokens with other token values, you
-would have to import those first. Also, by importing alias
-tokens afterward, they are as well assigned the changed values.`}),`
-`,r.jsx(e.pre,{children:r.jsx(e.code,{children:`@import '@demos-europe/demosplan-ui/tokens/scss/color.palette';
-
-// Set a new color from palette tokens for this one token:
-$dp-color-interactive-hover: $dp-color-red-dark-1;
-
-// Set main brand color to a palette color.
-$dp-color-main: $dp-color-yellow-base;
-
-// Import UI tokens. Only the ones that are not yet defined
-// will be assigned their default values. UI tokens that are
-// aliased to $dp-color-main will inherit the yellow defined above.
-@import '@demos-europe/demosplan-ui/tokens/scss/color.ui';
-
-// Use tokens...
-`})}),`
-`,r.jsx(e.h2,{id:"available-color-tokens",children:"Available Color Tokens"}),`
-`,r.jsx(e.p,{children:`All color token groups are available for Tailwind usage. The specific property prefix (text, bg, border, etc.)
-will determine which variant of the token is used.`}),`
-`,r.jsx(e.h3,{id:"functional-semantic-color-tokens",children:"Functional (Semantic) Color Tokens"}),`
-`,r.jsx(e.p,{children:"These tokens express functional meaning rather than brand identity."}),`
-`,r.jsx(e.h4,{id:"tokens-available-for-all-properties",children:"Tokens available for all properties"}),`
-`,r.jsx(p,{module:"color"}),`
-`,r.jsx(e.h4,{id:"text-colors",children:"Text colors"}),`
-`,r.jsx(p,{module:"textColor"}),`
-`,r.jsx(e.h4,{id:"background-colors",children:"Background colors"}),`
-`,r.jsx(p,{module:"backgroundColor"}),`
-`,r.jsx(e.h4,{id:"border-colors",children:"Border colors"}),`
-`,r.jsx(p,{module:"borderColor"}),`
-`,r.jsx(e.h3,{id:"brand-colors",children:"Brand Colors"}),`
-`,r.jsx(e.p,{children:"For contexts that require brand expression, use these tokens:"}),`
-`,r.jsx(u,{namespace:"brand"}),`
-`,r.jsx(e.h3,{id:"data-visualization-colors",children:"Data Visualization Colors"}),`
-`,r.jsx(e.p,{children:"These distinct color palettes are designed for data visualizations and charts:"}),`
-`,r.jsx(u,{namespace:"data"}),`
-`,r.jsx(e.p,{children:`These are generated with https://colorbrewer2.org/#type=diverging&scheme=BrBG&n=8 to be colorblind safe
-and intentionally separate from other color palettes.`}),`
-`,r.jsx(e.p,{children:`Although these colors are universally used for charts, they need to be refined into "sequential", "categorical",
-and "diverging" when appropriate. Read more if the need arises:`}),`
-`,r.jsxs(e.ul,{children:[`
-`,r.jsx(e.li,{children:"https://design.gitlab.com/data-visualization/color/"}),`
-`,r.jsx(e.li,{children:"https://www.carbondesignsystem.com/data-visualization/color-palettes/"}),`
-`,r.jsx(e.li,{children:"https://medium.com/design-ibm/inclusive-color-sequences-for-data-viz-in-6-steps-712869b910c2"}),`
-`,r.jsx(e.li,{children:"https://medium.com/carbondesign/color-palettes-and-accessibility-features-for-data-visualization-7869f4874fca"}),`
-`,r.jsx(e.li,{children:"https://blog.graphiq.com/finding-the-right-color-palettes-for-data-visualizations-fcd4e707a283"}),`
-`]}),`
-`,r.jsx(e.h3,{id:"palette-colors",children:"Palette Colors"}),`
-`,r.jsx(e.p,{children:"Color palettes contain the raw color values used in the UI system. Each color has 7 steps: a base color, 2 darker shades, and 4 lighter tints."}),`
-`,r.jsx(b,{content:"Palette colors should not be used directly in your UI - instead, the semantic colors defined above should be used."}),`
-`,r.jsx(u,{namespace:"palette"})]})}function L(t={}){const{wrapper:e}={...k(),...t.components};return e?r.jsx(e,{...t,children:r.jsx(w,{...t})}):w(t)}export{L as default};

package/storybook-static/assets/tokens.fontSize-rdG7vcZh.js

@@ -1,51 +0,0 @@
-import{j as e,M as a}from"./blocks-kyJuz3C5.js";import{useMDXComponents as l}from"./index-BbC7EF1e.js";import{T as o}from"./Table-DSJ5DLHV.js";import{N as i}from"./Notice-FIynXtzj.js";import"./iframe-KFxwsBtW.js";import"./_commonjsHelpers-CE1G-McA.js";function s(t){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...l(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(a,{title:"Design Tokens/Font Size"}),`
-`,e.jsx(n.h1,{id:"font-size-tokens",children:"Font Size Tokens"}),`
-`,e.jsx(n.p,{children:"Font size tokens define the typography scale for demosplan-ui. They include both numerical scale tokens and semantic tokens for different UI contexts."}),`
-`,e.jsx(n.h2,{id:"available-font-size-tokens",children:"Available Font Size Tokens"}),`
-`,e.jsx(o,{headers:["Description","Tailwind Class","SCSS Variable","Value"],rows:[["Smallest size","text-xs","$dp-font-size-0","10px"],["Small text","text-sm","$dp-font-size-small","12px"],["Default text","text-base text-medium","$dp-font-size-medium","16px"],["Large text","text-lg","$dp-font-size-large","18px"],["Very large text","text-xl","$dp-font-size-larger","20px"],["Heading level 6","text-h6","$dp-font-size-h6","16px"],["Heading level 5","text-h5","$dp-font-size-h5","18px"],["Heading level 4","text-h4","$dp-font-size-h4","20px"],["Heading level 3","text-h3","$dp-font-size-h3","24px"],["Heading level 2","text-h2","$dp-font-size-h2","32px"],["Heading level 1","text-h1","$dp-font-size-h1","40px"],["Header text","text-header","$dp-font-size-header","48px"],["Hero text","text-hero","$dp-font-size-hero","64px"]]}),`
-`,e.jsx(i,{content:"Font size tokens with line height settings (like headings) will automatically generate a paired --line-height CSS variable in Tailwind v4."}),`
-`,e.jsx(n.h2,{id:"usage",children:"Usage"}),`
-`,e.jsx(n.h3,{id:"tailwind-usage",children:"Tailwind Usage"}),`
-`,e.jsx(n.p,{children:"Font size tokens can be used directly in HTML with Tailwind utility classes:"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-html",children:`<!-- Basic font sizes -->
-<p class="text-base">Default text size (16px)</p>
-<p class="text-xs">Very small text (10px)</p>
-<p class="text-lg">Larger text (18px)</p>
-
-<!-- Semantic heading sizes -->
-<h1 class="text-h1">Heading Level 1</h1>
-<h2 class="text-h2">Heading Level 2</h2>
-<h3 class="text-h3">Heading Level 3</h3>
-
-<!-- Special cases -->
-<div class="text-hero">Hero Text</div>
-
-<!-- With line height -->
-<p class="text-h2 leading-h2">Heading with correct line height</p>
-`})}),`
-`,e.jsx(n.h3,{id:"tailwind-v4-line-height-pairing",children:"Tailwind v4 Line Height Pairing"}),`
-`,e.jsx(n.p,{children:"In Tailwind v4, font sizes with associated line heights use a paired variable format:"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-html",children:`<!-- This will apply both the font size and appropriate line height -->
-<h1 class="text-h1">Heading with paired line height</h1>
-`})}),`
-`,e.jsx(n.h3,{id:"scss-usage",children:"SCSS Usage"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-scss",children:`// Import font size tokens
-@import '@demos-europe/demosplan-ui/tokens/scss/fontSize';
-
-// Basic usage
-.element {
-  font-size: $dp-font-size-medium;
-}
-
-// With inuit-font-size mixin (for line height)
-.heading {
-  @include inuit-font-size($dp-font-size-h1, 1.3);
-}
-`})}),`
-`,e.jsx(n.h2,{id:"usage-guidelines",children:"Usage Guidelines"}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Heading tokens"})," (",e.jsx(n.code,{children:"h1"}),"-",e.jsx(n.code,{children:"h6"}),"): Use for content structure in long-form text"]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"UI tokens"})," (",e.jsx(n.code,{children:"smallest"}),", ",e.jsx(n.code,{children:"small"}),", ",e.jsx(n.code,{children:"medium"}),", etc.): Use for interface elements like buttons, tabs, etc."]}),`
-`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"Special tokens"})," (",e.jsx(n.code,{children:"header"}),", ",e.jsx(n.code,{children:"hero"}),"): Use sparingly for very specific branded sections"]}),`
-`]}),`
-`,e.jsx(i,{content:"Avoid mixing heading tokens with UI tokens in the same context. For user interfaces, use UI tokens; for content structure, use heading tokens."})]})}function g(t={}){const{wrapper:n}={...l(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(s,{...t})}):s(t)}export{g as default};

package/storybook-static/assets/tokens.rounded-CUE0q0vd.js

@@ -1,55 +0,0 @@
-import{j as e,M as i}from"./blocks-kyJuz3C5.js";import{useMDXComponents as r}from"./index-BbC7EF1e.js";import{T as o}from"./Table-DSJ5DLHV.js";import"./iframe-KFxwsBtW.js";import"./_commonjsHelpers-CE1G-McA.js";function s(d){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...r(),...d.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{title:"Design Tokens/Border Radius"}),`
-`,e.jsx(n.h1,{id:"border-radius-tokens",children:"Border Radius Tokens"}),`
-`,e.jsx(n.p,{children:"Border radius tokens define the consistent rounding of corners throughout the UI. These tokens help create a cohesive visual language and maintain consistent component styling."}),`
-`,e.jsx(n.h2,{id:"available-border-radius-values",children:"Available Border Radius Values"}),`
-`,e.jsx(o,{headers:["Description","Tailwind Class","SCSS Variable","Use Case"],rows:[["None","rounded-none","$dp-rounded-none","Elements with sharp corners"],["Extra Small","rounded-xs","$dp-rounded-xs","Minimal rounding, nested elements inside rounded-sm parents"],["Small (Default)","rounded-sm","$dp-rounded-sm","Default for most UI elements, form inputs, buttons"],["Medium","rounded-md","$dp-rounded-md","Larger components, list items, cards"],["Large","rounded-lg","$dp-rounded-lg","Prominent elements, larger containers"],["Full","rounded-full","$dp-rounded-full","Circular or pill-shaped elements"]]}),`
-`,e.jsx(n.h2,{id:"visual-examples",children:"Visual Examples"}),`
-`,e.jsxs("div",{className:"flex flex-wrap gap-4 p-4",children:[e.jsx("div",{className:"w-8 h-8 border-1 border-interactive rounded-none flex items-center justify-center",children:"none"}),e.jsx("div",{className:"w-8 h-8 border-1 border-interactive rounded-xs flex items-center justify-center",children:"xs"}),e.jsx("div",{className:"w-8 h-8 border-1 border-interactive rounded-sm flex items-center justify-center",children:"sm"}),e.jsx("div",{className:"w-8 h-8 border-1 border-interactive rounded-md flex items-center justify-center",children:"md"}),e.jsx("div",{className:"w-8 h-8 border-1 border-interactive rounded-lg flex items-center justify-center",children:"lg"}),e.jsx("div",{className:"w-8 h-8 border-1 border-interactive rounded-full flex items-center justify-center",children:"full"})]}),`
-`,e.jsx(n.h2,{id:"usage",children:"Usage"}),`
-`,e.jsx(n.h3,{id:"tailwind-usage",children:"Tailwind Usage"}),`
-`,e.jsx(n.p,{children:"Border radius tokens can be applied directly in HTML with Tailwind utility classes:"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-html",children:`<!-- Basic usage -->
-<button class="rounded-sm">Default button</button>
-<div class="rounded-md">Card with medium radius</div>
-<span class="rounded-full px-2 py-1">Pill label</span>
-
-<!-- Directional rounding -->
-<div class="rounded-t-lg">Rounded top corners only</div>
-<div class="rounded-r-md">Rounded right corners only</div>
-<div class="rounded-bl-sm">Rounded bottom-left corner only</div>
-
-<!-- Responsive variants -->
-<div class="rounded-sm md:rounded-lg">
-  Changes radius at different breakpoints
-</div>
-
-<!-- Combining with other properties -->
-<button class="rounded-sm bg-interactive text-on-dark p-2">
-  Styled button
-</button>
-`})}),`
-`,e.jsx(n.h3,{id:"scss-usage",children:"SCSS Usage"}),`
-`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-scss",children:`// Import border radius tokens
-@import '@demos-europe/demosplan-ui/tokens/scss/rounded';
-
-// Use in your styles
-.button {
-  border-radius: $dp-rounded-sm;
-}
-
-.card {
-  border-radius: $dp-rounded-md;
-}
-
-.badge {
-  border-radius: $dp-rounded-full;
-}
-`})}),`
-`,e.jsx(n.h2,{id:"guidelines",children:"Guidelines"}),`
-`,e.jsxs(n.ul,{children:[`
-`,e.jsxs(n.li,{children:["Use ",e.jsx(n.code,{children:"rounded-sm"})," as the default for most UI elements"]}),`
-`,e.jsx(n.li,{children:"Maintain consistent rounding within similar component types"}),`
-`,e.jsxs(n.li,{children:["Use ",e.jsx(n.code,{children:"rounded-xs"})," for nested elements within already rounded containers"]}),`
-`,e.jsxs(n.li,{children:["Apply ",e.jsx(n.code,{children:"rounded-full"})," for pills and circular elements"]}),`
-`,e.jsx(n.li,{children:"When in doubt, choose the smaller radius option"}),`
-`]})]})}function m(d={}){const{wrapper:n}={...r(),...d.components};return n?e.jsx(n,{...d,children:e.jsx(s,{...d})}):s(d)}export{m as default};