Skip to content

Commit

Permalink
feat(xds)!: avoid overriding consumers theme by xds
Browse files Browse the repository at this point in the history
  • Loading branch information
@AdrianArenal
AdrianArenal committed Nov 20, 2024
1 parent 5415b6b commit 473312c
Show file tree
Hide file tree
Showing 128 changed files with 3,620 additions and 9,052 deletions.
14 changes: 7 additions & 7 deletions packages/x-tailwindcss/demo/src/components/xds-base-showcase.vue
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
<template>
<div class="x-flex x-flex-col x-gap-32">
<h1 class="x-text-lg">{{ title }}</h1>
<div class="flex flex-col gap-8">
<h1 class="text-lg">{{ title }}</h1>
<div
v-for="(classes, section) in sections"
:key="section"
class="x-flex x-flex-row x-gap-16 x-items-baseline"
class="flex flex-row items-baseline gap-4"
>
<h2 class="x-text-md x-w-128 x-text-right x-flex-none">{{ section }}</h2>
<h2 class="text-md w-[128px] flex-none text-right">{{ section }}</h2>

<div
class="x-flex x-flex-row x-flex-wrap x-gap-16 x-items-baseline"
class="flex flex-row flex-wrap items-baseline gap-4"
:class="sectionsClasses[section] || ''"
>
<div v-for="cssClass in classes" :key="cssClass">
Expand All @@ -18,8 +18,8 @@
</div>
</div>
<div
class="x-fixed x-left-1/2 x-top-1/2 x-bg-neutral-25 x-p-8 x-transition-opacity x-duration-300 x-pointer-events-none -translate-x-1/2 -translate-y-1/2"
:class="isMessageVisible ? 'x-opacity-100' : 'x-opacity-0'"
class="bg-neutral-25 pointer-events-none fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 p-8 transition-opacity duration-300"
:class="isMessageVisible ? 'opacity-100' : 'opacity-0'"
>
CSS classes copied to Clipboard!
</div>
Expand Down
10 changes: 5 additions & 5 deletions packages/x-tailwindcss/demo/src/components/xds-button-group.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
:sections="sections"
#default="{ cssClass, copyCssClassesToClipboard }"
>
<div class="x-flex x-gap-20 x-flex-wrap">
<div class="flex flex-wrap gap-5">
<div
@click="copyCssClassesToClipboard"
@keydown="copyCssClassesToClipboard"
Expand All @@ -19,7 +19,7 @@
@click="copyCssClassesToClipboard"
@keydown="copyCssClassesToClipboard"
:class="cssClass"
class="x-gap-8"
class="gap-2"
>
<button class="x-button">BUTTON 1</button>
<span class="x-button-group-divider" />
Expand All @@ -42,7 +42,7 @@
@click="copyCssClassesToClipboard"
@keydown="copyCssClassesToClipboard"
:class="cssClass"
class="x-gap-8"
class="gap-2"
>
<button class="x-button x-button-outlined">BUTTON 1</button>
<button class="x-button x-button-outlined">BUTTON 2</button>
Expand All @@ -53,7 +53,7 @@
@click="copyCssClassesToClipboard"
@keydown="copyCssClassesToClipboard"
:class="cssClass"
class="x-gap-8"
class="gap-2"
>
<button class="x-button x-button-outlined">BUTTON 1</button>
<span class="x-button-group-divider" />
Expand All @@ -79,7 +79,7 @@
@click="copyCssClassesToClipboard"
@keydown="copyCssClassesToClipboard"
:class="cssClass"
class="x-text-accent-50 x-gap-8"
class="x-text-accent-50 gap-2"
>
<button class="x-button x-button-tight">BUTTON 1</button>
<button class="x-button x-button-tight">BUTTON 2</button>
Expand Down
2 changes: 1 addition & 1 deletion packages/x-tailwindcss/demo/src/components/xds-icon.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
>
<h3 class="x-text-xxs">{{ removeClassPrefix(cssClass, base) }}</h3>
<slot v-bind="{ cssClass, section, copyCssClassesToClipboard }">
<div class="x-flex">
<div class="flex">
<CheckIcon @click.native="copyCssClassesToClipboard" :class="cssClass" />
<CheckFillIcon @click.native="copyCssClassesToClipboard" :class="cssClass" />
<CuratedIcon @click.native="copyCssClassesToClipboard" :class="cssClass" />
Expand Down
24 changes: 11 additions & 13 deletions packages/x-tailwindcss/demo/src/components/xds-layout-fixed-header.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,43 +5,41 @@

