Skip to content

Instantly share code, notes, and snippets.

@thisisabhinay

thisisabhinay/content-studio-colors.markdown

Created March 16, 2022 08:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save thisisabhinay/ed95bfc2f827283aa6eed5a9f9c55bb5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save thisisabhinay/ed95bfc2f827283aa6eed5a9f9c55bb5 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. thisisabhinay created this gist Mar 16, 2022.
    7 changes: 7 additions & 0 deletions content-studio-colors.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Content Studio - Colors
    -----------------------


    A [Pen](https://codepen.io/thisisabhinay/pen/OJzyPeo) by [Abhinay Thakur](https://codepen.io/thisisabhinay) on [CodePen](https://codepen.io).

    [License](https://codepen.io/license/pen/OJzyPeo).
    46 changes: 46 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,46 @@
    <div class="wrapper">
    <div class="row r1">
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    </div>
    <div class="row r2">
    <div class="d"></div>
    <div class="d"></div>
    </div>
    <div class="row r3">
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    </div>
    <div class="row r4">
    <div class="d"></div>
    <div class="d"></div>
    </div>
    <div class="row r5">
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
    </div>
    <div class="row r6">
    <div class="d"></div>
    <div class="d"></div>
    </div>
    <div class="row r7">
    <div class="d"></div>
    <div class="d"></div>
    </div>
    <div class="row r8">
    <div class="d"></div>
    <div class="d"></div>
    </div>
    <div class="row r9">
    <div class="d"></div>
    <div class="d"></div>
    </div>
    </div>
    184 changes: 184 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,184 @@
    :root {
    --color-primary-normal: #6e40ff;
    --color-primary-light: #e8e0ff;
    --color-primary-normal-alpha: rgba(110, 64, 255, 0.16);
    --color-primary-light-alpha: rgba(232, 224, 255, 0.24);
    --color-secondary-normal: #109c72;
    --color-secondary-light: #d9efe8;
    --color-dark-normal: #172b4d;
    --color-grey-4: #6b788d;
    --color-grey-3: #a2aab8;
    --color-grey-2: #dadde2;
    --color-grey-1: #edeef1;
    --color-black-deep: #0e0d0e;
    --color-black-normal: #201f20;
    --color-white: #ffffff;
    --color-white-alpha-80: rgba(255, 255, 255, 0.8);
    --color-white-alpha-60: rgba(255, 255, 255, 0.6);
    --color-white-alpha-40: rgba(255, 255, 255, 0.4);
    --color-white-off: #f8f9fa;
    --color-success-bg: #006100;
    --color-success-font: #c6efce;
    --color-danger-bg: #9c0006;
    --color-danger-font: #ffc7ce;
    --color-warning-bg: #9c5700;
    --color-warning-font: #ffeb9c;
    --color-info-bg: #001e62;
    --color-info-font: #c6caf0;
    }

    /* Ignore CSS below */
    .wrapper,
    .row {
    display: flex;
    }

    .wrapper {
    flex-direction: column;
    }

    .row {
    flex-direction: row;
    margin-bottom: 1.5rem;
    position: relative;
    }

    .row:before {
    content: "";
    margin: 0 1rem 0 0;
    transform: translatey(44%);
    width: 10rem;
    text-align: right;
    font-weight: 600;
    }

    .r1:before {
    content: "Primary";
    }

    .r2:before {
    content: "Secondary";
    }

    .r3:before {
    content: "Grayscale";
    }

    .r4:before {
    content: "Blacks";
    }

    .r5:before {
    content: "Whites";
    }

    .r6:before {
    content: "Alert/ Success";
    }

    .r7:before {
    content: "Alert/ Danger";
    }

    .r8:before {
    content: "Alert/ Warning";
    }

    .r9:before {
    content: "Alert/ Info";
    }

    .d {
    height: 100px;
    width: 100px;
    border: 2px solid #000;
    margin-right: 20px;
    border-radius: 16px;
    }

    .r1 .d:nth-child(1) {
    background: var(--color-primary-normal);
    }
    .r1 .d:nth-child(2) {
    background: var(--color-primary-light);
    }
    .r1 .d:nth-child(3) {
    background: var(--color-primary-normal-alpha);
    }
    .r1 .d:nth-child(4) {
    background: var(--color-primary-light-alpha);
    }

    .r2 .d:nth-child(1) {
    background: var(--color-secondary-normal);
    }
    .r2 .d:nth-child(2) {
    background: var(--color-secondary-light);
    }

    .r3 .d:nth-child(1) {
    background: var(--color-dark-normal);
    }
    .r3 .d:nth-child(2) {
    background: var(--color-grey-4);
    }
    .r3 .d:nth-child(3) {
    background: var(--color-grey-3);
    }
    .r3 .d:nth-child(4) {
    background: var(--color-grey-2);
    }
    .r3 .d:nth-child(5) {
    background: var(--color-grey-1);
    }

    .r4 .d:nth-child(1) {
    background: var(--color-black-deep);
    }
    .r4 .d:nth-child(2) {
    background: var(--color-black-normal);
    }

    .r5 .d:nth-child(1) {
    background: var(--color-white);
    }
    .r5 .d:nth-child(2) {
    background: var(--color-white-alpha-80);
    }
    .r5 .d:nth-child(3) {
    background: var(--color-white-alpha-60);
    }
    .r5 .d:nth-child(4) {
    background: var(--color-white-alpha-40);
    }
    .r5 .d:nth-child(5) {
    background: var(--color-white-off);
    }

    .r6 .d:nth-child(1) {
    background: var(--color-success-font);
    }
    .r6 .d:nth-child(2) {
    background: var(--color-success-bg);
    }

    .r7 .d:nth-child(1) {
    background: var(--color-danger-font);
    }
    .r7 .d:nth-child(2) {
    background: var(--color-danger-bg);
    }

    .r8 .d:nth-child(1) {
    background: var(--color-warning-font);
    }
    .r8 .d:nth-child(2) {
    background: var(--color-warning-bg);
    }

    .r9 .d:nth-child(1) {
    background: var(--color-info-font);
    }
    .r9 .d:nth-child(2) {
    background: var(--color-info-bg);
    }