Merge pull request #82 from mflocss/feat/simplify-color-tokens

refactor: Tokens カラー定義を使用状況に合わせて簡素化

Author: shunei-web

.stylelintrc.json

@@ -4,6 +4,7 @@
     "selector-class-pattern": null,
     "custom-property-pattern": "^([a-z][a-z0-9]*(-[a-z0-9]+)*|_[a-z0-9]+(-[a-z0-9]+)*)$",
     "at-rule-no-unknown": [true, { "ignoreAtRules": ["layer"] }],
+    "block-no-empty": [true, { "severity": "warning" }],
     "import-notation": "string",
     "property-no-vendor-prefix": [true, { "ignoreProperties": ["text-size-adjust", "-webkit-text-size-adjust", "-webkit-tap-highlight-color"] }]
   }

src/css/component/c-table.css

@@ -19,6 +19,7 @@
 :where(h1, h2, h3, h4, h5, h6) {
   font-weight: var(--font-weight-bold);
   line-height: var(--line-height-heading);
+  color: var(--color-heading);
 }
 
 :where(a) {

src/css/foundation/base.css

@@ -1,3 +1,7 @@
+.p-contact {}
+.p-contact__inner {}
+.p-contact__heading {}
+
 .p-contact__lead {
   text-align: center;
   margin-block-start: 1rem;

src/css/project/p-contact.css

@@ -3,6 +3,9 @@
   background-color: var(--color-bg-secondary);
 }
 
+.p-cta__inner {}
+.p-cta__heading {}
+
 .p-cta__text {
   margin-block-start: 1rem;
   color: var(--color-text-light);
@@ -12,3 +15,5 @@
 .p-cta__action {
   margin-block-start: 2rem;
 }
+
+.p-cta__button {}

src/css/project/p-cta.css

@@ -1,5 +1,11 @@
+.p-faq {}
+.p-faq__inner {}
+.p-faq__heading {}
+
 .p-faq__list {
   max-inline-size: 48rem;
   margin-block-start: 2.5rem;
   margin-inline: auto;
 }
+
+.p-faq__accordion {}

src/css/project/p-faq.css

@@ -1,3 +1,7 @@
+.p-features {}
+.p-features__inner {}
+.p-features__heading {}
+
 .p-features__grid {
   display: grid;
   gap: 2rem;
@@ -8,6 +12,11 @@
   }
 }
 
+.p-features__grid-item {}
+.p-features__card {}
+.p-features__card-image {}
+.p-features__badge {}
+
 .p-features__card-icon {
   font-size: 2.5rem;
   line-height: 1;

src/css/project/p-features.css

@@ -11,6 +11,8 @@
   padding-inline: var(--content-padding-inline);
 }
 
+.p-footer__nav-group {}
+
 .p-footer__nav-heading {
   font-size: 0.875rem;
   font-weight: var(--font-weight-bold);

src/css/project/p-footer.css

@@ -6,6 +6,8 @@
   background: radial-gradient(ellipse at 50% 0%, oklch(from var(--color-main) l c h / 6%) 0%, transparent 70%);
 }
 
+.p-hero__inner {}
+
 .p-hero__title {
   --_font-size-min: 28;
   --_font-size-max: 48;
@@ -21,8 +23,8 @@
   &::after {
     content: '';
     display: block;
-    inline-size: 3rem;
     block-size: 3px;
+    inline-size: 3rem;
     margin-block-start: 1rem;
     margin-inline: auto;
     background: linear-gradient(in oklab, var(--color-main), var(--color-accent));
@@ -40,21 +42,22 @@
     calc((var(--_font-size-max) - var(--_font-size-min)) / var(--vp-range) * var(--vp-offset) + var(--_font-size-min) * var(--px)),
     calc(var(--_font-size-max) * var(--px))
   );
-  color: var(--color-text-light);
   line-height: var(--line-height-base);
+  color: var(--color-text-light);
 }
 
 .p-hero__actions {
   display: flex;
   flex-wrap: wrap;
-  gap: 1rem;
   justify-content: center;
+  gap: 1rem;
   margin-block-start: 2.5rem;
 }
 
+.p-hero__cta {}
+
 .p-hero__image {
   display: block;
-  inline-size: 100%;
   max-inline-size: 800px;
   block-size: auto;
   margin-block-start: 3rem;

src/css/project/p-hero.css

@@ -2,6 +2,9 @@
   background-color: var(--color-bg-secondary);
 }
 
+.p-numbers__inner {}
+.p-numbers__heading {}
+
 .p-numbers__grid {
   display: grid;
   gap: 2rem;
@@ -13,6 +16,8 @@
   }
 }
 
+.p-numbers__item {}
+
 .p-numbers__value {
   --_font-size-min: 36;
   --_font-size-max: 56;