<div class="modal x-bg-neutral-0">
<div :class="[cssClass, 'x-layout-min-margin-48 x-bg-neutral-10']">
<div class="x-scroll x-flex x-flex-col">
<div
class="x-layout-item x-sticky x-top-0 x-bg-neutral-0 x-border-b-1 x-border-neutral-25"
>
<div class="x-flex x-justify-between x-items-center x-py-8">
<div class="x-scroll flex flex-col">
<div class="x-layout-item bg-neutral-0 border-b-1 border-neutral-25 sticky top-0">
<div class="flex items-center justify-between py-2">
<span class="x-title3">FIXED HEADER LAYOUT</span>
<label for="layout-fixed-header-modal" class="x-button x-button-ghost x-ml-auto">
<label for="layout-fixed-header-modal" class="x-button x-button-ghost ml-auto">
Close
</label>
</div>

<div class="x-flex x-justify-between x-items-center x-py-16">
<div class="flex items-center justify-between py-4">
<div class="x-title3">HEADER START</div>
<div class="x-title2">HEADER MIDDLE</div>
<div class="x-title3">HEADER END</div>
</div>
</div>

<div class="x-layout-item x-border-b-1 x-border-neutral-25">
<div class="x-flex x-justify-center x-p-16 x-title3">SUBHEADER</div>
<div class="x-layout-item border-b-1 x-border-neutral-25">
<div class="x-title3 flex justify-center p-4">SUBHEADER</div>
</div>

<div class="x-layout-item">
<div class="x-flex x-justify-center x-p-16 x-title3 x-bg-neutral-10">TOOLBAR</div>
<div class="x-title3 x-bg-neutral-10 flex justify-center p-4">TOOLBAR</div>
</div>

<div class="x-layout-item x-layout-expand">
<div class="x-flex x-flex-col x-justify-between x-h-[2000px] x-p-12 x-bg-neutral-25">
<div class="x-bg-neutral-25 flex h-[2000px] flex-col justify-between p-3">
<section>MAIN</section>
<span class="x-place-self-end">MAIN BOTTOM</span>
<span class="place-self-end">MAIN BOTTOM</span>
</div>
</div>
</div>

<div class="x-layout-item x-layout-overlap">
<button
class="x-layout-on-margin-right x-justify-self-start x-self-end x-button x-button-sm x-button-circle x-mb-16"
class="x-layout-on-margin-right x-button x-button-sm x-button-circle mb-4 self-end justify-self-start"
>
▲
</button>
Expand Down
22 changes: 11 additions & 11 deletions packages/x-tailwindcss/demo/src/components/xds-layout-single-column.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,42 +5,42 @@

<div class="modal x-bg-neutral-10">
<div :class="[cssClass, 'x-layout-min-margin-48']">
<div class="x-layout-item x-bg-neutral-0 x-border-b-1 x-border-neutral-25">
<div class="x-flex x-justify-between x-items-center x-py-8">
<div class="x-layout-item x-bg-neutral-0 border-b-1 x-border-neutral-25">
<div class="flex items-center justify-between py-2">
<span class="x-title3">SINGLE COLUMN LAYOUT</span>
<label for="layout-single-column-modal" class="x-button x-button-ghost x-ml-auto">
<label for="layout-single-column-modal" class="x-button x-button-ghost ml-auto">
Close
</label>
</div>
</div>

