@fpkit/acss 0.6.2 → 1.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (109) hide show
  1. package/libs/components/alert/alert.css +1 -1
  2. package/libs/components/alert/alert.css.map +1 -1
  3. package/libs/components/alert/alert.min.css +2 -2
  4. package/libs/components/badge/badge.css +1 -1
  5. package/libs/components/badge/badge.css.map +1 -1
  6. package/libs/components/badge/badge.min.css +2 -2
  7. package/libs/components/breadcrumbs/breadcrumb.css +1 -1
  8. package/libs/components/breadcrumbs/breadcrumb.css.map +1 -1
  9. package/libs/components/breadcrumbs/breadcrumb.min.css +2 -2
  10. package/libs/components/buttons/button.css +1 -1
  11. package/libs/components/buttons/button.css.map +1 -1
  12. package/libs/components/buttons/button.min.css +2 -2
  13. package/libs/components/cards/card.css +1 -1
  14. package/libs/components/cards/card.css.map +1 -1
  15. package/libs/components/cards/card.min.css +2 -2
  16. package/libs/components/details/details.css +1 -1
  17. package/libs/components/details/details.css.map +1 -1
  18. package/libs/components/details/details.min.css +2 -2
  19. package/libs/components/dialog/dialog.css +1 -1
  20. package/libs/components/dialog/dialog.css.map +1 -1
  21. package/libs/components/dialog/dialog.min.css +2 -2
  22. package/libs/components/form/form.css +1 -1
  23. package/libs/components/form/form.css.map +1 -1
  24. package/libs/components/form/form.min.css +2 -2
  25. package/libs/components/icons/icon.d.cts +32 -32
  26. package/libs/components/icons/icon.d.ts +32 -32
  27. package/libs/components/images/img.css +1 -1
  28. package/libs/components/images/img.css.map +1 -1
  29. package/libs/components/images/img.min.css +2 -2
  30. package/libs/components/layout/landmarks.css +1 -1
  31. package/libs/components/layout/landmarks.css.map +1 -1
  32. package/libs/components/layout/landmarks.min.css +2 -2
  33. package/libs/components/link/link.css +1 -1
  34. package/libs/components/link/link.css.map +1 -1
  35. package/libs/components/link/link.min.css +2 -2
  36. package/libs/components/nav/nav.css +1 -1
  37. package/libs/components/nav/nav.css.map +1 -1
  38. package/libs/components/nav/nav.min.css +2 -2
  39. package/libs/components/progress/progress.css +1 -1
  40. package/libs/components/progress/progress.css.map +1 -1
  41. package/libs/components/progress/progress.min.css +2 -2
  42. package/libs/components/tag/tag.css +1 -1
  43. package/libs/components/tag/tag.css.map +1 -1
  44. package/libs/components/tag/tag.min.css +2 -2
  45. package/libs/index.css +1 -1
  46. package/libs/index.css.map +1 -1
  47. package/package.json +1 -1
  48. package/src/components/alert/alert.scss +4 -4
  49. package/src/components/alert/alert.scss.backup +184 -0
  50. package/src/components/alert/alert.stories.tsx +53 -2
  51. package/src/components/badge/badge.scss +2 -2
  52. package/src/components/badge/badge.scss.backup +39 -0
  53. package/src/components/badge/badge.stories.tsx +40 -0
  54. package/src/components/breadcrumbs/breadcrumb.scss +5 -5
  55. package/src/components/breadcrumbs/breadcrumb.scss.backup +35 -0
  56. package/src/components/breadcrumbs/breadcrumb.stories.tsx +17 -1
  57. package/src/components/buttons/button.scss +27 -27
  58. package/src/components/buttons/button.scss.backup +145 -0
  59. package/src/components/buttons/button.stories.tsx +188 -2
  60. package/src/components/cards/card.scss +39 -5
  61. package/src/components/cards/card.scss.backup +67 -0
  62. package/src/components/cards/card.stories.tsx +183 -0
  63. package/src/components/details/details.scss +14 -14
  64. package/src/components/details/details.scss.backup +126 -0
  65. package/src/components/details/details.stories.tsx +40 -0
  66. package/src/components/dialog/dialog.scss +3 -3
  67. package/src/components/dialog/dialog.scss.backup +126 -0
  68. package/src/components/form/form.scss +25 -9
  69. package/src/components/form/form.scss.backup +87 -0
  70. package/src/components/form/form.stories.tsx +271 -0
  71. package/src/components/form/input.stories.tsx +158 -0
  72. package/src/components/images/figure.stories.tsx +41 -1
  73. package/src/components/images/img.scss +8 -8
  74. package/src/components/images/img.scss.backup +59 -0
  75. package/src/components/layout/_header.scss +14 -14
  76. package/src/components/layout/_header.scss.backup +72 -0
  77. package/src/components/layout/landmarks.scss +7 -7
  78. package/src/components/layout/landmarks.scss.backup +51 -0
  79. package/src/components/layout/landmarks.stories.tsx +42 -0
  80. package/src/components/link/link.scss +5 -5
  81. package/src/components/link/link.scss.backup +145 -0
  82. package/src/components/link/link.stories.tsx +38 -2
  83. package/src/components/nav/nav.scss +17 -17
  84. package/src/components/nav/nav.scss.backup +123 -0
  85. package/src/components/nav/nav.stories.tsx +35 -1
  86. package/src/components/progress/progress.scss +7 -7
  87. package/src/components/progress/progress.scss.backup +70 -0
  88. package/src/components/tag/tag.scss +10 -10
  89. package/src/components/tag/tag.scss.backup +130 -0
  90. package/src/components/tag/tag.stories.tsx +23 -2
  91. package/src/styles/alert/alert.css +4 -4
  92. package/src/styles/badge/badge.css +2 -2
  93. package/src/styles/breadcrumbs/breadcrumb.css +5 -5
  94. package/src/styles/buttons/button.css +26 -27
  95. package/src/styles/buttons/button.css.map +1 -1
  96. package/src/styles/cards/card.css +35 -5
  97. package/src/styles/cards/card.css.map +1 -1
  98. package/src/styles/details/details.css +14 -14
  99. package/src/styles/dialog/dialog.css +3 -3
  100. package/src/styles/form/form.css +20 -10
  101. package/src/styles/form/form.css.map +1 -1
  102. package/src/styles/images/img.css +8 -8
  103. package/src/styles/index.css +170 -131
  104. package/src/styles/index.css.map +1 -1
  105. package/src/styles/layout/landmarks.css +21 -21
  106. package/src/styles/link/link.css +5 -5
  107. package/src/styles/nav/nav.css +17 -17
  108. package/src/styles/progress/progress.css +6 -6
  109. package/src/styles/tag/tag.css +4 -4
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