Skip to content

Commit 3954892

Browse files
KocalKocal
committed
[Toolkit][WIP] Rework the documentation
1 parent 180a16d commit 3954892

File tree

90 files changed

+1332
-1386
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

90 files changed

+1332
-1386
lines changed

‎ux.symfony.com/.symfony.local.yaml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ workers:
22
docker_compose: ~
33
sass:
44
cmd: ['symfony', 'console', 'sass:build', '--watch']
5+
tailwind:
6+
cmd: ['symfony', 'console', 'tailwind:build', '--watch']
57

68
http:
79
use_gzip: true

‎ux.symfony.com/assets/controllers/tabs-controller.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import {Controller} from '@hotwired/stimulus';
2-
import {getComponent} from '@symfony/ux-live-component';
1+
import { Controller } from '@hotwired/stimulus';
2+
import { getComponent } from '@symfony/ux-live-component';
33

44
export default class extends Controller {
55
static targets = ["tab", "control"]
6-
static values = {tab: String}
7-
static classes = [ "active" ]
6+
static values = { tab: String }
7+
static classes = ["active"]
88

99
initialize() {
1010
this.showTab(this.tabValue);
1111
}
1212

13-
show({ params: { tab }}) {
13+
show({ params: { tab } }) {
1414
this.tabValue = tab;
1515
}
1616

@@ -20,6 +20,7 @@ export default class extends Controller {
2020

2121
const controlTarget = this.getControlTarget(tab);
2222
controlTarget.classList.add(this.activeClass);
23+
controlTarget.setAttribute("aria-selected", "true");
2324
}
2425

2526
hideTab(tab) {
@@ -28,6 +29,7 @@ export default class extends Controller {
2829

2930
const controlTarget = this.getControlTarget(tab);
3031
controlTarget.classList.remove(this.activeClass);
32+
controlTarget.setAttribute("aria-selected", "false");
3133
}
3234

3335
tabValueChanged(value, previousValue) {

‎ux.symfony.com/assets/icons/simple-icons/shadcnui.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎ux.symfony.com/assets/styles/app.scss‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ $utilities: map-remove(
7575
// @import "../../vendor/twbs/bootstrap/scss/navbar";
7676
@import "../../vendor/twbs/bootstrap/scss/card";
7777
// @import "../../vendor/twbs/bootstrap/scss/accordion";
78-
// @import "../../vendor/twbs/bootstrap/scss/breadcrumb";
78+
@import "../../vendor/twbs/bootstrap/scss/breadcrumb";
7979
// @import "../../vendor/twbs/bootstrap/scss/pagination";
8080
// @import "../../vendor/twbs/bootstrap/scss/badge";
8181
@import "../../vendor/twbs/bootstrap/scss/alert";
@@ -128,6 +128,7 @@ $utilities: map-remove(
128128
@import "components/Button";
129129
@import "components/Browser";
130130
@import "components/Changelog";
131+
@import "components/CodePreview_Tabs";
131132
@import "components/DataList";
132133
@import "components/DemoContainer";
133134
@import "components/DemoCard";
@@ -144,15 +145,18 @@ $utilities: map-remove(
144145
@import "components/PackageHeader";
145146
@import "components/PackageBox";
146147
@import "components/PackageList";
148+
@import "components/SidebarNav";
147149
@import "components/Cookbook";
148150
@import "components/SupportBox";
149151
@import "components/Tabs";
150152
@import "components/Tag";
151153
@import "components/Terminal";
152154
@import "components/TerminalCommand";
153155
@import "components/ThemeSwitcher";
156+
@import "components/Wysiwyg";
154157

155158
// Utilities
159+
@import "utilities/animation";
156160
@import "utilities/arrow";
157161
@import "utilities/background";
158162
@import "utilities/info-tooltips";
@@ -176,4 +180,3 @@ $utilities: map-remove(
176180
.code-description a {
177181
text-decoration: underline;
178182
}
179-

‎ux.symfony.com/assets/styles/components/_CodePreview_Tabs.scss‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
.CodePreview_Tabs {
2+
}
3+
4+
.CodePreview_TabHead {
5+
display: flex;
6+
flex-direction: row;
7+
margin-bottom: 1rem
8+
}
9+
10+
.CodePreview_TabControl {
11+
border-bottom: 3px solid transparent;
12+
color: var(--bs-primary-color);
13+
padding: 0 1rem;
14+
font-size: .9rem;
15+
line-height: 2;
16+
font-stretch: semi-condensed;
17+
transition: border-color 150ms ease-in-out;
18+
margin-bottom: -1px;
19+
}
20+
21+
.CodePreview_TabControl.active {
22+
border-color: var(--bs-secondary-color);
23+
}
24+
25+
.CodePreview_TabPanel {
26+
position: relative;
27+
}
28+
29+
.CodePreview_TabPanel:not(.active) {
30+
display: none;
31+
}
32+
33+
.CodePreview_TabPanel:has(.CodePreview_Preview) {
34+
border: 1px solid var(--bs-border-color);
35+
border-radius: .75rem
36+
}
37+
38+
.CodePreview_Loader {
39+
width: 100%;
40+
display: flex;
41+
justify-content: center;
42+
align-items: center;
43+
gap: .2rem;
44+
position: absolute;
45+
46+
svg {
47+
animation: rotating 1s linear infinite;
48+
}
49+
}
50+
51+
.CodePreview_Preview {
52+
width: 100%;
53+
transition: opacity .250s linear;
54+
border-radius: .75rem;
55+
opacity: 1;
56+
57+
&.loading {
58+
opacity: 0;
59+
}
60+
}

‎ux.symfony.com/assets/styles/components/_SidebarNav.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.SidebarNav {}
2+
3+
.SidebarNav_Heading {
4+
font-weight: 600;
5+
padding: 0 .5rem;
6+
}
7+
8+
.SidebarNav_Item {
9+
border-radius: .5rem;
10+
transition: background-color 100ms ease-in-out;
11+
}
12+
.SidebarNav_Item.active,
13+
.SidebarNav_Item:hover {
14+
background-color: var(--bs-secondary-bg);
15+
}
16+
17+
18+
.SidebarNav_Link {
19+
display: block;
20+
font-size: .9rem;
21+
padding: .1rem .5rem;
22+
}

‎ux.symfony.com/assets/styles/components/_Wysiwyg.scss‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.Wysiwyg {
2+
h1 {
3+
font-family: var(--font-family-title);
4+
font-size: 2.6rem;
5+
font-weight: 700;
6+
margin-bottom: 1rem;
7+
}
8+
9+
h2 {
10+
font-family: var(--font-family-title);
11+
font-size: 2rem;
12+
font-weight: 700;
13+
margin-bottom: 0.5rem;
14+
margin-top: 2rem;
15+
}
16+
17+
h3 {
18+
font-family: var(--font-family-title);
19+
font-size: 1.5rem;
20+
font-weight: 700;
21+
margin-bottom: 0.5rem;
22+
margin-top: 1.5rem;
23+
}
24+
25+
a {
26+
color: var(--bs-link-color);
27+
text-decoration: underline;
28+
}
29+
}

‎ux.symfony.com/assets/styles/toolkit-shadcn.css‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
@import "tailwindcss";
2+
@source "../../vendor/symfony/ux-toolkit/kits";
3+
4+
@custom-variant dark (&:is(.dark *));
5+
6+
:root {
7+
--background: oklch(1 0 0);
8+
--foreground: oklch(0.145 0 0);
9+
--card: oklch(1 0 0);
10+
--card-foreground: oklch(0.145 0 0);
11+
--popover: oklch(1 0 0);
12+
--popover-foreground: oklch(0.145 0 0);
13+
--primary: oklch(0.205 0 0);
14+
--primary-foreground: oklch(0.985 0 0);
15+
--secondary: oklch(0.97 0 0);
16+
--secondary-foreground: oklch(0.205 0 0);
17+
--muted: oklch(0.97 0 0);
18+
--muted-foreground: oklch(0.556 0 0);
19+
--accent: oklch(0.97 0 0);
20+
--accent-foreground: oklch(0.205 0 0);
21+
--destructive: oklch(0.577 0.245 27.325);
22+
--destructive-foreground: oklch(0.98 0 0);
23+
--border: oklch(0.922 0 0);
24+
--input: oklch(0.922 0 0);
25+
--ring: oklch(0.708 0 0);
26+
--chart-1: oklch(0.646 0.222 41.116);
27+
--chart-2: oklch(0.6 0.118 184.704);
28+
--chart-3: oklch(0.398 0.07 227.392);
29+
--chart-4: oklch(0.828 0.189 84.429);
30+
--chart-5: oklch(0.769 0.188 70.08);
31+
--radius: 0.625rem;
32+
--sidebar: oklch(0.985 0 0);
33+
--sidebar-foreground: oklch(0.145 0 0);
34+
--sidebar-primary: oklch(0.205 0 0);
35+
--sidebar-primary-foreground: oklch(0.985 0 0);
36+
--sidebar-accent: oklch(0.97 0 0);
37+
--sidebar-accent-foreground: oklch(0.205 0 0);
38+
--sidebar-border: oklch(0.922 0 0);
39+
--sidebar-ring: oklch(0.708 0 0);
40+
}
41+
42+
.dark {
43+
--background: oklch(0.145 0 0);
44+
--foreground: oklch(0.985 0 0);
45+
--card: oklch(0.145 0 0);
46+
--card-foreground: oklch(0.985 0 0);
47+
--popover: oklch(0.145 0 0);
48+
--popover-foreground: oklch(0.985 0 0);
49+
--primary: oklch(0.985 0 0);
50+
--primary-foreground: oklch(0.205 0 0);
51+
--secondary: oklch(0.269 0 0);
52+
--secondary-foreground: oklch(0.985 0 0);
53+
--muted: oklch(0.269 0 0);
54+
--muted-foreground: oklch(0.708 0 0);
55+
--accent: oklch(0.269 0 0);
56+
--accent-foreground: oklch(0.985 0 0);
57+
--destructive: oklch(0.396 0.141 25.723);
58+
--destructive-foreground: oklch(0.637 0.237 25.331);
59+
--border: oklch(0.269 0 0);
60+
--input: oklch(0.269 0 0);
61+
--ring: oklch(0.439 0 0);
62+
--chart-1: oklch(0.488 0.243 264.376);
63+
--chart-2: oklch(0.696 0.17 162.48);
64+
--chart-3: oklch(0.769 0.188 70.08);
65+
--chart-4: oklch(0.627 0.265 303.9);
66+
--chart-5: oklch(0.645 0.246 16.439);
67+
--sidebar: oklch(0.205 0 0);
68+
--sidebar-foreground: oklch(0.985 0 0);
69+
--sidebar-primary: oklch(0.488 0.243 264.376);
70+
--sidebar-primary-foreground: oklch(0.985 0 0);
71+
--sidebar-accent: oklch(0.269 0 0);
72+
--sidebar-accent-foreground: oklch(0.985 0 0);
73+
--sidebar-border: oklch(0.269 0 0);
74+
--sidebar-ring: oklch(0.439 0 0);
75+
}
76+
77+
@theme inline {
78+
--color-background: var(--background);
79+
--color-foreground: var(--foreground);
80+
--color-card: var(--card);
81+
--color-card-foreground: var(--card-foreground);
82+
--color-popover: var(--popover);
83+
--color-popover-foreground: var(--popover-foreground);
84+
--color-primary: var(--primary);
85+
--color-primary-foreground: var(--primary-foreground);
86+
--color-secondary: var(--secondary);
87+
--color-secondary-foreground: var(--secondary-foreground);
88+
--color-muted: var(--muted);
89+
--color-muted-foreground: var(--muted-foreground);
90+
--color-accent: var(--accent);
91+
--color-accent-foreground: var(--accent-foreground);
92+
--color-destructive: var(--destructive);
93+
--color-destructive-foreground: var(--destructive-foreground);
94+
--color-border: var(--border);
95+
--color-input: var(--input);
96+
--color-ring: var(--ring);
97+
--color-chart-1: var(--chart-1);
98+
--color-chart-2: var(--chart-2);
99+
--color-chart-3: var(--chart-3);
100+
--color-chart-4: var(--chart-4);
101+
--color-chart-5: var(--chart-5);
102+
--radius-sm: calc(var(--radius) - 4px);
103+
--radius-md: calc(var(--radius) - 2px);
104+
--radius-lg: var(--radius);
105+
--radius-xl: calc(var(--radius) + 4px);
106+
--color-sidebar: var(--sidebar);
107+
--color-sidebar-foreground: var(--sidebar-foreground);
108+
--color-sidebar-primary: var(--sidebar-primary);
109+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
110+
--color-sidebar-accent: var(--sidebar-accent);
111+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
112+
--color-sidebar-border: var(--sidebar-border);
113+
--color-sidebar-ring: var(--sidebar-ring);
114+
}
115+
116+
@layer base {
117+
* {
118+
border-color: var(--border);
119+
outline-color: var(--ring);
120+
}
121+
122+
body {
123+
background-color: var(--background);
124+
color: var(--foreground);
125+
}
126+
}

‎ux.symfony.com/assets/styles/utilities/_animation.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@keyframes rotating {
2+
from {
3+
transform: rotate(0deg);
4+
}
5+
to {
6+
transform: rotate(360deg);
7+
}
8+
}

‎ux.symfony.com/assets/styles/utilities/_shadow.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,13 @@
99
border-radius: 3rem;
1010
bottom: var(--shadow-bottom, 0);
1111
filter: blur(3rem);
12+
opacity: var(--opacity, 1);
1213
}
1314
}
1415
.shadow-blur--rainbow {
1516
--gradient: linear-gradient(113.84deg, #D65831 0%, #D2D631 36.52%, #31D673 71.83%, #3aa3ff 100%)
1617
}
18+
19+
.shadow-blur--opacity-20 {
20+
--opacity: 0.2;
21+
}

0 commit comments

Comments
 (0)