@fpkit/acss 0.6.2 → 1.0.0

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 (131) hide show
  1. package/README.md +32 -0
  2. package/docs/README.md +325 -0
  3. package/docs/guides/accessibility.md +764 -0
  4. package/docs/guides/architecture.md +705 -0
  5. package/docs/guides/composition.md +688 -0
  6. package/docs/guides/css-variables.md +522 -0
  7. package/docs/guides/storybook.md +828 -0
  8. package/docs/guides/testing.md +817 -0
  9. package/docs/testing/focus-indicator-testing.md +437 -0
  10. package/libs/components/alert/alert.css +1 -1
  11. package/libs/components/alert/alert.css.map +1 -1
  12. package/libs/components/alert/alert.min.css +2 -2
  13. package/libs/components/badge/badge.css +1 -1
  14. package/libs/components/badge/badge.css.map +1 -1
  15. package/libs/components/badge/badge.min.css +2 -2
  16. package/libs/components/breadcrumbs/breadcrumb.css +1 -1
  17. package/libs/components/breadcrumbs/breadcrumb.css.map +1 -1
  18. package/libs/components/breadcrumbs/breadcrumb.min.css +2 -2
  19. package/libs/components/buttons/button.css +1 -1
  20. package/libs/components/buttons/button.css.map +1 -1
  21. package/libs/components/buttons/button.min.css +2 -2
  22. package/libs/components/cards/card.css +1 -1
  23. package/libs/components/cards/card.css.map +1 -1
  24. package/libs/components/cards/card.min.css +2 -2
  25. package/libs/components/details/details.css +1 -1
  26. package/libs/components/details/details.css.map +1 -1
  27. package/libs/components/details/details.min.css +2 -2
  28. package/libs/components/dialog/dialog.css +1 -1
  29. package/libs/components/dialog/dialog.css.map +1 -1
  30. package/libs/components/dialog/dialog.min.css +2 -2
  31. package/libs/components/form/form.css +1 -1
  32. package/libs/components/form/form.css.map +1 -1
  33. package/libs/components/form/form.min.css +2 -2
  34. package/libs/components/images/img.css +1 -1
  35. package/libs/components/images/img.css.map +1 -1
  36. package/libs/components/images/img.min.css +2 -2
  37. package/libs/components/layout/landmarks.css +1 -1
  38. package/libs/components/layout/landmarks.css.map +1 -1
  39. package/libs/components/layout/landmarks.min.css +2 -2
  40. package/libs/components/link/link.css +1 -1
  41. package/libs/components/link/link.css.map +1 -1
  42. package/libs/components/link/link.min.css +2 -2
  43. package/libs/components/list/list.css +1 -1
  44. package/libs/components/list/list.min.css +1 -1
  45. package/libs/components/nav/nav.css +1 -1
  46. package/libs/components/nav/nav.css.map +1 -1
  47. package/libs/components/nav/nav.min.css +2 -2
  48. package/libs/components/progress/progress.css +1 -1
  49. package/libs/components/progress/progress.css.map +1 -1
  50. package/libs/components/progress/progress.min.css +2 -2
  51. package/libs/components/tag/tag.css +1 -1
  52. package/libs/components/tag/tag.css.map +1 -1
  53. package/libs/components/tag/tag.min.css +2 -2
  54. package/libs/index.css +1 -1
  55. package/libs/index.css.map +1 -1
  56. package/package.json +4 -3
  57. package/src/components/README.mdx +1 -1
  58. package/src/components/alert/alert.scss +4 -4
  59. package/src/components/alert/alert.scss.backup +184 -0
  60. package/src/components/alert/alert.stories.tsx +53 -2
  61. package/src/components/badge/badge.scss +2 -2
  62. package/src/components/badge/badge.scss.backup +39 -0
  63. package/src/components/badge/badge.stories.tsx +40 -0
  64. package/src/components/breadcrumbs/breadcrumb.scss +5 -5
  65. package/src/components/breadcrumbs/breadcrumb.scss.backup +35 -0
  66. package/src/components/breadcrumbs/breadcrumb.stories.tsx +17 -1
  67. package/src/components/buttons/button.scss +32 -27
  68. package/src/components/buttons/button.scss.backup +145 -0
  69. package/src/components/buttons/button.stories.tsx +196 -7
  70. package/src/components/cards/card.scss +39 -5
  71. package/src/components/cards/card.scss.backup +67 -0
  72. package/src/components/cards/card.stories.tsx +184 -1
  73. package/src/components/details/details.scss +14 -14
  74. package/src/components/details/details.scss.backup +126 -0
  75. package/src/components/details/details.stories.tsx +41 -1
  76. package/src/components/dialog/dialog.scss +3 -3
  77. package/src/components/dialog/dialog.scss.backup +126 -0
  78. package/src/components/form/form.scss +25 -9
  79. package/src/components/form/form.scss.backup +87 -0
  80. package/src/components/form/form.stories.tsx +272 -1
  81. package/src/components/form/input.stories.tsx +159 -1
  82. package/src/components/form/select.stories.tsx +1 -1
  83. package/src/components/heading/README.mdx +292 -0
  84. package/src/components/icons/icon.stories.tsx +1 -1
  85. package/src/components/images/figure.stories.tsx +41 -1
  86. package/src/components/images/img.scss +8 -8
  87. package/src/components/images/img.scss.backup +59 -0
  88. package/src/components/layout/_header.scss +14 -14
  89. package/src/components/layout/_header.scss.backup +72 -0
  90. package/src/components/layout/landmarks.scss +7 -7
  91. package/src/components/layout/landmarks.scss.backup +51 -0
  92. package/src/components/layout/landmarks.stories.tsx +42 -0
  93. package/src/components/link/link.scss +5 -5
  94. package/src/components/link/link.scss.backup +145 -0
  95. package/src/components/link/link.stories.tsx +38 -2
  96. package/src/components/list/list.scss +1 -1
  97. package/src/components/nav/nav.scss +17 -17
  98. package/src/components/nav/nav.scss.backup +123 -0
  99. package/src/components/nav/nav.stories.tsx +36 -2
  100. package/src/components/progress/progress.scss +7 -7
  101. package/src/components/progress/progress.scss.backup +70 -0
  102. package/src/components/tag/tag.scss +10 -10
  103. package/src/components/tag/tag.scss.backup +130 -0
  104. package/src/components/tag/tag.stories.tsx +23 -2
  105. package/src/components/ui.stories.tsx +53 -19
  106. package/src/docs/accessibility.mdx +484 -0
  107. package/src/docs/composition.mdx +549 -0
  108. package/src/docs/css-variables.mdx +380 -0
  109. package/src/docs/fpkit-developer.mdx +545 -0
  110. package/src/introduction.mdx +356 -0
  111. package/src/styles/alert/alert.css +4 -4
  112. package/src/styles/badge/badge.css +2 -2
  113. package/src/styles/breadcrumbs/breadcrumb.css +5 -5
  114. package/src/styles/buttons/button.css +30 -27
  115. package/src/styles/buttons/button.css.map +1 -1
  116. package/src/styles/cards/card.css +35 -5
  117. package/src/styles/cards/card.css.map +1 -1
  118. package/src/styles/details/details.css +14 -14
  119. package/src/styles/dialog/dialog.css +3 -3
  120. package/src/styles/form/form.css +20 -10
  121. package/src/styles/form/form.css.map +1 -1
  122. package/src/styles/images/img.css +8 -8
  123. package/src/styles/index.css +179 -134
  124. package/src/styles/index.css.map +1 -1
  125. package/src/styles/layout/landmarks.css +21 -21
  126. package/src/styles/link/link.css +5 -5
  127. package/src/styles/list/list.css +1 -1
  128. package/src/styles/nav/nav.css +17 -17
  129. package/src/styles/progress/progress.css +6 -6
  130. package/src/styles/tag/tag.css +4 -4
  131. package/src/styles/utilities/_disabled.scss +5 -4