<div class="x-layout-item x-border-b-1 x-border-neutral-25">
<div class="x-flex x-justify-between x-items-center x-py-16">
<div class="x-layout-item border-b-1 x-border-neutral-25">
<div class="flex items-center justify-between py-4">
<div class="x-title3">HEADER START</div>
<div class="x-title2">HEADER MIDDLE</div>
<div class="x-title3">HEADER END</div>
</div>
</div>

<div class="x-layout-item x-border-b-1 x-border-neutral-25">
<div class="x-flex x-justify-center x-p-16 x-title3">SUB HEADER</div>
<div class="x-layout-item border-b-1 x-border-neutral-25">
<div class="x-title3 flex justify-center p-4">SUB HEADER</div>
</div>

<div class="x-scroll">
<div class="x-layout-item x-layout-expand">
<div class="x-flex x-flex-col x-justify-between x-h-[2000px] x-p-12 x-bg-neutral-25">
<div class="x-bg-neutral-25 flex h-[2000px] flex-col justify-between p-3">
<section>MAIN</section>
<span class="x-place-self-end">MAIN BOTTOM</span>
<span class="place-self-end">MAIN BOTTOM</span>
</div>
</div>
</div>

<div class="x-layout-item x-layout-overlap">
<button class="x-justify-self-center x-self-end x-button x-mb-16">FLOATING</button>
<button class="x-button mb-4 self-end justify-self-center">FLOATING</button>
</div>

<div class="x-layout-item">
<div class="x-flex x-justify-center x-p-16 x-title3">FOOTER</div>
<div class="x-title3 flex justify-center p-4">FOOTER</div>
</div>
</div>
</div>
Expand Down
32 changes: 15 additions & 17 deletions packages/x-tailwindcss/demo/src/components/xds-layout-two-columns.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,43 +5,41 @@

<div class="modal x-bg-neutral-10">
<div :class="[cssClass, 'x-layout-min-margin-48']">
<div class="x-layout-item x-bg-neutral-0 x-border-b-1 x-border-neutral-25">
<div class="x-flex x-justify-between x-items-center x-py-8">
<div class="x-layout-item x-bg-neutral-0 border-b-1 x-border-neutral-25">
<div class="flex items-center justify-between py-2">
<span class="x-title3">TWO COLUMNS LAYOUT</span>
<label for="layout-two-columns-modal" class="x-button x-button-ghost x-ml-auto">
<label for="layout-two-columns-modal" class="x-button x-button-ghost ml-auto">
Close
</label>
</div>
</div>

<div class="x-layout-item x-border-b-1 x-border-neutral-25">
<div class="x-flex x-justify-between x-items-center x-py-16">
<div class="x-layout-item border-b-1 x-border-neutral-25">
<div class="flex items-center justify-between py-4">
<div class="x-title3">HEADER START</div>
<div class="x-title2">HEADER MIDDLE</div>
<div class="x-title3">HEADER END</div>
</div>
</div>

<div class="x-layout-item x-border-b-1 x-border-neutral-25">
<div class="x-flex x-justify-center x-p-16 x-title3">SUB HEADER</div>
<div class="x-layout-item border-b-1 x-border-neutral-25">
<div class="x-title3 flex justify-center p-4">SUB HEADER</div>
</div>

<div class="x-layout-item x-layout-no-margin-right x-layout-expand x-mt-16 x-mb-16">
<div class="x-flex x-layout-expand x-gap-24">
<div class="x-scroll x-w-128">
<div class="x-flex x-flex-col x-justify-between x-h-[2000px] x-p-12 x-bg-neutral-25">
<div class="x-layout-item x-layout-no-margin-right x-layout-expand mb-4 mt-4">
<div class="x-layout-expand flex gap-6">
<div class="x-scroll w-[128px]">
<div class="x-bg-neutral-25 flex h-[2000px] flex-col justify-between p-3">
<span>ASIDE</span>
<span class="x-place-self-end">ASIDE BOTTOM</span>
<span class="place-self-end">ASIDE BOTTOM</span>
</div>
</div>

