<commit_before>import React from 'react';
import { FiArrowRight } from 'react-icons/fi';
import { FaSkull } from 'react-icons/fa';
import classnames from 'classnames';
import { Link } from 'react-router-dom';
import Code from '../components/Code';

const spacer = 1;
export const spacers = {
    // 0px
    0: 0,
    //  4px
    1: spacer * 0.25,
    // 8px
    2: spacer * 0.5,
    // 12px
    3: spacer * 0.75,
    // 16px
    4: spacer * 1,
    // 20px
    5: spacer * 1.25,
    // 24px
    6: spacer * 1.5,
    // 32px
    8: spacer * 2,
    // 40px
    10: spacer * 2.5,
    // 48px
    12: spacer * 3,
    // 64px
    16: spacer * 4,
    // 80px
    20: spacer * 5,
    // 96px
    24: spacer * 6,
    // 128px
    32: spacer * 8,
    // 160px
    40: spacer * 10,
    // 192px
    48: spacer * 12,
    // 224px
    56: spacer * 14,
    // 256px
    64: spacer * 16
};

export const colors = [
    ['aqua'],
    ['blue'],
    ['navy'],
    ['teal'],
    ['green'],
    ['yellow'],
    ['orange'],
    ['red'],
    ['fuchsia'],
    ['purple'],
    ['maroon'],
    ['white'],
    ['silver'],
    ['gray'],
    ['black']
];
export const brandColors = [
    ['primary', '$blue'],
    ['secondary', '$gray'],
    ['success', '$green'],
    ['danger', '$red'],
    ['warning', '$yellow'],
    ['info', '$teal'],
    ['light', ''],
    ['dark', ''],
    ['muted', '']
];
export const onDarkSolid = ['light', 'white', 'silver'];
export const onDarkOutline = ['light', 'warning', 'white', 'silver', 'yellow', 'lime'];

const ContentPage = () => {
    const root = document.querySelector(':root');
    const rootStyles = root && getComputedStyle(root);

    return (
        <>
            <section id="colors" className="mb-5">
                <h2>Colors</h2>
                <hr />

                <h3 className="mb-0">Generic Colors</h3>
                <p>
                    <small>
                        Colors from <a href="http://clrs.cc/">clrs.cc</a>
                    </small>
                </p>
                <div className="swatch-list mb-3">
                    <div className="row">
                        {colors.map(([color]) => {
                            let hex = rootStyles?.getPropertyValue(`--${color}`);
                            if (!hex) {
                                return <p> {color} not found</p>;
                            }
                            return (
                                <div key={`colors-${color}`} className="col-6 col-md-3 col-xl-2 txt-center">
                                    <div className={`bg-${color} p-4 mb-4`}>
                                        <code>${color}</code>
                                        <br />
                                        <code>{hex}</code>
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                </div>

                <h3>Brand Colors</h3>
                <div className="swatch-list">
                    <div className="row">
                        {brandColors.map(([color, name]) => {
                            let hex = rootStyles?.getPropertyValue(`--${color}`);
                            if (!hex) {
                                return <p> {color} not found</p>;
                            }
                            return (
                                <div key={`brand-${color}`} className="col-6 col-md-3 col-xl-2 txt-center">
                                    <div className={`bg-${color} p-4 mb-4`}>
                                        <code>${color}</code>
                                        <br />
                                        <code>{name || hex}</code>
                                    </div>
                                </div><commit_msg>if no hex fuond return null<commit_after>import React from 'react';
import { FiArrowRight } from 'react-icons/fi';
import { FaSkull } from 'react-icons/fa';
import classnames from 'classnames';
import { Link } from 'react-router-dom';
import Code from '../components/Code';

const spacer = 1;
export const spacers = {
    // 0px
    0: 0,
    //  4px
    1: spacer * 0.25,
    // 8px
    2: spacer * 0.5,
    // 12px
    3: spacer * 0.75,
    // 16px
    4: spacer * 1,
    // 20px
    5: spacer * 1.25,
    // 24px
    6: spacer * 1.5,
    // 32px
    8: spacer * 2,
    // 40px
    10: spacer * 2.5,
    // 48px
    12: spacer * 3,
    // 64px
    16: spacer * 4,
    // 80px
    20: spacer * 5,
    // 96px
    24: spacer * 6,
    // 128px
    32: spacer * 8,
    // 160px
    40: spacer * 10,
    // 192px
    48: spacer * 12,
    // 224px
    56: spacer * 14,
    // 256px
    64: spacer * 16
};

export const colors = [
    ['aqua'],
    ['blue'],
    ['navy'],
    ['teal'],
    ['green'],
    ['yellow'],
    ['orange'],
    ['red'],
    ['fuchsia'],
    ['purple'],
    ['maroon'],
    ['white'],
    ['silver'],
    ['gray'],
    ['black']
];
export const brandColors = [
    ['primary', '$blue'],
    ['secondary', '$gray'],
    ['success', '$green'],
    ['danger', '$red'],
    ['warning', '$yellow'],
    ['info', '$teal'],
    ['light', ''],
    ['dark', ''],
    ['muted', '']
];
export const onDarkSolid = ['light', 'white', 'silver'];
export const onDarkOutline = ['light', 'warning', 'white', 'silver', 'yellow', 'lime'];

const ContentPage = () => {
    const root = document.querySelector(':root');
    const rootStyles = root && getComputedStyle(root);

    return (
        <>
            <section id="colors" className="mb-5">
                <h2>Colors</h2>
                <hr />

                <h3 className="mb-0">Generic Colors</h3>
                <p>
                    <small>
                        Colors from <a href="http://clrs.cc/">clrs.cc</a>
                    </small>
                </p>
                <div className="swatch-list mb-3">
                    <div className="row">
                        {colors.map(([color]) => {
                            let hex = rootStyles?.getPropertyValue(`--${color}`);
                            if (!hex) {
                                return null;
                            }
                            return (
                                <div key={`colors-${color}`} className="col-6 col-md-3 col-xl-2 txt-center">
                                    <div className={`bg-${color} p-4 mb-4`}>
                                        <code>${color}</code>
                                        <br />
                                        <code>{hex}</code>
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                </div>

                <h3>Brand Colors</h3>
                <div className="swatch-list">
                    <div className="row">
                        {brandColors.map(([color, name]) => {
                            let hex = rootStyles?.getPropertyValue(`--${color}`);
                            if (!hex) {
                                return null;
                            }
                            return (
                                <div key={`brand-${color}`} className="col-6 col-md-3 col-xl-2 txt-center">
                                    <div className={`bg-${color} p-4 mb-4`}>
                                        <code>${color}</code>
                                        <br />
                                        <code>{name || hex}</code>
                                    </div>
                                </div>
{'fraction_non_alphanumeric': 0.1628452318916102, 'fraction_numerical': 0.030484627410109433, 'mean_word_length': 1.034181240063593, 'pattern_counts': {'":': 0, '<': 85, '<?xml version=': 0, '>': 91, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 28, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2933590', 'n_tokens_mistral': 2372, 'n_tokens_neox': 2131, 'n_words': 492}