@cas-smartdesign/styles 3.6.1

package/scss/modules/_button.scss

@@ -0,0 +1,37 @@
+@import "../variables/button";
+@import "../variables/spacing";
+
+.sd-button {
+	background: $sd-button-background;
+	color: $sd-button-color;
+	border: none;
+	outline: none;
+	padding: 0 $sd-normal-spacing;
+	height: 32px;
+	cursor: pointer;
+
+	&:hover {
+		background: $sd-button-hover-background;
+	}
+	&:focus {
+		background: $sd-button-focus-background;
+	}
+	&:active {
+		background: $sd-button-active-background;
+	}
+
+	&.primary {
+		background: $sd-primary-button-background;
+		color: $sd-primary-button-color;
+
+		&:hover {
+			background: $sd-primary-button-hover-background;
+		}
+		&:focus {
+			background: $sd-primary-button-focus-background;
+		}
+		&:active {
+			background: $sd-primary-button-active-background;
+		}
+	}
+}

package/scss/modules/_colors.scss

@@ -0,0 +1,9 @@
+@import "../variables/colors";
+
+.sd-app-background {
+	background: $sd-app-background;
+}
+
+.sd-content-background {
+	background: $sd-content-background;
+}

package/scss/modules/_index.scss

@@ -0,0 +1,9 @@
+@import "./_app.scss";
+@import "./_base_colors.scss";
+@import "./_button.scss";
+@import "./_colors.scss";
+@import "./_link.scss";
+@import "./_misc.scss";
+@import "./_spacing.scss";
+@import "./_token.scss";
+@import "./_typography.scss";

package/scss/modules/_link.scss

@@ -0,0 +1,11 @@
+@import "./typography";
+
+.sd-hyperlink {
+	@extend .sd-primary-text;
+
+	text-decoration: none;
+
+	&:hover {
+		text-decoration: underline;
+	}
+}

package/scss/modules/_misc.scss

@@ -0,0 +1,6 @@
+@import "colors";
+
+.sd-separator-line {
+	background: $sd-separator-color;
+	height: 1px;
+}

package/scss/modules/_spacing.scss

@@ -0,0 +1,29 @@
+@import "../variables/spacing";
+
+.sd-tiny-padding {
+	padding: $sd-tiny-spacing;
+}
+.sd-tiny-margin {
+	margin: $sd-tiny-spacing;
+}
+
+.sd-small-padding {
+	padding: $sd-small-spacing;
+}
+.sd-small-margin {
+	margin: $sd-small-spacing;
+}
+
+.sd-normal-padding {
+	padding: $sd-normal-spacing;
+}
+.sd-normal-margin {
+	margin: $sd-normal-spacing;
+}
+
+.sd-large-padding {
+	padding: $sd-large-spacing;
+}
+.sd-large-margin {
+	margin: $sd-large-spacing;
+}

package/scss/modules/_token.scss