<div class="x-scroll x-layout-expand">
<div class="x-layout-item x-layout-no-margin-left">
<div
class="x-flex x-flex-col x-justify-between x-h-[2000px] x-p-12 x-bg-neutral-25"
>
<div class="x-bg-neutral-25 flex h-[2000px] flex-col justify-between p-3">
<section>MAIN</section>
<span class="x-place-self-end">MAIN BOTTOM</span>
<span class="place-self-end">MAIN BOTTOM</span>
</div>
</div>
</div>
Expand All @@ -50,7 +48,7 @@

<div class="x-layout-item x-layout-overlap">
<button
class="x-layout-on-margin-right x-justify-self-start x-self-end x-button x-button-sm x-button-circle x-mb-16"
class="x-layout-on-margin-right x-button x-button-sm x-button-circle mb-4 self-end justify-self-start"
>
▲
</button>
Expand Down
28 changes: 14 additions & 14 deletions packages/x-tailwindcss/demo/src/components/xds-layout-utils.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,24 +8,24 @@
<input id="layout-utils-modal" type="checkbox" class="modal-toggle" />

<div class="modal x-bg-neutral-0">
<div class="x-flex x-p-16">
<div class="x-p-4 flex">
<div class="x-title2">Layout utilities</div>
<label for="layout-utils-modal" class="x-button x-button-link x-ml-auto">Close</label>
<label for="layout-utils-modal" class="x-button x-button-link ml-auto">Close</label>
</div>

<div v-for="(sectionClasses, sectionName) in modalContent" :key="sectionName">
<div class="x-title3 x-mt-32 x-pb-8 x-px-16">{{ sectionName }}</div>
<div class="x-text-md x-mb-16 x-px-16">
<div class="x-title3 mt-8 px-4 pb-2">{{ sectionName }}</div>
<div class="x-text-md mb-4 px-4">
{{ sectionDescriptions[sectionName] }}
</div>
<div v-for="cssClass in sectionClasses" :key="cssClass" class="x-flex x-flex-col x-pb-12">
<code class="x-py-8 x-px-16">{{ cssClass }}</code>
<div v-for="cssClass in sectionClasses" :key="cssClass" class="flex flex-col pb-3">
<code class="px-4 py-2">{{ cssClass }}</code>
<div
class="x-layout-container x-layout-min-margin-256 x-layout-max-width-md x-w-full x-h-[80px] x-bg-neutral-25"
class="x-layout-container x-layout-min-margin-256 x-layout-max-width-md x-bg-neutral-25 h-[80px] w-full"
>
<template v-if="sectionName === 'Overlap'">
<div v-if="cssClass.split(' ')[1] === 'x-layout-overlap'" class="x-layout-item">
<span class="x-bg-lead-25 x-p-8 x-h-[60px]">item</span>
<span class="x-bg-lead-25 h-[60px] p-2">item</span>
</div>

<div
Expand All @@ -35,19 +35,19 @@
:class="cssClass"
title="Click me to copy CSS classes"
>
<span class="x-justify-self-center x-bg-lead-50 x-p-8 x-w-[80%]">
<span class="x-bg-lead-50 w-[80%] justify-self-center p-2">
This is overlapping
</span>
</div>

<div v-if="cssClass.includes('x-layout-overlap-from-top')" class="x-layout-item">
<span class="x-bg-lead-25 x-p-8 x-h-[60px]">item</span>
<span class="x-bg-lead-25 h-[60px] p-2">item</span>
</div>
</template>

