SEKAI DESIGN-SYSTEM

color: Mix 

<!-- カタログ用スタイル：カラー -->
<div class='wrap'>
    <section class='section' style='display:none'>
        <div class='color__org'>
            <div class='color__mol'>
                <div class='color__atm base'>
                    <p>base</p>
                </div>
            </div>
            <div class='color__mol info'>
                <p>Sass: $white</p>
                <p>Color: white</p>
            </div>
        </div>
    </section>

    <!-- for Mixin -->
    <section class='section mixin'>
        <div class='color__org'>
            <div class='color__mol'>
                <div class='color__atm main'>
                    <p>main</p>
                    <p>#53a6c7</p>
                </div>
            </div>
            <div class='color__mol'>
                <div class='color__atm accent'>
                    <p>accent</p>
                    <p>#cf5da0</p>
                </div>
            </div>
            <div class='color__mol'>
                <div class='color__atm ghost'>
                    <p>ghost</p>
                    <p>ghostwhite</p>
                </div>
            </div>
            <div class='color__mol'>
                <div class='color__atm grayLight'>
                    <p>grayLight</p>
                    <p>#c6cbce</p>
                </div>
            </div>
            <div class='color__mol'>
                <div class='color__atm gray'>
                    <p>gray</p>
                    <p>#6e7377</p>
                </div>
            </div>
            <div class='color__mol'>
                <div class='color__atm grayDark'>
                    <p>grayDark</p>
                    <p>#44484b</p>
                </div>
            </div>
            <div class='color__mol'>
                <div class='color__atm black'>
                    <p>black</p>
                    <p>#25303b</p>
                </div>
            </div>
            <div class='color__mol'>
                <div class='color__atm bgDark'>
                    <p>bgDark</p>
                    <p>#1e2325</p>
                </div>
            </div>
        </div>
    </section>

</div>
 
<!-- カタログ用スタイル：カラー -->
<div class='wrap'>
    <section class='section' style='display:{{display}}'>
        <div class='color__org'>
            <div class='color__mol'>
                <div class='color__atm {{className}}'>
                    <p>{{className}}</p>
                </div>
            </div>
            <div class='color__mol info'>
                <p>Sass: {{sassName}}</p>
                <p>Color: {{color}}</p>
            </div>
        </div>
    </section>

    <!-- for Mixin -->
    <section class='section mixin'>
        <div class='color__org'>
            {{#each colors}}
                <div class='color__mol'>
                    <div class='color__atm {{class}}'>
                        <p>{{class}}</p>
                        <p>{{c-name}}</p>
                    </div>
                </div>
            {{/each}}
        </div>
    </section>

</div>
 
{
  "className": "base",
  "sassName": "$white",
  "color": "white",
  "display": "none",
  "colors": [
    {
      "class": "main",
      "c-name": "#53a6c7"
    },
    {
      "class": "accent",
      "c-name": "#cf5da0"
    },
    {
      "class": "ghost",
      "c-name": "ghostwhite"
    },
    {
      "class": "grayLight",
      "c-name": "#c6cbce"
    },
    {
      "class": "gray",
      "c-name": "#6e7377"
    },
    {
      "class": "grayDark",
      "c-name": "#44484b"
    },
    {
      "class": "black",
      "c-name": "#25303b"
    },
    {
      "class": "bgDark",
      "c-name": "#1e2325"
    }
  ]
}
  • Content: 
    # Color

-   assets/css/utility/\_color.sass
  • URL: /components/raw/color/02-color.md
  • Filesystem Path: src/components/01-Token/02-color/02-color.md
  • Size: 45 Bytes

No notes defined.