@@ -0,0 +1,16 @@
+@import "../variables/base_colors";
+@import "../variables/spacing";
+
+.sd-token-container {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.sd-token {
+	height: 28px;
+	margin: $sd-tiny-spacing $sd-small-spacing $sd-tiny-spacing 0px;
+	padding: 0 $sd-small-spacing;
+	background: $sd-palegrey;
+	display: flex;
+	align-items: center;
+}

package/scss/modules/_typography.scss

@@ -0,0 +1,28 @@
+@import "../variables/typography";
+@import "../variables/spacing";
+
+.sd-primary-text {
+	font-family: $sd-font-family;
+	font-size: $sd-primary-font-size;
+	color: $sd-primary-text-color;
+}
+
+.sd-secondary-text,
+.sd-field-caption {
+	font-family: $sd-font-family;
+	font-size: $sd-secondary-font-size;
+	color: $sd-secondary-text-color;
+}
+
+.sd-heading-text {
+	font-family: $sd-font-family-light;
+	font-size: $sd-heading-font-size;
+	font-weight: $sd-heading-font-weight;
+	color: $sd-heading-text-color;
+}
+
+.sd-content-heading {
+	@extend .sd-heading-text;
+
+	padding-bottom: $sd-normal-spacing;
+}

package/scss/styles.scss

@@ -0,0 +1,2 @@
+@import "./variables/index";
+@import "./modules/index";

package/scss/theme.scss

@@ -0,0 +1,95 @@
+@import "./variables/index";
+@import "./modules/index";
+
+body {
+	@extend .sd-web-app;
+}
+
+h1 {
+	@extend .sd-heading-text;
+
+	margin: 0;
+	padding: 0;
+}
+
+h2,
+h3,
+h4,
+h5,
+h6 {
+	@extend .sd-content-heading;
+
+	margin: 0;
+}
+
+label {
+	@extend .sd-field-caption;
+
+	display: block;
+}
+
+a {
+	@extend .sd-hyperlink;
+}
+
+small {
+	@extend .sd-secondary-text;
+
+	margin: 0;
+}
+
+button,
+input[type="button"] {
+	@extend .sd-button;
+}
+
+hr {
+	@extend .sd-separator-line;
+
+	margin: $sd-tiny-spacing 0;
+	border: none;
+}
+
+section {
+	@extend .sd-content-background;
+	@extend .sd-large-padding;
+
+	margin: 0;
+}
+
+input[type="text"],
+input[type="password"],
+textarea {
+	@extend .sd-primary-text;
+	background: $sd-content-background;
+	width: 100%;
+	border: none;
+	border-bottom: 1px solid $sd-field-underline-color;
+	margin-bottom: $sd-small-spacing; // Give space for the underline
+	padding-top: 2px;
+	padding-bottom: 2px + 1px; // Give space for the focus underline
+
+	&:focus {
+		border-bottom: 2px solid $sd-interaction-color;
+		outline: none;
+		padding-bottom: 2px;
+	}
+	&:-moz-read-only {
+		border-bottom: 1px dashed $sd-field-underline-color;
+		padding-bottom: 2px + 1px; // Give space for the focus underline
+	}
+	&:read-only {
+		border-bottom: 1px dashed $sd-field-underline-color;
+		padding-bottom: 2px + 1px; // Give space for the focus underline
+	}
+	&:disabled {
+		border-bottom: 1px dashed $sd-field-underline-color;
+		background: $sd-content-background;
+	}
+}
+
+textarea {
+	box-sizing: content-box;
+	resize: none;
+	height: 120px;
+}

package/scss/variables/_base_colors.scss

@@ -0,0 +1,22 @@
+$sd-red: #cc0017;
+$sd-orange: #ff6b11;
+$sd-yellow: #ffbb11;
+$sd-lightgreen: #8abd0c;
+$sd-green: #009621;
+$sd-teal: #0099c5;
+$sd-lightblue: #0d98ff;
+$sd-blue: #1467ba;
+$sd-pink: #c41579;
+$sd-purple: #6c127b;
+$sd-brown: #593b20;
+$sd-white: #fff;
+$sd-palegrey: #f2f2f2;
+$sd-lightgrey: #d9d9d9;
+$sd-silver: #ccc;
+$sd-grey: #767676;
+$sd-darkgrey: #555;
+$sd-black: #111;
+
+$field-validation-warn-color: #555555;
+$field-validation-suggest-color: #bf8800;
+$field-validation-error-color: #cc0017;

package/scss/variables/_button.scss

@@ -0,0 +1,13 @@
+@import "colors";
+
+$sd-button-color: $sd-interaction-color !default;
+$sd-button-background: rgba($sd-button-color, 0) !default; /* Transparent */
+$sd-button-hover-background: mix($sd-button-color, $sd-button-background, 10%);
+$sd-button-focus-background: mix($sd-button-color, $sd-button-background, 10%);
+$sd-button-active-background: mix($sd-button-color, $sd-button-background, 20%);
+
+$sd-primary-button-color: $sd-white !default;
+$sd-primary-button-background: $sd-button-color !default;
+$sd-primary-button-hover-background: mix($sd-primary-button-color, $sd-primary-button-background, 10%);
+$sd-primary-button-focus-background: mix($sd-primary-button-color, $sd-primary-button-background, 10%);
+$sd-primary-button-active-background: mix($sd-primary-button-color, $sd-primary-button-background, 20%);

package/scss/variables/_colors.scss

@@ -0,0 +1,6 @@
+@import "./base_colors";
+
+$sd-app-background: $sd-palegrey !default;
+$sd-content-background: $sd-white !default;
+$sd-interaction-color: $sd-blue !default;
+$sd-separator-color: $sd-lightgrey !default;

package/scss/variables/_field.scss

@@ -0,0 +1 @@
+$sd-field-underline-color: #959595;

package/scss/variables/_index.scss

@@ -0,0 +1,6 @@
+@import "./_base_colors.scss";
+@import "./_button.scss";
+@import "./_colors.scss";
+@import "./_field.scss";
+@import "./_spacing.scss";
+@import "./_typography.scss";

package/scss/variables/_spacing.scss

@@ -0,0 +1,4 @@
+$sd-tiny-spacing: 4px !default;
+$sd-small-spacing: 8px !default;
+$sd-normal-spacing: 16px !default;
+$sd-large-spacing: 24px !default;

package/scss/variables/_typography.scss

@@ -0,0 +1,11 @@
+@import "./colors";
+
+$sd-font-family: "Segoe UI", "Lucida Sans", Arial, sans-serif !default;
+$sd-font-family-light: "Segoe UI Light", "Segoe UI", "Lucida Sans", Arial, sans-serif !default;
+$sd-primary-font-size: 16px !default;
+$sd-primary-text-color: $sd-black !default;
+$sd-secondary-font-size: 13px !default;
+$sd-secondary-text-color: $sd-grey !default;
+$sd-heading-font-size: 24px !default;
+$sd-heading-font-weight: lighter !default;
+$sd-heading-text-color: $sd-darkgrey !default;