<template v-else-if="sectionName === 'On margin'">
<div class="x-layout-item">
<div v-if="cssClass === 'x-layout-on-margin-right'" class="x-bg-lead-25 x-p-8">
<div v-if="cssClass === 'x-layout-on-margin-right'" class="x-bg-lead-25 p-2">
item
</div>
<div
Expand All @@ -57,11 +57,11 @@
:class="cssClass"
title="Click me to copy CSS classes"
>
<div class="x-bg-lead-50 x-p-8">
<div class="x-bg-lead-50 p-2">
{{ cssClass }}
</div>
</div>
<div v-if="cssClass === 'x-layout-on-margin-left'" class="x-bg-lead-25 x-p-8">
<div v-if="cssClass === 'x-layout-on-margin-left'" class="x-bg-lead-25 p-2">
item
</div>
</div>
Expand All @@ -75,7 +75,7 @@
:class="cssClass"
title="Click me to copy CSS classes"
>
<span class="x-bg-lead-25 x-p-8 x-self-stretch">item</span>
<span class="x-bg-lead-25 self-stretch p-2">item</span>
</div>
</div>
</div>
Expand Down
21 changes: 9 additions & 12 deletions packages/x-tailwindcss/demo/src/components/xds-layout.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,33 +4,30 @@
<input id="layout-modal" type="checkbox" class="modal-toggle" />

<div class="modal x-bg-neutral-0">
<div class="x-flex x-p-16">
<div class="flex p-4">
<div class="x-title2">Layouts</div>
<label for="layout-modal" class="x-button x-button-link x-ml-auto">Close</label>
<label for="layout-modal" class="x-button x-button-link ml-auto">Close</label>
</div>

<div v-for="(sectionClasses, sectionName) in modalContent" :key="sectionName">
<div class="x-title3 x-mt-32 x-pb-8 x-px-16">{{ sectionName }}</div>
<div v-for="cssClass in sectionClasses" :key="cssClass" class="x-flex x-flex-col x-pb-12">
<div v-if="cssClass.includes('x-layout-min-margin-12')" class="x-text-md x-mb-16 x-px-16">
<div class="x-title3 mt-8 px-4 pb-2">{{ sectionName }}</div>
<div v-for="cssClass in sectionClasses" :key="cssClass" class="flex flex-col pb-3">
<div v-if="cssClass.includes('x-layout-min-margin-12')" class="x-text-md mb-4 px-4">
There are as many classes as spacing variables declared in the Tailwind theme:
<code>x-layout-min-margin-[spacing-value]</code>
</div>
<div
v-if="cssClass.includes('x-layout-container-mx-128')"
class="x-text-md x-mb-16 x-px-16"
>
<div v-if="cssClass.includes('x-layout-container-mx-128')" class="x-text-md mb-4 px-4">
Custom alignment is available with Tailwind spacing classes or arbitrary values:
</div>
<code class="x-py-8 x-px-16">{{ cssClass }}</code>
<code class="px-4 py-2">{{ cssClass }}</code>
<div
@click="copyCssClassesToClipboard"
@keydown="copyCssClassesToClipboard"
:class="cssClass"
title="Click me to copy CSS classes"
class="x-bg-neutral-25 x-w-full"
class="x-bg-neutral-25 w-full"
>
<div class="x-layout-item"><span class="x-bg-lead-25 x-p-8">item</span></div>
<div class="x-layout-item"><span class="x-bg-lead-25 p-2">item</span></div>
</div>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions packages/x-tailwindcss/demo/src/components/xds-progress-bar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@
:sections="sections"
#default="{ cssClass, copyCssClassesToClipboard, removeClassPrefix }"
>
<div class="x-flex x-flex-col x-gap-4">
<h3 class="x-text-sm">{{ removeClassPrefix(cssClass, base).trim() || 'default' }}</h3>
<div class="lex-col flex gap-4">
<h3 class="text-sm">{{ removeClassPrefix(cssClass, base).trim() || 'default' }}</h3>
<div
@click="copyCssClassesToClipboard"
@keyup="copyCssClassesToClipboard"
class="x-w-[320px]"
class="w-[320px]"
:class="cssClass"
>
<div class="x-progress-bar-fill x-w-[30%]" />
Expand Down
Loading

0 comments on commit 473312c

Please sign in to comment.