brut 0.0.20 → 0.0.22

data/brut-css/src/css/properties/colors.css

@@ -0,0 +1,455 @@
+/*
+ * Color palette.  Brut provides six colors plus gray at nine shades each.  There are also two shades each of black and
+ * white.  
+ *
+ * Colors are available as `--color-XXX` where `XXX` is a value from darkest to 900, with 100 being the darkest and lightest being the
+ * lightest.  As there are nine shades in each color's scale, that means the values are 100, 200, 300, 400, 500, 600,
+ * 700, 800, 900.
+ *
+ * For black and white, there is {--black} or {--white} which is designed to be pure black or white, respectively, and then
+ * {--black-ish} and {--white-ish}, which are designed to be a touch lighter or darker, respectively.
+ *
+ * To use your own colors, the simplest thing to do is override these variables.  This works well if you are satisfied with
+ * six total colors plus gray and nine shades of each. If not, you will need to define new variables and then declare
+ * the requisite classes.
+ *
+ * @category colors
+ */
+
+/* Blues
+ * @scale blue 
+ */
+/* The darkest shade of blue */
+@property --blue-100 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #000E1C;
+}
+/* The second darkest shade of blue */
+@property --blue-200 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #00172F;
+}
+/* The third darkest shade of blue */
+@property --blue-300 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #002E5E;
+}
+/* The shade just darker than middle of blue */
+@property --blue-400 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #004E9E;
+}
+/* The middle shade of blue */
+@property --blue-500 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #0069d5;
+}
+/* The shade just lighter than middle of blue */
+@property --blue-600 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #50A6FF;
+}
+/* The third lightest shade of blue */
+@property --blue-700 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #A9D3FF;
+}
+/* The second lightest shade of blue */
+@property --blue-800 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #E4F1FF;
+}
+/* The lightest shade of blue */
+@property --blue-900 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #F9FCFF;
+}
+
+/* Grays
+ * @scale gray 
+ */
+/* The darkest shade of gray */
+@property --gray-100 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #0F0F10;
+}
+/* The second darkest shade of gray */
+@property --gray-200 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #1A1A1B;
+}
+/* The third darkest shade of gray */
+@property --gray-300 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #333336;
+}
+/* The shade just darker than middle of gray */
+@property --gray-400 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #56565B;
+}
+/* The middle shade of gray */
+@property --gray-500 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #74747B;
+}
+/* The shade just lighter than middle of gray */
+@property --gray-600 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #ADADB1;
+}
+/* The third lightest shade of gray */
+@property --gray-700 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #D7D7D9;
+}
+/* The second lightest shade of gray */
+@property --gray-800 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #F2F2F3;
+}
+/* The lightest shade of gray */
+@property --gray-900 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #FCFCFC;
+}
+
+/* Greens
+ * @scale green 
+ */
+/* The darkest shade of green */
+@property --green-100 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #071B0E;
+}
+/* The second darkest shade of green */
+@property --green-200 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #0C2D17;
+}
+/* The third darkest shade of green */
+@property --green-300 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #175A2E;
+}
+/* The shade just darker than middle of green */
+@property --green-400 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #27984D;
+}
+/* The middle shade of green */
+@property --green-500 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #37CB69;
+}
+/* The shade just lighter than middle of green */
+@property --green-600 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #89E0A6;
+}
+/* The third lightest shade of green */
+@property --green-700 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #C5F0D4;
+}
+/* The second lightest shade of green */
+@property --green-800 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #EDFAF2;
+}
+/* The lightest shade of green */
+@property --green-900 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #FBFEFC;
+}
+
+/* Oranges
+ * @scale orange 
+ */
+/* The darkest shade of orange */
+@property --orange-100 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #1E0E00;
+}
+/* The second darkest shade of orange */
+@property --orange-200 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #331800;
+}
+/* The third darkest shade of orange */
+@property --orange-300 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #673000;
+}
+/* The shade just darker than middle of orange */
+@property --orange-400 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #AD5000;
+}
+/* The middle shade of orange */
+@property --orange-500 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #EA6C00;
+}
+/* The shade just lighter than middle of orange */
+@property --orange-600 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #FFA75C;
+}
+/* The third lightest shade of orange */
+@property --orange-700 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #FFD4AF;
+}
+/* The second lightest shade of orange */
+@property --orange-800 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #FFF2E6;
+}
+/* The lightest shade of orange */
+@property --orange-900 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #FFFCF9;
+}
+
+/* Purples
+ * @scale purple 
+ */
+/* The darkest shade of purple */
+@property --purple-100 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #0E071B;
+}
+/* The second darkest shade of purple */
+@property --purple-200 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #170C2D;
+}
+/* The third darkest shade of purple */
+@property --purple-300 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #2E175A;
+}
+/* The shade just darker than middle of purple */
+@property --purple-400 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #4D2798;
+}
+/* The middle shade of purple */
+@property --purple-500 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #6937cb;
+}
+/* The shade just lighter than middle of purple */
+@property --purple-600 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #A689E0;
+}
+/* The third lightest shade of purple */
+@property --purple-700 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #D4C5F0;
+}
+/* The second lightest shade of purple */
+@property --purple-800 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #F2EDFA;
+}
+/* The lightest shade of purple */
+@property --purple-900 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #FCFBFE;
+}
+
+/* Reds
+ * @scale red 
+ */
+/* The darkest shade of red */
+@property --red-100 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #1E0200;
+}
+/* The second darkest shade of red */
+@property --red-200 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #320300;
+}
+/* The third darkest shade of red */
+@property --red-300 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #640600;
+}
+/* The shade just darker than middle of red */
+@property --red-400 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #A80A00;
+}
+/* The middle shade of red */
+@property --red-500 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #E30D00;
+}
+/* The shade just lighter than middle of red */
+@property --red-600 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #FF6258;
+}
+/* The third lightest shade of red */
+@property --red-700 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #FFB2AD;
+}
+/* The second lightest shade of red */
+@property --red-800 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #FFE7E6;
+}
+/* The lightest shade of red */
+@property --red-900 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #FFFAF9;
+}
+
+/* Yellows
+ * @scale yellow 
+ */
+/* The darkest shade of yellow */
+@property --yellow-100 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #242402;
+}
+/* The second darkest shade of yellow */
+@property --yellow-200 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #3D3D04;
+}
+/* The third darkest shade of yellow */
+@property --yellow-300 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #797907;
+}
+/* The shade just darker than middle of yellow */
+@property --yellow-400 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #CCCC0C;
+}
+/* The middle shade of yellow */
+@property --yellow-500 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #F3F331;
+}
+/* The shade just lighter than middle of yellow */
+@property --yellow-600 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #F8F885;
+}
+/* The third lightest shade of yellow */
+@property --yellow-700 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #FCFCC3;
+}
+/* The second lightest shade of yellow */
+@property --yellow-800 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #FEFEEC;
+}
+/* The lightest shade of yellow */
+@property --yellow-900 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #FFFFFB;
+}
+
+/* Blacks
+ * @scale black 
+ */
+/* Pure black */
+@property --black {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #000000;
+}
+/* Very slightly lighter than pure black */
+@property --black-ish {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #131313;
+}
+
+/* Whites
+ * @scale white 
+ */
+/* Pure white. */
+@property --white {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #FFFFFF;
+}
+/* Very slightly darker than pure white */
+@property --white-ish {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #FBFBFB;
+}