package/src/styles/dialog/dialog.css CHANGED
@@ -1,5 +1,5 @@
1
1
  :root {
2
- --dialog-min-w: max(20rem, 80%);
2
+ --dialog-min-width: max(20rem, 80%);
3
3
  --dialog-gap: 0.625rem;
4
4
  --dialog-border-color: lightgray;
5
5
  --dialog-border-width: thin;
@@ -31,8 +31,8 @@
31
31
  }
32
32
  }
33
33
  dialog {
34
- width: var(--dialog-min-w);
35
- min-width: var(--min-w);
34
+ width: var(--dialog-min-width);
35
+ min-width: var(--dialog-min-width);
36
36
  gap: var(--dialog-gap);
37
37
  border: var(--dialog-border-color) var(--dialog-border-width) solid;
38
38
  border-radius: var(--dialog-border-radius);
package/src/styles/form/form.css CHANGED
@@ -4,11 +4,16 @@
4
4
  --input-bg: inherit;
5
5
  --input-border: none;
6
6
  --input-outline: thin solid var(--input-border-color);
7
- --input-px: 0.6rem;
8
- --input-py: 0.4rem;
7
+ --input-padding-inline: 0.6rem;
8
+ --input-padding-block: 0.4rem;
9
9
  --input-radius: --var(--radius);
10
10
  --input-fs: var(--fs);
11
- --input-w: clamp(200px, 100%, 500px);
11
+ --input-width: clamp(200px, 100%, 500px);
12
+ --input-focus-outline: medium solid var(--input-border-color);
13
+ --input-focus-outline-offset: 0;
14
+ --input-disabled-bg: #f5f5f5;
15
+ --input-disabled-opacity: 0.6;
16
+ --input-disabled-cursor: not-allowed;
12
17
  --placeholder-color: gray;
13
18
  --placeholder-style: italic;
14
19
  --placeholder-fs: smaller;
@@ -36,11 +41,11 @@ select {
36
41
  -webkit-appearance: var(--input-appearance);
37
42
  -moz-appearance: var(--input-appearance);
38
43
  appearance: var(--input-appearance);
39
- width: var(--input-w);
44
+ width: var(--input-width);
40
45
  border: var(--input-border);
41
46
  outline: var(--input-outline);
42
- padding-inline: var(--input-px);
43
- padding-block: var(--input-py);
47
+ padding-inline: var(--input-padding-inline);
48
+ padding-block: var(--input-padding-block);
44
49
  border-radius: var(--input-radius);
45
50
  background-color: var(--input-bg, #fff);
46
51
  }
@@ -57,7 +62,8 @@ textarea:focus-visible,
57
62
  textarea:focus,
58
63
  select:focus-visible,
59
64
  select:focus {
60
- outline-width: medium;
65
+ outline: var(--input-focus-outline);
66
+ outline-offset: var(--input-focus-outline-offset);
61
67
  }
62
68
  input[type]:not([type=checkbox], [type=radio])[aria-required=true]::placeholder,
63
69
  textarea[aria-required=true]::placeholder,
@@ -70,11 +76,15 @@ textarea[aria-required=true]::placeholder::after,
70
76
  select[aria-required=true]::placeholder::after {
71
77
  content: "* ";
72
78
  }
73
- input[type]:not([type=checkbox], [type=radio])[aria-disabled=true],
79
+ input[type]:not([type=checkbox], [type=radio])[aria-disabled=true], input[type]:not([type=checkbox], [type=radio]):disabled,
74
80
  textarea[aria-disabled=true],
75
- select[aria-disabled=true] {
81
+ textarea:disabled,
82
+ select[aria-disabled=true],
83
+ select:disabled {
76
84
  --input-border-color: lightgray;
77
- cursor: not-allowed;
85
+ background-color: var(--input-disabled-bg);
86
+ opacity: var(--input-disabled-opacity);
87
+ cursor: var(--input-disabled-cursor);
78
88
  text-transform: capitalize;
79
89
  text-decoration: line-through;
80
90
  }
package/src/styles/form/form.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../components/form/form.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AAGF;EACE;;;AAIJ;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACE;EACA;EACA;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;EACE;;AAKA;AAAA;AAAA;EACE;EACA;;AACA;AAAA;AAAA;EACE;;AAKN;AAAA;AAAA;EACE;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"form.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../components/form/form.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EAEA;EACA;;;AAGF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AAGF;EACE;;;AAIJ;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACE;EACA;EACA;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;EACE;EACA;;AAKA;AAAA;AAAA;EACE;EACA;;AACA;AAAA;AAAA;EACE;;AAKN;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"form.css"}
package/src/styles/images/img.css CHANGED
@@ -33,21 +33,21 @@ img[alt] {
33
33
 
34
34
  figure:has(img[alt]) {
35
35
  --fig-display: flex;
36
- --fig-p: 0.5rem;
36
+ --fig-padding: 0.5rem;
37
37
  --fig-bg: rgba(245, 245, 245, 0.683);
38
- --fig-w: fit-content;
38
+ --fig-width: fit-content;
39
39
  display: var(--fig-display);
40
40
  position: relative;
41
- padding: var(--fig-p);
41
+ padding: var(--fig-padding);
42
42
  background-color: var(--fig-bg);
43
- max-width: var(--fig-w);
43
+ max-width: var(--fig-width);
44
44
  }
45
45
  figure:has(img[alt]) > figcaption {
46
46
  position: absolute;
47
- bottom: var(--fig-bottom, var(--fig-p));
48
- left: var(--fig-left, var(--fig-p));
49
- right: var(--fig-right, var(--fig-p));
50
- padding: var(--caption-p, var(--spc-3));
47
+ bottom: var(--fig-bottom, var(--fig-padding));
48
+ left: var(--fig-left, var(--fig-padding));
49
+ right: var(--fig-right, var(--fig-padding));
50
+ padding: var(--caption-padding, var(--spc-3));
51
51
  background-color: var(--fig-bg);
52
52
  }
53
53