data/brut-css/src/css/properties/index.css

@@ -0,0 +1,3 @@
+@import "colors.css";
+@import "spacing.css";
+@import "typography.css";

data/brut-css/src/css/properties/spacing.css

@@ -0,0 +1,140 @@
+/* 
+ * Spacing properties.  These are used as the basis of widths, heights, margins, paddings, etc.
+ * There are eight steps in the scale, 1 being the smallest, and 8 being the largest.  They should
+ * provide an adequate number of possible values for spacings such that you can quickly audit them
+ * to figure out what you need.
+ *
+ * Spacings are based on rems, so that they are consistent across the entire document.
+ *
+ * @category spacings
+ */
+
+/*
+ * Basic spaces used for margins and paddings.
+ *
+ * @scale spacing
+ */
+@property --sp-1 {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0.25rem;
+}
+@property --sp-2 {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0.5rem;
+}
+@property --sp-3 {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 1rem;
+}
+@property --sp-4 {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 2rem;
+}
+@property --sp-5 {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 4rem;
+}
+@property --sp-6 {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 8rem;
+}
+@property --sp-7 {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 12rem;
+}
+@property --sp-8 {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 16rem;
+}
+
+/* Spacing for widths and heights.  Generally, widths and heights need more pronounced options
+ * than margins and paddings.  Thus, the fourth step of the width scale is much larger than the fourth
+ * step of the spacing scale.  The values here are double their respective spacing values.
+ *
+ * @scale widths-heights
+ */
+@property --wh-1 {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0.5rem;
+}
+@property --wh-2 {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 1rem;
+}
+@property --wh-3 {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 2rem;
+}
+@property --wh-4 {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 4rem;
+}
+@property --wh-5 {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 8rem;
+}
+@property --wh-6 {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 16rem;
+}
+@property --wh-7 {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 24rem;
+}
+@property --wh-8 {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 32rem;
+}
+/*
+ * Border widths.  This is a five-step scale, with 1 being the smallest and 5 being the largest.  
+ * These should provide adequate options for borders.  These don't use the
+ * {property-scale:spacing} scales mostly for aesthetic reasons.
+ *
+ * @scale border-widths
+ */
+/** Smallest border width */
+@property --bw-1 {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0.125rem;
+}
+/** Second smallest border width */
+@property --bw-2 {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0.25rem;
+}
+/** Middle border width */
+@property --bw-3 {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0.5rem;
+}
+/** Second largest border width */
+@property --bw-4 {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 1rem;
+}
+/** Largest border width */
+@property --bw-5 {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 2rem;
+}